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.