"Not so bad" CSS custom properties' postprocessor
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 = require'autoprefixer'postcssVars = require'postcss-vars'postcss = require'postcss';var fixed = postcssusepostcssVarsprocessoruseautoprefixerpostcssprocesscsscss;
This is the full process function. Pass the
css as the first argument and grab your fixed CSS.
var postcssVars = require'postcss-vars';var fixed = postcssVarspostcsscsscss;