Stylus to CSS Converter: Compile Indentation-Based Stylus
Stylus is the most flexible CSS preprocessor — braces, colons, and semicolons are all optional, and block structure is determined by indentation like Python. This converter reads Stylus's indented syntax, resolves variables, and outputs properly formatted CSS.
The converter uses indentation depth to determine selector vs property vs nesting. Tabs are treated as 2-space equivalent for indent comparison.
Indentation-Based Parsing
Unlike SCSS and LESS which use braces to delimit blocks, Stylus uses indentation. The converter reads each line's indent level — if a line is more indented than the previous selector, it is part of that selector's block. Properties are detected by checking if the line looks like a CSS property declaration (starts with a lowercase letter followed by whitespace).
Optional Syntax Elements
Stylus allows colons and semicolons to be omitted from properties. The converter normalizes these: a property without a colon like 'color red' is rewritten as 'color: red;'. Properties with colons but without semicolons like 'color: red' get a semicolon added. This normalization produces valid CSS regardless of which Stylus style the author used.
Variable Substitution
Stylus variables are declared as name = value (without @ or $). The converter collects these declarations first and substitutes all references throughout the file. Like SCSS and LESS, variable declarations are removed from the output and replaced inline.
Practical Examples
Converting a Stylus Component to Plain CSS
Extract the CSS from a .styl file without installing the Stylus compiler.
- 1.Paste the .styl file content (indentation-based, no braces)
- 2.Variables are substituted and nesting is flattened
- 3.Review the CSS output for correctness
- 4.Copy and use as a standalone .css file
Stylus Syntax Handled
- Properties without colons: 'color red' → 'color: red;'
- Properties without semicolons: colon but no semicolon normalized
- Variables: name = value declarations substituted throughout
- Indentation-based nesting flattened to flat CSS selectors
Good Use Cases
- Extracting CSS from Stylus components without the compiler
- Migrating a Stylus project to plain CSS or SCSS
- Understanding what CSS a Stylus snippet produces
- Checking a Vue/Nuxt component's