crass icon indicating copy to clipboard operation
crass copied to clipboard

Strips some rules referencing custom properties (CSS vars)

Open luboslives opened this issue 5 years ago • 1 comments

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)

luboslives avatar Jul 28 '19 15:07 luboslives

Thanks for reporting this issue. I'm currently rewriting crass, and will include a fix for this in the rewrite.

mattbasta avatar Jul 28 '19 15:07 mattbasta