PostCSS Custom Selectors

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;
}

Usage

Add PostCSS Custom Selectors to your project:

npm install postcss postcss-custom-selectors --save-dev

Use 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:

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

Options

preserve

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;
}

Current Tags

7.0.0 ... latest (3 years ago)

6 Versions

6.0.3 ... 3 years ago
7.0.0 ... 3 years ago
6.0.0 ... 5 years ago
4.0.1 ... 8 years ago
5.1.2 ... 7 years ago
3.0.0 ... 10 years ago