FAQ
Are rules inside media queries indented?
Yes, rules inside @media get an extra level of indentation so the nesting is visible.
Are quotes and parentheses inside url() safe?
Yes. url() content is treated as a whole like a string, so commas and parentheses inside are not mistaken for separators.
Does minifying break styles?
No, it only removes comments and whitespace. The output is one long line, which is harder to debug.
About this tool
Formatting expands to "one selector per line, one declaration per line": { stays on the selector line, } gets its own line, and indentation is a fixed 2 spaces. Rules inside @media get one extra level, so nesting is visible at a glance.
Commas are handled in two different contexts, which is where naive formatters go wrong: at the top level (.a, .b { }, a selector list) each comma starts a new line, one selector per line; inside a declaration (rgba(0,0,0,.1), font-family: A, B) the comma stays inline with a single space, because splitting it hurts readability. Which case applies is decided by parenthesis depth, not by guessing.
Strings and url() are protected as whole units: the semicolons, commas and closing bracket inside url(data:image/png;base64,iVBOR…) are never treated as separators, and the comma in content: "a, b" is left alone. Minify works the same way, segment by segment — it compresses whitespace only, never content, so quoted text survives untouched.
This is a formatter, not a validator: a missing semicolon, unbalanced braces or a misspelled property produce no error, the output simply follows the structure you pasted. If styles break after minifying, suspect the original first. CSS Nesting is handled by brace depth, and & references and custom properties (--x: 1) are preserved as written.