feat(merge-rules): merge at-rules

[clshortfuse]

No description provided.

[clshortfuse]

@evilebottnawi I'm going to need some direction as to how to handle the integration tests failures.

[alexander-akait]

@clshortfuse we have command in package.json to update snapshots

[alexander-akait]

Can you describe above before/after for other developers

[coveralls]

Coverage decreased (-0.1%) to 99.004% when pulling b61cbcc on clshortfuse:feat/mergerules-mergeatrules into 863cf2b on cssnano:master.

[clshortfuse]

With the previous fix to sameParent, we can now check to see if adjacent rules' parents share the exact same name and parameters. If they do, then one set of rules can be merged into the previous parent's rules. A couple of the frameworks (numerous in bootstrap) used for integrations tests have redundant media query declarations. We can merge them safely if they are adjacent.

For example, given the follow set of rules:

@media (width:40px){ .red{color:red} }
@media (width:40px){ .green{color:green} }
@media (width:40px){ .blue{color:blue} }
@supports (--var:var){ .white{color:white} }
@supports (--var:var){ .black{color:black} }

The three identically matched @media rules will be all folded into the same parent (the first rule). The last @support rule will be folded into its previous rule.

The result would be:

@media (width:40px){.red{color:red}.green{color:green}.blue{color:blue}}
@media (width:40px){}
@media (width:40px){}
@supports (--var:var){@media (width:40px){.white{color:white}.black{color:black}}}
@supports (--var:var){@media (width:40px){}}

The empty nodes can then be removed by anther plugin, like postcss-discard-empty. Because some media queries can be rather long, this can reduce a bit off some frameworks (though this depends on how much redundancy was present). For example, bootstrap 3.4.0 is reduced from 120,549bytes to 120,007

[alexander-akait]

Thanks for clarify. need rebase

[clshortfuse]

@evilebottnawi rebased

[alexander-akait]

Good job!