CSS Formatter & Minifier

about this tool

Formatting

Formatting is done by Prettier's PostCSS printer, which is what most editors run on save. It downloads the first time you format rather than with the page, because it is large. Choose CSS, SCSS or Less; the indent and wrap width are yours to set, and Prettier decides the rest: one declaration per line, a space after each colon, selectors in a list on their own lines. It never changes a value.

Minifying

The minifier is written here rather than borrowed. The usual libraries either restructure the stylesheet (merging rules, re-ordering declarations) or rewrite values (#ffffff to #fff, 0.5em to .5em), both of which can change what a page looks like in ways that only show up later. This one does neither. It removes exactly three things:

• Comments, except those beginning /*!, which by convention carry a licence and are kept whatever the option says.
• Whitespace that the grammar does not need: around braces, semicolons and commas; inside brackets; around combinators in a selector; around the colon in a declaration; before !important. Everything else collapses to a single space.
• The last semicolon in each block, which is optional.

Nothing else is touched. Every value, every string, every url() body is copied as written. The saving is therefore a little lower than an aggressive minifier reports, and the stylesheet applies identically, which is the trade.

Spaces that mean something

CSS has several places where a space is meaning rather than layout, and the minifier keeps each of them:

• a :hover (a hovered element inside a link) stays distinct from a:hover (the hovered link). The tool knows whether it is in a selector or a declaration and treats the colon accordingly.
• margin: 0 -1px keeps the gap between its two values; 0-1px is not CSS.
• calc(100% - 10px) keeps the spaces round its operators, which the grammar requires. The inside of calc() and other function brackets is tightened only at the edges and around commas.
• @media screen and (min-width: 600px) keeps the space after and; without it the query is invalid.
• .\31 0 keeps the space after the hex escape, because that space ends the escape: the class is 10, and .\310 would be a different class.
• Comments that are kept are looked through when deciding on a space, so a /* note */ b stays a descendant selector while the gap after a leading licence comment goes.

Limits

Minify expects plain CSS. SCSS and Less // line comments are not recognised and would survive as text, which is invalid in CSS; format those with the right syntax selected and minify the compiled output instead. A custom property whose value contains braces is treated as a nested block, so its internal spacing follows the block rules rather than being preserved verbatim. Empty rules are left in place.

Errors

Prettier reports what it could not parse by line and column, and the tool shows that under the input. The minifier is more forgiving, as browsers are: it stops only for a block, string, comment or url( that is never closed, or a closing brace with nothing open, and reports where the problem began.

questions

Why does the minifier keep the spaces inside calc()?

Because the grammar requires them. In calc(), + and - must have whitespace on both sides or the expression is invalid; calc(100%-10px) is parsed as 100% followed by the number -10px and the whole declaration is dropped. Spaces round * and / may go, but the tool leaves the inside of calc() alone entirely.

Why is "a :hover" not tightened to "a:hover"?

They select different elements. "a :hover" has a space, so it means any hovered element inside a link; "a:hover" means the hovered link itself. The minifier knows whether it is inside a selector or a declaration and only removes a space round a colon in a declaration.

Why does #ffffff not become #fff, or 0.5em .5em?

The minifier changes layout, not values. Rewriting values is where minifiers go wrong (rounding a colour, merging shorthands with different semantics), and the bytes saved are small. If you want value rewriting, a build-time tool with a test suite is the place for it.

Can I minify SCSS or Less?

No. Minify expects plain CSS. SCSS and Less line comments (//) are not understood, and their nesting, variables and mixins only mean something to their compilers. Format them here; minify what the compiler produces.

What is a /*! comment and why is it kept?

A comment beginning with an exclamation mark is the convention for a licence or attribution that must survive minification. Every minifier honours it, and so does this one, whatever the comment option is set to.