postcss-merge-rules2

Merge CSS rules with PostCSS ihherited from postcss-merge-rules which already deprecated. Only different is postcss-merge-rules2 will merge the css even if 2 css is not nearby. This action may bring some risk which mentioned in postcss-merge-rule issue discussion, but most of time is safed to use it and we still have requirement to use this feature becuase we know what we are doing.

Install

With npm do:

npm install postcss-merge-rules2 --save

Differenet betten postcss-merge-rule and postcss-merge-rule2

Input

1a {
2    color: blue;
3    font-weight: bold
4}
5b {
6    color: red
7}
8p {
9    color: blue;
10    font-weight: bold
11}

Output

postcss-merge-rules: output same as input

1postcss-merge-rules2: 
2a,p {
3    color: blue;
4    font-weight: bold
5}
6b {
7    color: red
8}

Below is postcss-merge-rule readme and still useful

Examples

This module will attempt to merge adjacent CSS rules:

By declarations

Input

1a {
2    color: blue;
3    font-weight: bold
4}
5
6p {
7    color: blue;
8    font-weight: bold
9}

Output

1a,p {
2    color: blue;
3    font-weight: bold
4}

By selectors

Input

1a {
2    color: blue
3}
4
5a {
6    font-weight: bold
7}

Output

1a {
2    color: blue;
3    font-weight: bold
4}

By partial declarations

Input

1a {
2    font-weight: bold
3}
4
5p {
6    color: blue;
7    font-weight: bold
8}

Output

1a,p {
2    font-weight: bold
3}
4
5p {
6    color: blue
7}

Usage

See the PostCSS documentation for examples for your environment.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs