Stylus to CSS Converter

An old project written in Stylus, the people who wrote it long gone, and nobody wants to install a toolchain just to find out what a file actually produces. Or you want to drop a snippet into CodePen, which expects CSS. Paste the indented Stylus into the top box and the version with braces, colons and semicolons shows up below, ready to copy with one click.

Parsing goes by indentation: a line starting at column zero is a selector, an indented line is a declaration. Each declaration splits at the first whitespace, so the first word becomes the property and the rest becomes the value, which is why padding 8px 12px comes out as padding: 8px 12px;. Write it without the optional characters: leave the Stylus colon in and it is read as part of the property name, giving you a doubled colon.

Flat rules only. Nesting, &:hover, mixins, variables in the $name = value form, conditionals and arithmetic are not evaluated, and those lines end up as odd declarations inside the previous rule. For a real stylesheet, compile with the official tool (npm i -g stylus, then stylus -p file.styl). For a short flat snippet this is quicker, and it runs in the browser with copy and clear buttons.