npm install @csstools/postcss-scope-pseudo-class --save-dev
PostCSS Scope Pseudo Class lets you use the :scope
Pseudo-class following the Selectors 4 specification.
:scope {
color: green;
}
/* becomes */
:root {
color: green;
}
Add PostCSS Scope Pseudo Class to your project:
npm install postcss @csstools/postcss-scope-pseudo-class --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssScopePseudoClass = require('@csstools/postcss-scope-pseudo-class');
postcss([
postcssScopePseudoClass(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
The preserve
option determines whether the original notation
is preserved. By default, it is not preserved.
postcssScopePseudoClass({ preserve: true })
:scope {
color: green;
}
/* becomes */
:root {
color: green;
}
:scope {
color: green;
}