CSS Minifier and Beautifier

The stylesheet is tokenised by the rules of CSS Syntax Level 3 before anything is removed, because whether whitespace matters in CSS depends on where it is. In .nav .item the space is the descendant combinator, and .nav.item matches something else; in calc(100% - 10px) the spaces are required, and the browser drops calc(100%-10px); in @media screen and (min-width: 600px) the space stops "and(" being read as a function. Minifiers built on regular expressions get these wrong, and nothing looks broken until the layout is. Here strings and url() are single tokens that are never touched, nested rules are told apart from declarations as CSS Nesting specifies, and whitespace is removed only where the grammar gives it no meaning: around commas, brackets and braces, the colon of a declaration, the > + and ~ combinators, slashes, !important, and the operators inside media query parentheses.

Minifying removes comments except /*! licence comments (a switch removes those too), the last semicolon in each block and rules with nothing in them, but not an empty @layer, which still sets the layer order, or an empty @keyframes, which still replaces an earlier one. Leading zeros go, so 0.5em becomes .5em, and trailing ones only while the number stays a non-integer: z-index: 1.0 is invalid and z-index: 1 is not, so 1.0 is kept. Hex colours are lowercased, and shortened only when exact: #AABBCC becomes #abc, #AABBCD stays. A zero length loses its unit only in properties that take nothing but lengths there: never inside calc(), min(), max() or clamp(), where a bare 0 is a number and a type error, and never in flex, flex-basis or line-height, where 0 means something else. Custom property values, the spacing inside an An+B expression such as :nth-child(2n + 1), and IE hacks such as *zoom are kept as written.

Before any output is shown it is tokenised again and compared with the tokens that were meant to be written. Where removing a comment would join two tokens into one, a separator goes back: a space where the source had one, otherwise an empty /**/, because an invented space could be a descendant combinator. Beautifying changes whitespace only: every comment stays, and no value is rewritten. Problems a browser recovers from silently are named instead: a } with no matching {, a block left open at the end, an @import after other rules. It is CSS only: Sass, SCSS and Less syntax, such as // comments and nesting with $variables, is not understood. Stylesheets over 100,000 characters are processed in a background worker so typing stays responsive.