PostCSS Var Optimize
PostCSS plugin to optimize css variables usage, it will convert the ones that are declared only once, it will also remove the ones that are redeclared with the same value
a {
border: var(--d);
background: var(--c);
padding: var(--a);
}
:root {
--a: 1%;
--b: calc(var(--a) + 2%);
--c: hsl(20deg, var(--b), var(--a));
--d: var(--c) var(--b) var(--a);
}
.theme {
--b: 3;
}
a {
border: hsl(20deg, var(--b), 1%) var(--b) 1%;
background: hsl(20deg, var(--b), 1%);
padding: 1%;
}
:root {
--b: 3%;
}
.theme {
--b: 3;
}
Usage
Check your project for an existing PostCSS config in postcss.config.js
in the project root, or a "postcss"
section in package.json
or postcss
in bundle configuration.
If you already use PostCSS, add the plugin to the plugins list:
module.exports = {
plugins: [
+ require('postcss-var-optimize'),
require('autoprefixer')
]
}
If you do not use PostCSS, add it according to the official docs and add this plugin in the settings like previously indicated.
Options
-
whitelist
: a regex or a string (or array of those) indicating the name of the variables allowed to be optimized away (do not include the --), if set only the matching ones will be optimized -
blacklist
: a regex or a string (or array of those) indicating the name of the variables disallowed to be optimized away (do not include the --)