CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-stylus

Robust, expressive, and feature-rich CSS superset with dynamic preprocessing capabilities

Pending
Overview
Eval results
Files

cli-interface.mddocs/

CLI Interface

Complete command-line interface for file compilation, watching, CSS conversion, and build integration with options for compression, source maps, debugging, and plugin support.

Capabilities

Basic Commands

Core command-line operations for Stylus compilation.

# Compile single file to stdout
stylus input.styl

# Compile file to specific output
stylus input.styl -o output.css

# Compile multiple files
stylus styles/*.styl -o build/

# Compile directory
stylus src/ -o build/

Watch Mode

Automatic recompilation when files change.

# Watch single file
stylus -w input.styl -o output.css

# Watch directory with compression
stylus -w -c src/ -o build/

CSS Conversion

Convert existing CSS files to Stylus syntax.

# Convert CSS to Stylus (stdout)
stylus --css < input.css

# Convert CSS to Stylus file
stylus --css input.css output.styl

# Convert with custom indentation
stylus --css --indent="  " input.css output.styl

Compilation Options

Control output format and optimization.

# Compress output CSS
stylus -c input.styl -o output.css

# Include line numbers in output
stylus -l input.styl -o output.css

# Include Firebug debug information
stylus -f input.styl -o output.css

# Generate source maps
stylus -m input.styl -o output.css

# Print compiled CSS to stdout
stylus -p input.styl

# Compare compiled output with existing file
stylus -d input.styl output.css

Include Paths

Specify directories to search for @import files.

# Single include path
stylus -I ./styles input.styl

# Multiple include paths
stylus -I ./styles -I ./node_modules input.styl

# Include path with compilation
stylus -I ./mixins -c input.styl -o output.css

Plugin Support

Use Stylus plugins for extended functionality.

# Use single plugin
stylus -u autoprefixer-stylus input.styl

# Use multiple plugins
stylus -u nib -u autoprefixer-stylus input.styl

# Plugin with compilation
stylus -u nib -c input.styl -o output.css

URL Processing

Configure URL handling in imports and assets.

# Inline imported CSS files
stylus -U input.styl -o output.css

# Resolve relative URLs
stylus -r input.styl -o output.css

# Auto-prefix CSS properties
stylus -P input.styl -o output.css

# Auto-prefix with specific prefix
stylus -P webkit input.styl -o output.css

Development Features

Tools for debugging and development workflow.

# Print file dependencies
stylus -s input.styl

# Include CSS imports in output
stylus --include-css input.styl -o output.css

# Set custom output extension
stylus --ext .min.css input.styl -o build/

# Set custom output extension for processed files
stylus --out-ext .processed.css src/ -o build/

Information Commands

Get help and version information.

# Display help
stylus -h
stylus --help

# Display version
stylus -V
stylus --version

Complete Option Reference

# All command-line options
stylus [options] [files...]

Options:
  -w, --watch                 Watch for changes and recompile
  -o, --out <dir>            Output directory or file
  -C, --css <src> [dest]     Convert CSS to Stylus syntax
  -I, --include <path>       Include path for @import statements
  -c, --compress             Compress output CSS
  -d, --compare              Compare compiled output with existing file
  -f, --firebug              Include Firebug debug information
  -l, --line-numbers         Include line numbers in output CSS
  -m, --sourcemap            Generate source map (.map file)
  -p, --print                Print compiled CSS to stdout
  -u, --use <plugin>         Use the given plugin
  -U, --inline               Inline imported CSS files
  -r, --resolve-url          Resolve relative URLs in imports
  -P, --prefix [prefix]      Auto-prefix CSS properties
  -s, --print-deps           Print file dependencies to stdout
  -h, --help                 Display help information
  -V, --version              Display version number
      --include-css          Include imported CSS in output
      --ext <extension>      Output file extension
      --out-ext <extension>  Output extension for processed files
      --indent <string>      Indentation string (for CSS conversion)

Usage Examples

# Basic compilation workflow
stylus main.styl -o main.css

# Development with watch mode
stylus -w -l -f src/styles.styl -o public/css/styles.css

# Production build with compression and source maps
stylus -c -m src/*.styl -o build/css/

# Using plugins and includes
stylus -u nib -u autoprefixer-stylus -I ./mixins -I ./variables main.styl -o main.css

# CSS to Stylus conversion
stylus --css legacy-styles.css modern-styles.styl

# Print dependencies for build tools
stylus -s main.styl > dependencies.txt

# Compare output (useful for testing)
stylus -d main.styl expected-output.css

# Multi-file compilation with custom extensions
stylus --ext .min.css --compress src/*.styl -o build/

# Complex build pipeline
stylus -u nib -I ./node_modules -I ./styles -c -m -P webkit src/main.styl -o dist/styles.css

Exit Codes

# Success
0    # Compilation successful

# Error codes
1    # General error (syntax error, file not found, etc.)
2    # Comparison failed (when using -d/--compare option)

Integration Examples

npm Scripts

{
  "scripts": {
    "css": "stylus src/styles.styl -o public/css/styles.css",
    "css:watch": "stylus -w src/styles.styl -o public/css/styles.css",
    "css:build": "stylus -c -m src/styles.styl -o dist/styles.css",
    "css:deps": "stylus -s src/styles.styl"
  }
}

Makefile

CSS_SRC = src/styles.styl
CSS_OUT = public/css/styles.css

css:
	stylus $(CSS_SRC) -o $(CSS_OUT)

css-watch:
	stylus -w $(CSS_SRC) -o $(CSS_OUT)

css-build:
	stylus -c -m $(CSS_SRC) -o $(CSS_OUT)

css-deps:
	stylus -s $(CSS_SRC)

Shell Scripts

#!/bin/bash
# Build script with error handling

set -e

echo "Building Stylus files..."

# Compile with plugins and includes
stylus -u nib -I ./styles -c src/main.styl -o dist/main.css

# Generate source map
stylus -m src/main.styl -o dist/main.css

# Print dependencies
echo "Dependencies:"
stylus -s src/main.styl

echo "Build complete!"

Install with Tessl CLI

npx tessl i tessl/npm-stylus

docs

builtin-functions.md

cli-interface.md

core-compilation.md

index.md

middleware.md

parsing-ast.md

utilities.md

tile.json