Stylus — Expressive Dynamic CSS Preprocessor for Node.js

Introduction

Stylus is a CSS preprocessor created by TJ Holowaychuk (also known for Express.js and Mocha). It offers the most flexible syntax among CSS preprocessors — braces, colons, and semicolons are all optional. This minimalist approach produces clean, readable stylesheets while providing powerful features like transparent mixins, built-in functions, and iteration.

What Stylus Does

• Compiles an indentation-based stylesheet language into standard CSS
• Supports variables, nesting, mixins, and functions with a minimal syntax
• Provides transparent mixins that look like native CSS properties
• Includes built-in functions for color manipulation, math, and URL embedding
• Integrates with Node.js build pipelines via middleware and plugins

Architecture Overview

Stylus is a Node.js-based compiler that tokenizes .styl files, builds an AST, resolves mixins and variables through lexical scoping, and emits CSS. The parser handles both the indentation-based syntax and the traditional CSS syntax interchangeably in the same file. The plugin architecture exposes the AST for transformations, enabling features like automatic vendor prefixing (via nib) and sprite generation.

Self-Hosting & Configuration

• Install via npm: npm install stylus --save-dev
• Integrate with webpack using stylus-loader
• Use the nib plugin for cross-browser mixins and vendor prefixes
• Configure Stylus middleware in Express.js for on-the-fly compilation
• Enable source maps with --sourcemap for debugging in browser DevTools

Key Features

• Optional syntax — write CSS without braces, colons, or semicolons
• Transparent mixins that blend seamlessly with native CSS properties
• Iteration and conditionals (for, if/else) for generating repetitive CSS
• Powerful built-in functions: darken(), lighten(), rgba(), unit()
• Rest params and argument introspection in mixin definitions

Comparison with Similar Tools

• Sass/SCSS — larger ecosystem and community; Stylus offers more syntactic freedom
• Less.js — closer to CSS syntax; Stylus allows a more concise, Python-like style
• PostCSS — plugin-based transformer; Stylus is a complete preprocessor language
• Tailwind CSS — utility-first approach; Stylus is for writing custom component-scoped styles

FAQ

Q: Is Stylus still maintained? A: The project receives maintenance updates. The core feature set is stable and complete for production use.

Q: Can I mix Stylus and regular CSS syntax? A: Yes. Stylus accepts both indentation-based syntax and standard CSS in the same file.

Q: Does Stylus work with Vue.js single-file components? A: Yes. Vue supports <style lang="stylus"> blocks natively with the appropriate loader.

Q: How does Stylus handle vendor prefixes? A: Use the nib library, which provides transparent mixins that automatically add vendor prefixes where needed.

Sources

• https://github.com/stylus/stylus
• https://stylus-lang.com/