postcss-merge-rules

Merging based on identical selectors

This feature combines rules with identical selectors into a single rule. In the code sample, two rules for the 'a' selector are merged into one.

const postcss = require('postcss');
const mergeRules = require('postcss-merge-rules');

const css = `a { color: blue; }
a { font-size: 14px; }`;

postcss([mergeRules()])
.process(css, { from: undefined })
.then(result => console.log(result.css));

Merging based on identical declarations

This feature merges rules that have identical declarations but different selectors, creating a grouped selector. The code sample demonstrates merging two rules that apply the same color declaration to different selectors.

const postcss = require('postcss');
const mergeRules = require('postcss-merge-rules');

const css = `a { color: blue; }
b { color: blue; }`;

postcss([mergeRules()])
.process(css, { from: undefined })
.then(result => console.log(result.css));