search

mattbasta / crass

A CSS minifier and utility library for JavaScript
http://mattbasta.com/crass
MIT License
102 stars 6 forks source link

Strips some rules referencing custom properties (CSS vars) #71

Open luboslives opened 5 years ago

luboslives commented 5 years ago

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)

mattbasta commented 5 years ago

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