CSS to Stylus Converter

Stylus lets you drop braces, colons and semicolons, which feels odd at first if you came from CSS. Seeing the same rule in both shapes is the fastest way to build the habit, and it saves time when a snippet arrives as CSS while your project is all .styl files. Paste the CSS and the Stylus version shows up below, two spaces per declaration.

The parser works on flat rules: for each block, the selector becomes a line of its own and the declarations follow indented, with property and value separated by nothing but a space. So color: #333; turns into color #333. Since Stylus accepts both shapes, the result compiles the same whether you keep this output or put the punctuation back to match house style.

One catch: a block inside a block does not survive. Send in a media query and the inner rules convert while the @media line evaporates, so convert those pieces separately and reinsert the wrapper with the content indented beneath it. A /* */ comment attaches itself to the following selector. The converter also does not nest selectors or extract variables, which is most of the point of Stylus, so that work stays yours. Copy and clear included, all in the browser.