crass
crass copied to clipboard
Strips some rules referencing custom properties (CSS vars)
Maybe this comes down to the interpretation of what is a valid value for custom properties, but from what I can tell, CSS Vars can store any kind of value - not just complete, valid CSS values.
So here's my use case. I have an RGB value that I store in a custom property, to be referenced inside an RGBA rule:
:root { --navyblue-rgba: 46, 44, 48; }
h1 { background: rgba(var(--navyblue-rgba), 0.94); }
This way I can adjust opacity as I please and I don't have to create ~4 other unique variables for the different opacity values I use throughout the site. And it's malleable for further customization with JS. The browsers interpret this absolutely as I intended.
When I process the file with crass, it keeps the declaration in :root
but removes all the rules which reference it. For example, the h1
no longer has a background
rule at all, only its other rules.
(crass will keep references to custom properties that contain full, valid-looking values)
Thanks for reporting this issue. I'm currently rewriting crass, and will include a fix for this in the rewrite.