Add a "not so bad" CSS custom properties support to your CSS, using PostCSS. This is not a polyfill. Native custom properties are way more powerful, due to cascade and inheritance.
Largely inspired by rework-vars.
npm install postcss-vars
Only variables defined in
:root (and not in media-queries) will be used. Let's take this css:
Fix variables, and you will get the following output:
This is the core function. Combine it with others PostCSS plugins, such as Autoprefixer:
var autoprefixer =postcssVars =postcss = ;var fixed =processcsscss;
This is the full process function. Pass the
css as the first argument and grab your fixed CSS.
var postcssVars = ;var fixed = postcssVarscss;