iamvdo / postcss-vars

A "not so bad" CSS variables support

##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