PostCSS Private Rule

npm install @csstools/postcss-private-rule --save-dev

PostCSS Private Rule lets you declare private custom properties following the CSS Mixins Specification.

section {
	@private {
		--size: 2px;
	}

	&, & > h1 {
		border-width: var(--size);
	}
}

section > h1 {
	--size: 4px;
}

/* becomes */

section {
		--_csstools-p-1gice1e-0--size: 2px;

	&, & > h1 {
		border-width: var(--_csstools-p-1gice1e-0--size);
	}
}

section > h1 {
	--size: 4px;
}

Usage

Add PostCSS Private Rule to your project:

npm install postcss @csstools/postcss-private-rule --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssPrivateRule = require('@csstools/postcss-private-rule');

postcss([
	postcssPrivateRule(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);