Open Jaeiya opened 3 years ago
CSS variables (custom properties) can be inherited, so there are use cases where replacement is undesirable. E.g. if you define --colour-1
, --colour-2
, etc. in an external "theme" stylesheet, and then reference these variables in an embedded stylesheet.
There would need to be an option to disable variable replacement. Or even better, let the user supply a whitelist/blacklist of variable names that can/cannot be replaced.
It would also break situations when variables are used as runtime variables, for example overriding colours based on dark mode:
:root {
--fg-color: black;
}
@media (prefers-color-scheme:dark) {
:root {
--fg-color: #dcdcdc;
}
}
It's also possible to manipulate variable values from JavaScript. So I think if implemented this should be disabled by default.
Before conversion
After conversion
I have a very large file with all the variables inside it for theme management; it would be nice to remove all those long names and just replace them with the colors. It would save a huge amount of space.