Clarification about some options

[JoshuaWise]

I can't find any details about what are the specific operations done in "advanced" mode.
Can this be explained in details? I want to know if it's safe to do this with my CSS.

Also, what is "restructuring" and "aggressiveMerging"?

Can I see examples about what these operations actually do?

[jakubpawlowicz]

There's no manual for it but as they say, "use the force, read the source" :-) So here we go:

All advanced operations are dispatched here: https://github.com/jakubpawlowicz/clean-css/blob/master/lib/selectors/advanced.js#L59

• recursivelyOptimizeBlocks calls all following operations on a block (think @media or @keyframe rules)
• recursivelyOptimizeProperties optimizes properties in selector rules and "flat blocks" (like @font-face) by splitting them into components (e.g. margin into margin-(*)), optimizing, and rebuilding them back. You may want to use shorthandCompacting option to control whether you want to turn multiple (long-hand) properties into a shorthand property.
• removeDuplicates gets rid of duplicate selector rules with exactly the same properties (think of including the same Sass / Less partial twice for no good reason)
• mergeAdjacent does what the name implies for same adjacent selectors
• reduceNonAdjacent figures out which properties are overridden for same non-adjacent selector rules
• mergeNonAdjacentBySelector figures out if non-adjacent selector rules can be moved (!) to be merged, requires all intermediate rules to not redefine the moved properties, or if redefined to be either more coarse grained (e.g. margin vs margin-top) or have the same value
• mergeNonAdjacentByBody does what the one above but by searching for two rules with same properties rather than with same name
• restructure tries to reorganize rules with different names and properties so they take less space, e.g. .one{padding:0}.two{margin:0}.one{margin-bottom:3px} into .two{margin:0}.one{padding:0;margin-bottom:3px}
• removeDuplicateMediaQueries this one is easy :-)

aggressiveMerging cares about property order when merging, e.g. if it's turned on then a{display:block;color:red;display:inline-block} will be turned into a{color:red;display:inline-block} - if two display properties were next to each other it would keep them as is.

If your content is not-so-well structured and / or uses some edge CSS stuff I'd turn aggressiveMerging, restructuring, and shorthandCompacting off as these may break things.

You can find more tests here: https://github.com/jakubpawlowicz/clean-css/tree/master/test/selectors

Hope this helps.

[jakubpawlowicz]

I reworded my post and added it to readme: https://github.com/jakubpawlowicz/clean-css#what-advanced-optimizations-are-applied

[JoshuaWise]

@jakubpawlowicz This is great, thanks!

[JoshuaWise]

Are all of these advanced optimizations 100% safe?
Are they safe if you have external CSS that's not compiled by CleanCSS?
If not, are any of them specifically more or less safe than the others? I'd be interested in learning about any nuances here.

[jakubpawlowicz]

Sorry for a bit of a lag with the reply.

I would call all but restructuring and shorthand compacting safe. Those two should be as well but there could be some edge cases, and question of safety also depends on the context, as if you target some old browsers or email clients you can expect those to break compatibility.

I am currently thinking about standardizing those "safety levels" in the next version of clean-css.