postcss-apply
PostCSS plugin enabling custom property 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.
/!\ Heads up
The @apply
rule and custom property sets most likely won't get any real support from browser vendors and the spec is yet considered deprecated.
See:
Installation
npm install postcss-apply --save-dev
Usage
const fs = require('fs');
const postcss = require('postcss');
const apply = require('postcss-apply');
const input = fs.readFileSync('input.css', 'utf8');
postcss()
.use(apply)
.process(input)
.then((result) => {
fs.writeFileSync('output.css', result.css);
});
Examples
In CSS declared sets
:root {
--toolbar-theme: {
background-color: rebeccapurple;
color: white;
border: 1px solid green;
};
}
.Toolbar {
@apply --toolbar-theme;
}
.Toolbar {
background-color: rebeccapurple;
color: white;
border: 1px solid green;
}
In JS declared sets
const themes = {
'toolbar-theme': {
backgroundColor: 'rebeccapurple',
color: 'white',
border: '1px solid green',
},
};
[...]
postcss().use(apply({ sets: themes }))
[...]
.Toolbar {
@apply --toolbar-theme;
}
.Toolbar {
background-color: rebeccapurple;
color: white;
border: 1px solid green;
}
options
preserve
type: Boolean
default: false
Allows for keeping resolved declarations and @apply
rules alongside.
sets
type: Object
default: {}
Allows you to pass an object of custom property sets for :root
.
These definitions will be prepended, in such overriden by the one declared in CSS if they share the same name.
The keys are automatically prefixed with the CSS --
to make it easier to share sets in your codebase.
Credits
Licence
postcss-apply is unlicensed.