Feature request: rename custom properties for smaller bundle size

[muuvmuuv]

To reduce the size of a CSS file even more, I would love to see an option so that every custom property gets renamed to a small random unique string instead of the sometimes longer definitions.

So this:

:root {
  --color-primary: #3f3f3f;
  --color-primary-dark: #2d2d2d;
}
button {
  background: var(--color-primary-dark);
  color: var(--color-primary);
}

would become:

:root {
  --a: #3f3f3f;
  --b: #2d2d2d;
}
button {
  background: var(--b);
  color: var(--a);
}

[muuvmuuv]

To make it more unique we could say that option has three values: true, false and a string which represents a prefix.

[pascalduez]

Hi,

this would be the role of a CSS minifier, like CSSnano.

[muuvmuuv]

@pascalduez ah yes, sure, I'm sorry!

[pascalduez]

@muuvmuuv No need to be sorry :) That's a pretty good idea I guess. Maybe you'd like to wait for other peoples point of view as well.

Something to be careful of would be if those custom properties are accessed by some JS scripts.

[muuvmuuv]

Yes,I just thought about simple pages. For css-in-js there is more work to do; parsing JS files and extract the values to not rename or open a DB connection for CMS modules that use those props etc..

I have created a simple script for simple webpages with no fancy stuff:

https://github.com/muuvmuuv/reduce-custom-properties