CSS Formatter

CSS looks simple enough to reformat with a handful of find-and-replace rules — add a newline after every semicolon, indent inside braces — until nesting, media queries, and modern features like custom properties and container queries are actually in the file. A regex-based approach has no real concept of nesting depth, so it cannot correctly indent a media query containing several nested selectors, and it has no way to distinguish a semicolon that ends a declaration from one that appears inside a string value or a custom property containing arbitrary text. Parsing the stylesheet into an actual structure first — understanding which rule is nested inside which, where each block starts and ends — is what makes formatting correct on real, non-trivial CSS rather than only on toy examples.

This tool's minification is limited to removing whitespace and comments — the parts of a stylesheet that exist purely for a human reading it and carry no meaning to the browser's rendering engine. It deliberately does not merge duplicate selectors, reorder declarations, or shorten color values like rewriting `#ffffff` to `#fff`, even though a more aggressive minifier could do all three and produce a smaller file. Those transformations can change behaviour in ways that are easy to overlook: merging two rules with the same selector but written at different points in the cascade can change which declaration wins when they conflict, and reordering declarations risks the same. Whitespace removal alone carries no such risk — it cannot change what a browser renders, only how many bytes the file takes to describe it.

Web servers almost universally compress text assets with gzip or brotli before sending them over the network, and both compression algorithms are very good at exploiting exactly the kind of redundancy that whitespace and consistent indentation represent — repeated sequences of spaces compress extremely well already. This means the gap between a formatted stylesheet and a minified one, once both pass through gzip, is considerably smaller than the uncompressed size difference suggests. Minifying still helps, particularly by removing comments outright rather than merely compressing them, but it is worth knowing that most of the network-transfer benefit modern tooling promises is coming from compression, with minification contributing a smaller additional layer on top.

Formatting a Sass or Less file means applying consistent indentation and spacing to the source exactly as written — nesting, variables, mixins and control directives all stay intact, in their original preprocessor syntax. That is a different operation entirely from compiling, which resolves variables to their actual values, flattens nested selectors into standalone plain-CSS rules, and executes any mixins to produce their expanded output. Someone expecting compiled CSS out of a SCSS input will be surprised to see the same nested, variable-laden source formatted rather than resolved — this tool is a formatter for the preprocessor language, not a compiler for it.