postcss-apply
PostCSS plugin enabling custom properties sets references
Aka @apply rule
.
Spec (editor's draft): https://tabatkins.github.io/specs/css-apply-rule
Browser support: https://www.chromestatus.com/feature/5753701012602880
Refers to postcss-custom-properties
for DOMless limitations, although being future proof and spec compliant is the plugin primary goal.
Installation
npm install postcss-apply --save-dev
Usage
var fs = require('fs');
var postcss = require('postcss');
var apply = require('postcss-apply');
var input = fs.readFileSync('input.css', 'utf8');
postcss()
.use(apply)
.process(input)
.then(function (result) {
fs.writeFileSync('output.css', result.css);
});
Examples
input:
:root {
--toolbar-theme: {
background-color: rebeccapurple;
color: white;
border: 1px solid green;
};
--toolbar-title-theme: {
color: green;
};
}
.Toolbar {
@apply --toolbar-theme;
}
.Toolbar-title {
@apply --toolbar-title-theme;
}
output:
.Toolbar {
background-color: rebeccapurple;
color: white;
border: 1px solid green;
}
.Toolbar-title {
color: green;
}
options
preserve
type: Boolean
default: false
Allow for keeping resolved declarations and @apply
rules alongside.
Credits
Licence
postcss-apply is unlicensed.