PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation. This plugin provides a future-proof way of using most of CSS variables featuers.

CSS variables polyfill/shim.

We strive for the most complete transformation but we this plugin can't achieve complete parity.

var postcss = require('postcss');
var cssvariables = require('postcss-css-variables');

postcss([
	cssvariables(/*options*/)
])
.process(css, opts);

For more general PostCSS usage, see this section

todo

will be processed to:

todo

post-css-variables is plays really nice with postcss-nested in order to get a larger subset of CSS variables features.

A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS). A property must be in a rule.

Note: :root is nothing more than the selector for the root DOM node. You could use any other selector (class, id, etc)

:root {
	--foo-width: 100px;
	--foo-bg-color: rgba(255, 0, 0, 0.85);
}

A custom property can be declared multiple times.

See: W3C Draft: CSS Custom Properties for Cascading Variables, section 2 for more information.

.foo {
	width: var(--foo-width);
	/* You can even provide a fallback */
	background: var(--foo-bg-color, #ff0000);
}

See: W3C Draft: CSS Custom Properties for Cascading Variables, section 3 for more information.

Allows you to preserve custom properties & var() usage in output. Allowed values:

• false: Removes --var declarations and replaces var() with their resolved/computed values.
• true: Keeps var() declarations in the output and has the computed value as a fallback declaration. Also keeps computed --var declarations
• 'computed': Keeps computed --var declarations in the output. Handy to make them available to your JavaScript.

Define variables in JavaScript.

Can be a simple key-value pair or an object with a value property and an optional isImportant bool property

var postcss = require('postcss');
var cssvariables = require('postcss-css-variables');

postcss([
	cssvariables({
		variables: {
			'--some-var': 100pxpx,
			'--other-var': {
				value: #00ff00
			},
			'--important-var': {
				value: #ff0000,
				isImportant: true
			}
		}
	})
])
.process(css, opts);

• This plugin was spawned out of a discussion on the cssnext repo
• We provide a larger CSS variable feature subset than postcss-custom-properties.
• Solves these issues:
  • var declared in media query should pull in properties that use/reference that var on cssnext/cssnext
  • Investigate support for media-query scoped properties on postcss/postcss-custom-properties
  • remove :root limitation by injecting rules with new declarations that just contains modified properties. on postcss/postcss-custom-properties

We have a suite of Mocha tests. If you see something that doesnt' have coverage, make an issue or pull request.

Run once:

npm install

Run whenever you want to test:

npm run test