postcss-vars

"Not so bad" CSS custom properties' postprocessor

postcss-vars

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.

##Install

npm install postcss-vars

##Use

Only variables defined in :root (and not in media-queries) will be used. Let's take this css:

:root {
    --color-one: blue;
    --color-two: green;
    --color-three: var(--color-two);
}
.elem {
    color: var(--color-one);
}
.item {
    background: linear-gradient(var(--color-two)red);
}
@media (min-width: 50em) {
    .elem {
        color: var(--color-two);
    }
}

Fix variables, and you will get the following output:

:root {
    --color-one: blue;
    --color-two: green;
    --color-three: var(--color-two);
}
.elem {
    color: blue;
}
.item {
    background: linear-gradient(greenred);
}
@media (min-width: 50em) {
    .elem {
        color: green;
    }
}

##API

###processor

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 = postcss().
            use(postcssVars.processor).
            use(autoprefixer.postcss).
            process(css).css;

###postcss

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 = postcssVars.postcss(css).css;

##License MIT