Replies: 3 comments 1 reply
-
Not quite what you want but there's already this https://github.com/navanshu/postcss-variable-compress |
Beta Was this translation helpful? Give feedback.
-
besides, it's hard to determine which variables are actually used variably. If you can guarantee that all JS and CSS is built at the same time, you could at least remove the vars that are not in any CSS, and you could inline all the vars with only a single declaration. If JS contains the variable name, you can't remove or inline it. |
Beta Was this translation helpful? Give feedback.
-
@wmertens thanks for the response, we're testing |
Beta Was this translation helpful? Give feedback.
-
Our website uses Tailwind CSS which implements a lot of CSS variables (e.g.
--tw-ring-color
,--tw-ring-offset-color
and many more) These variables actually make the output CSS file larger as they are called likevar(<variable_name>)
in many places. If instead we could just put the actual values everywhere, our output CSS would be significantly smaller. Just to compare:--tw-ring-color
#333
var(--tw-ring-color)
--tw-ring-offset-color
#434343
var(--tw-ring-offset-color)
I couldn't find any related configuration options in cssnano's documentation but maybe there is some way to configure it to replace all
var(...)
occurrences with the actual values during minification?Beta Was this translation helpful? Give feedback.
All reactions