rework-vars
A Rework plugin to add support for the W3C-style CSS variables syntax.
N.B. This is not a polyfill. This plugin aims to provide a future-proof way of using a limited subset of the features provided by native CSS variables.
Installation
npm install rework-vars
Use
As a Rework plugin:
// dependencies
var fs = require('fs');
var rework = require('rework');
var vars = require('rework-vars');
// css to be processed
var css = fs.readFileSync('build/build.css', 'utf8').toString();
// process css using rework-vars
var out = rework(css).use(vars()).toString();
Optionally, you may pass an object of variables - map
- to the JavaScript
function.
var map = {
'app-bg-color': 'white'
}
var out = rework(css).use(vars(map)).toString();
Supported features
Variables can be declared as custom CSS properties on the :root
element,
prefixed with var-
:
:root {
var-my-color: red;
}
Variables are applied using the var()
function, taking the name of a variable
as the first argument:
:root {
var-my-color: red;
}
div {
color: var(my-color);
}
Fallback values are supported and are applied if a variable has not been declared:
:root {
var-my-color: red;
}
div {
color: var(my-other-color, green);
}
Fallbacks can be "complex". Anything after the first comma in the var()
function will act as the fallback value โ var(name, fallback)
. Nested
variables are also supported:
:root {
var-my-color: red;
}
div {
background: var(my-other-color, linear-gradient(var(my-color), rgba(255,0,0,0.5)));
}
What to expect
Variables can only be declared for, and scoped to the :root
element. All
other variable declarations are left untouched. Any known variables used as
values are replaced.
:root {
var-color-1: red;
var-color-2: green;
}
:root,
div {
var-color-2: purple;
color: var(color-2);
}
div {
var-color-3: blue;
}
span {
var-color-4: yellow;
}
yields:
:root,
div {
var-color-2: purple;
color: green;
}
div {
var-color-3: blue;
}
span {
var-color-4: yellow;
}
Variables are not dynamic; they are replaced with normal CSS values. The value
of a defined variable is determined by the last declaration of that variable
for :root
.
:root {
var-brand-color: green;
}
.brand {
color: var(brand-color);
}
:root {
var-brand-color: red;
}
yields:
.brand {
color: red;
}
Variables declared within @media
or @supports
are not currently supported
and will also be ignored.
@media (min-width: 320px) {
:root {
var-brand-color: red;
}
}
yields:
@media (min-width: 320px) {
:root {
var-brand-color: red;
}
}
License
MIT