postcss-property-rollup

Combines multiple blocks of custom properties

Installation

npm install postcss-property-rollup

Usage

On the command line:

postcss -u postcss-property-rollup -o dist/index.css src/index.css

or in the PostCSS configuration:

module.exports = {
	plugins: {
		"postcss-property-rollup": {},
	},
};

This plugin turns this:

.lorem {
	--spectrum-actionbutton-background-color: blue;
	--spectrum-actionbutton-border-color: transparent;
}

.ipsum {
	--spectrum-actionbutton-background-color: purple;
}

Into this:

.ipsum {
	--spectrum-actionbutton-border-color: transparent;
	--spectrum-actionbutton-background-color: purple;
}

The resulting selector comes from the last rule unless a newSelector option is provided, and all duplicate properties in the subsequent rules override the previous declarations.

Options

newSelector

Type: string Default: null

The selector to use for the combined rule. If not provided, the last selector in the list will be used.

ignore

Type: string[] Default: []

An array of selectors to ignore when combining rules.

keyword

Type: string Default: combine

The @ prefixed comment keyword to search for when determining what code to roll-up into the new selector.