PostCSS Custom Selectors lets you define @custom-selector in CSS following the Custom Selectors Specification.
@custom-selector :--heading h1, h2, h3;
article :--heading + p {
margin-top: 0;
}
/* becomes */
article :is(h1, h2, h3) + p {
margin-top: 0;
}Add PostCSS Custom Selectors to your project:
npm install postcss postcss-custom-selectors --save-devUse it as a PostCSS plugin:
const postcss = require('postcss');
const postcssCustomSelectors = require('postcss-custom-selectors');
postcss([
postcssCustomSelectors(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);PostCSS Custom Selectors runs in all Node environments, with special instructions for:
The preserve option determines whether the original notation
is preserved. By default, it is not preserved.
postcssCustomSelectors({ preserve: true })@custom-selector :--heading h1, h2, h3;
article :--heading + p {
margin-top: 0;
}
/* becomes */
@custom-selector :--heading h1, h2, h3;
article :is(h1, h2, h3) + p {
margin-top: 0;
}
article :--heading + p {
margin-top: 0;
}