A "not so bad" CSS variables support
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib V0.1.0 Mar 27, 2014
README.md Update README Aug 26, 2014
package.json V0.1.0 Mar 27, 2014

README.md

Deprecated module! See postcss-custom-properties instead.

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(green, red);
}
@media (min-width: 50em) {
    .elem {
        color: green;
    }
}

Warning: You can use a fallback value too, which is used as the substitution value if the variable is undefined. Pay attention that the CSS Custom properties module define the fallback value as a subsitution if the variable is invalid (eg. color: var(--foo) when --foo: 20px is set).

:root {

}
.elem {
    color: var(--color, red);
}

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