postcss-merge-rules

Merge CSS rules with PostCSS.

Install

With npm do:

npm install postcss-merge-rules --save

Examples

This module will attempt to merge adjacent CSS rules, rules with the same selector, or @media, @supports or @container blocks with the same condition that are separated only by unrelated rules:

By declarations

Input

a {
    color: blue;
    font-weight: bold
}

p {
    color: blue;
    font-weight: bold
}

Output

a,p {
    color: blue;
    font-weight: bold
}

By selectors

Input

a {
    color: blue
}

a {
    font-weight: bold
}

Output

a {
    color: blue;
    font-weight: bold
}

Unrelated rules between the two merged rules are left in place. A rule that sets a property a later rule also sets stops the merge, because the cascade order would change.

Input

a {
    color: blue
}

p {
    margin: 0
}

a {
    font-weight: bold
}

Output

a {
    color: blue;
    font-weight: bold
}

p {
    margin: 0
}

By partial declarations

Input

a {
    font-weight: bold
}

p {
    color: blue;
    font-weight: bold
}

Output

a,p {
    font-weight: bold
}

p {
    color: blue
}

Usage

See the PostCSS documentation for examples for your environment.

Contributors

See CONTRIBUTORS.md.

License

MIT © Ben Briggs