postcss-custom-properties
PostCSS plugin to transform W3C CSS Custom Properties for cascading variables syntax to more compatible CSS.
N.B. The transformation is not complete. It currently just aims to provide a future-proof way of using a limited subset (to :root
selector) of the features provided by native CSS custom properties. Read #1 & #9 to know why this limitation exists.
Works great with postcss-calc.
Installation
$ npm install postcss-custom-properties
Usage
var fs = require("fs")
var postcss = require("postcss")
var customProperties = require("postcss-custom-properties")
var css = fs.readFileSync("input.css", "utf8")
var output = postcss()
.use(customProperties())
.process(css)
.css
Using this input.css
:
:root {
--color: red;
}
div {
color: var(--color);
}
you will get:
div {
color: red;
}
Checkout tests for more.
Options
preserve
(default: false
)
Allow you to preserve custom properties & var() usage in output.
var out = postcss()
.use(customProperties({preserve: true}))
.process(css)
.css
variables
(default: {}
)
Allow you to pass an object of variables for :root
. These definitions will override any that exist in the CSS.
Contributing
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
$ git clone https://github.com/postcss/postcss-custom-properties.git
$ git checkout -b patch-1
$ npm install
$ npm test