Most caching plugins now ship a feature called something like “Remove Unused CSS.” It scans your pages, deletes every selector that no element uses, and sends the browser a slimmed-down stylesheet.
Most of the time that’s a good thing. The trouble is that it decides statically.
Three things it can’t see
① Classes added in the page builder. A name typed into an element’s “extra class” field has no source the scanner can find in the templates, so it’s marked unused.
② Design tokens declared only on :root. You’ve defined a set of variables for later, and nothing references them yet. To the scanner, that’s dead code.
③ Classes attached by scripts at runtime. The scan happens before anything runs.
Why this failure is so hard to spot
Every piece of evidence you can gather says it’s fine.
The file on the server contains the declaration. The combined file contains the string. The network panel in DevTools shows the file loading with a 200.
The only thing that tells the truth is getComputedStyle(). It reports the value the browser actually applied. That’s what we check when we verify a fix now. We no longer accept “the file on the server has it” as proof, because that’s exactly how the first two checks came back all green.
What we do instead
Declarations that would get stripped now go in as inline styles, injected at the plugin level. Inline styles never pass through the stripping step.
That isn’t working around the tool. It’s admitting one thing: a mechanism that guarantees load order doesn’t guarantee anything gets loaded.
