About

Stylus is a CSS preprocessor that strips syntactic noise - braces, semicolons, colons - to produce a cleaner, indentation-based stylesheet. Manual conversion introduces transcription errors: a misplaced indent breaks the entire cascade, a forgotten removal of ; creates invalid Stylus output. This converter parses your CSS token-by-token, resolves selector nesting depth, preserves @media and @keyframes block hierarchy, and emits valid Stylus with configurable indentation (2 spaces, 4 spaces, or tabs). It handles edge cases including CSS custom properties (--var-name), multi-selector rules, !important annotations, and quoted url() values containing special characters.

The tool approximates Stylus output assuming standard CSS input without Sass/Less-specific syntax. Nested output is optional: flat conversion preserves original selector strings while nested mode groups child selectors under parents. Note: CSS @import statements remain as-is since Stylus uses identical syntax. Pro tip: always validate the generated Stylus in your build pipeline before committing - edge cases in minified CSS or browser-hacked selectors (e.g., _:-ms-fullscreen) may require manual adjustment.

Formulas

The conversion process follows a deterministic pipeline of string transformations. No mathematical formulas are involved; instead, the logic applies a sequential rule-based transpilation:

Stage 1 → Extract and preserve block comments /* ... */ and string literals url(...) as indexed placeholders to prevent false parsing

Stage 2 → Tokenize input into blocks by matching brace pairs { } tracking nesting depth d ∈ N

Stage 3 → For each block at depth d, emit selector with d × indentSize leading spaces, strip { }

Stage 4 → For each declaration, remove trailing ; and optionally remove : between property and value

Stage 5 → Restore preserved comments and string literals from placeholders

Where d = current brace nesting depth (0 = root), indentSize = user-selected indent width (2, 4, or 1 tab character).

Reference Data

CSS Feature	CSS Syntax	Stylus Equivalent	Notes
Declaration terminator	; required	Omitted	Line break acts as terminator
Block braces	{ } required	Omitted	Indentation defines scope
Property colon	color: red	color red or color: red	Colon is optional in Stylus
Nesting	Flat selectors only	Indent children under parent	Reduces repetition
Parent reference	N/A	& prefix	Used for pseudo-classes, BEM
Variables	--name: value	name = value	This tool preserves CSS custom properties as-is
@media blocks	@media (max-width: 768px) { ... }	@media (max-width: 768px) + indent	Block content indented
@keyframes	@keyframes name { 0% { ... } }	@keyframes name + indent	Percentage selectors indented
@font-face	@font-face { ... }	@font-face + indent	Properties indented one level
@import	@import url(...)	@import url(...)	Identical syntax
@charset	@charset "UTF-8"	@charset "UTF-8"	Preserved verbatim
Comments (block)	/* ... */	/* ... */	Preserved
Comments (line)	N/A in CSS	// ...	Stylus-only feature; not generated
Multi-selector	h1, h2, h3 { ... }	h1, newline h2, newline h3	Each selector on own line
!important	color: red !important;	color red !important	Preserved as-is
Pseudo-classes	.btn:hover { ... }	&:hover nested or flat	Depends on nesting mode
Pseudo-elements	.el::before { ... }	&::before nested or flat	Depends on nesting mode
Attribute selectors	[type="text"] { ... }	[type="text"]	Preserved verbatim
Combinators	.a > .b { ... }	.a > .b or nested	Direct child preserved
calc() expressions	width: calc(100% - 20px)	width calc(100% - 20px)	Function arguments preserved
Custom properties	--my-color: #333	--my-color #333	Colon kept if option enabled

Frequently Asked Questions

Yes. The parser tracks brace depth independently, so a @media block nested inside a selector (or vice versa) is correctly indented at the appropriate level. Each @media block's contents receive an additional indentation level relative to the @media declaration itself.

CSS custom properties (--my-var: value) and Stylus variables (my-var = value) are semantically different. CSS custom properties are runtime values accessible via var() in the browser; Stylus variables are compile-time only. Converting between them would change runtime behavior. The tool preserves CSS custom properties verbatim to maintain functional equivalence.

The parser operates on brace-matching and semicolon-splitting, not whitespace. Minified CSS like .a{color:red;margin:0} is correctly parsed into individual declarations. However, extremely malformed CSS (e.g., missing closing braces) will produce a warning toast and best-effort output.

Vendor prefixes are standard CSS identifiers and pass through unchanged. The property name -webkit-transform is preserved exactly. If colon removal is enabled, the output becomes -webkit-transform value instead of -webkit-transform: value.

No. Stylus-to-CSS requires a full preprocessor compiler that resolves variables, mixins, conditionals, and interpolation. That is a fundamentally different operation. This tool performs one-directional CSS-to-Stylus syntax stripping only.

The tool recognizes nested CSS syntax using the & parent selector within brace-delimited blocks. If your CSS already uses the native CSS Nesting draft syntax, the converter will process the existing nesting structure and produce correctly indented Stylus output, stripping the braces and semicolons while preserving the hierarchy.