Three operations · three different promises
Choose how much the machine may change.
Formatting, diagnosis, and minification begin with the same parsed stylesheet, then take different exits. Pick the result you need before you judge its output.
Format
AST → readable CSSStable indentation and wrapping
Diagnose
Parser → evidenceSyntax signals and an honest boundary
Minify
Tokens → fewer bytesComments and whitespace reduced
Modern CSS stress sheet
A useful formatter must survive today’s grammar.
These specimens exercise rule nesting, layers, custom properties, feature queries, calculations, and perceptual color—not just twenty-year-old declarations.
@layer
@layer components { … }Cascade layer order remains authored
Nesting
.card { &:hover { … } }The parent selector stays attached
Tokens
:root { --space: 1rem; }Custom property names are preserved
@supports
@supports (color: oklch(0 0 0))Conditional rules remain nested
Math
width: calc(100% - var(--space))Expression spacing becomes legible
Color
color: oklch(72% .18 145)Modern function tokens stay intact
Byte-budget waterfall
Smaller is a sequence, not a synonym for prettier.
Formatting may grow a file. Minification removes syntax that is unnecessary for delivery while this page deliberately disables rule restructuring.
Authored
100%
Original whitespace, comments, and line breaks
Formatted
≈ 116%
Readable reprint; byte growth is expected
Minified
≈ 64%
Whitespace collapsed; safe token rewrites
Restructured
Not here
Selector/rule reordering is intentionally disabled
Parser breadcrumb
Fix the first broken boundary.
An unclosed block changes how every later token is read. The earliest parser location is more useful than a generic “invalid CSS” banner.
.card {
color: var(--ink);
&:hover {
color: oklch(70% .2 145);
/* missing closing braces */Close the nested rule, then the parent rule. Re-run diagnosis before changing declarations downstream.
Cascade boundary court
What a successful parse still cannot prove
Specificity intent
Valid selectors can still override the wrong rule.
Unused selectors
A formatter cannot observe the DOMs your app renders.
Browser support
Parsing modern syntax does not establish target support.
Visual equivalence
Only rendering and regression tests can judge the pixels.