CSS minifier

A CSS minifier must respect the cascade

CSS is not a bag of independent declarations. Source order decides which rule wins, repeated declarations can provide deliberate fallbacks, and an unknown at-rule may be meaningful to a newer browser or another standards-based processor. Removing or moving any of those things is optimization, not whitespace cleanup.

This tool uses css-tree as a parser and conservative serializer. It never runs a structural optimizer: rules are not merged, selectors are not combined, declarations are not deduplicated, and no optimizer shortens values or colors. The serializer can choose a canonical spelling for parsed syntax. Comments and formatting whitespace are removed only where the CSS grammar lets the serializer reproduce the same parsed structure. To see exactly which spellings changed, lay both the original and the result out with the CSS formatter and paste the two into text compare, which marks the differences down to the character.

Comment preservation has a narrower boundary. A top-level /*! license banner */ is retained, but the serializer may remove comments nested inside rules, selectors, values, media rules or keyframes. It also removes /*# sourceMappingURL=… */ references and does not create a replacement map. Keep the original source and its license files as the authoritative copy. Going the other way — laying a stylesheet out over lines and indents while keeping every comment and every token exactly as written — is the CSS formatter next door.

Why minified CSS still contains spaces

Some whitespace is syntax. In calc(100% - 2rem), the spaces around the binary minus distinguish an operator from a signed number. A comment can also be the only boundary between two identifier tokens. If red/**/blue became redblue, the token stream would change. Conservative serialization replaces such a comment with the separator the grammar needs.

Custom-property values deserve the same caution because their token sequence is kept for later substitution by var(). Escaped identifiers, cascade layers, !important, duplicate declarations and unknown at-rules all appear in the regression corpus rather than being treated as edge cases.

Two checks before a result exists

The compact stylesheet is parsed a second time. Its complete syntax tree must match the tree parsed from your input. The generated form is then tokenized separately; invalid string or URL tokens are rejected, and the canonical token stream must be stable across the reparse. If either check disagrees, the worker returns an error and no output.

These checks establish a narrow claim: the parser sees the same structure and the tokenizer sees the same canonical tokens. They are not a claim that every browser bug, vendor extension or future syntax can be predicted. css-tree can report recoverable diagnostics for some complete modern @supports conditions and nested rules. Those cases proceed only when the same preserved recovery, parsed structure and canonical token stream survive serialization. Other parser recoveries return no output rather than guessing through damaged syntax.

Compile SCSS before minifying

SCSS variables, interpolation, mixins, functions and line comments are instructions for a preprocessor. Their meaning can depend on imports, configuration and a project build, none of which exists in a pasted snippet. Compile the source in its real project first, then submit the emitted CSS here.

The same boundary explains why there is no source-map download. A useful map connects generated bytes to original files and build steps. A browser-only minifier that sees one text field cannot honestly reconstruct that provenance. The output is a single verified CSS file, processed in a local worker and never uploaded.

Markup is outside the CSS grammar even when it appears beside a stylesheet. Strict XML needs its own namespace, mixed-content, and whitespace rules; use the XML formatter instead of treating angle brackets as minifiable CSS tokens.