The /*! */ License Comment Your Minifier Deletes
The test
Input:
/*! Copyright 2026 ACME Corp, MIT */
.a{color:red}Through the shipped minifier:
.a{color:red}Through the shipped beautifier:
/*! Copyright 2026 ACME Corp, MIT */
.a {
color:red
}Fifty bytes in, twelve bytes out, one comment gone. The same stylesheet, the same tool, two opposite answers depending on which button you pressed.
/*! is not a style choice. It is the convention, older than any bundler, that says this comment is load-bearing — do not remove it. min.cssnano and cssnano honour it; Lightning CSS honours it; this minifier does not. If you ship third-party CSS under MIT or Apache, the licence text is a distribution requirement, not a nicety, and a build step that deletes it creates a file that should not have existed.
Fix, in rough order of reliability: keep the header outside the minified file (own banner at build time, injected after minification); accept that this tool cannot be your last pass on vendored CSS; or check the header survived in CI with nothing more exotic than grep -c '^/\*!' dist/app.min.css. The point is not to trust the minifier to know which comments mattered — it is not looking.
What else the minifier drops, measured
Every row below is input → output from the shipped minifyCss.
| Input | Output | Verdict |
|---|---|---|
/* note */\n.a{color:red} | .a{color:red} | dropped (expected) |
a{/*x*/color:red} | .a{color:red} | dropped — fine, but see below |
a{margin:0px} | a{margin:0px} | unit kept — 0 was available |
a{width:1.50px;margin:0.5em} | a{width:1.50px;margin:0.5em} | no leading-zero strip, no rounding |
a{background:url(foo bar.png)} | a{background:url(foo bar.png)} | left as-is; invalid CSS in, invalid CSS out |
\uFEFFa{color:red} (BOM) | a{color:red} | BOM stripped |
a{color:red}\r\nb{color:blue} | a{color:red}b{color:blue} | CRLF collapsed |
a{width:calc(100% - 10px)} | a{width:calc(100% - 10px)} | spaces around - preserved (correct) |
@layer base;\n@layer base{a{color:red}} | @layer base;@layer base{a{color:red}} | at-rule order kept |
The honest summary: this is a whitespace minifier, not an optimiser. It removes comments, indentation, and line breaks, and leaves the actual CSS alone. That is why calc() spacing survives — many real breakage stories come from minifiers touching calc, and this one never looks at it. It is also why the byte savings will be smaller than a real optimiser's: 0px stays 0px, 1.50px stays 1.50px, unquoted url() stays broken.
For a site whose whole selling point is "runs in your browser, no build step", the conservative choice is defensible. But do not read "doesn't optimise much" as "can't hurt anything" — the licence header is the counterexample.
Does it reorder your cascade? No.
Equal-specificity conflicts depend on order, so any formatter that shuffled rules would change what renders. Checked directly:
IN .b{color:red}
.a,.b{color:blue}
MIN .b{color:red}.a,.b{color:blue}.b stays red — correct, and it stays correct through minification. Declaration order inside a rule is also untouched: p{margin:0;color:red} comes back with margin first. Native CSS nesting survives intact:
IN a{&:hover{color:red}color:blue}
MIN a{&:hover{color:red}color:blue}No reordering, no hoisting, no "optimiser moved your nested rule above the parent declaration" mistake. That is the failure mode this class of tool most often has, and it is absent here. Worth stating plainly because "it does nothing" is only reassuring once you have checked it was in a position to do the damaging something.
Round-tripping both directions is stable too: minify(beautify(x)) and beautify(minify(x)) both return the original rule set, and beautify is idempotent on its own output.
How to re-run this
All output above came from the shipped minifyCss / beautifyCss, extracted from the deployed dist/index.html and run under Node by the repo's fuzz harness — not from a copy of the logic:
node scripts/build.js
node -e 'process.env.FUZZ_APP_ROOT="/tmp/fuzzroot";
const {loadApp}=require("./scripts/fuzz/load.js");
const A=loadApp("csstidy",["minifyCss","beautifyCss"]).api;
A.__setInput("in","/*! Copyright 2026 ACME Corp, MIT */\n.a{color:red}");
A.__setInput("out","");
A.minifyCss(); console.log("MIN :",A.__readOutput("out"));
A.__setInput("in","/*! Copyright 2026 ACME Corp, MIT */\n.a{color:red}");
A.__setInput("out","");
A.beautifyCss(); console.log("BEAU:",A.__readOutput("out"));'
# MIN : .a{color:red}
# BEAU: /*! Copyright 2026 ACME Corp, MIT */
# .a {
# color:red
# }Not verified
I did not install cssnano, Lightning CSS, or cssdo for this page, so every claim above is about this tool. The comparison sentence about which tools honour /*! is stated from convention and I have not re-run it here — check it yourself before repeating it. I also did not test this minifier against @import hoisting rules, @media merging, or selector minimisation (.a.a → nothing, or class dedup), because it does not attempt them.