Package Exports
- postcss-apply
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-apply) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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.
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
/* input */
:root {
--toolbar-theme: {
background-color: rebeccapurple;
color: white;
border: 1px solid green;
};
}
.Toolbar {
@apply --toolbar-theme;
}
/* output */
.Toolbar {
background-color: rebeccapurple;
color: white;
border: 1px solid green;
}
In JS declared sets
const themes = {
/* Set names won't be transformed, just `--` will be prepended. */
'toolbar-theme': {
/* Declaration properties can either be camel or kebab case. */
backgroundColor: 'rebeccapurple',
color: 'white',
border: '1px solid green',
},
};
[...]
postcss().use(apply({ sets: themes }))
[...]
/* input */
.Toolbar {
@apply --toolbar-theme;
}
/* output */
.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.