寻求支持合并相同选择器规则的CSS压缩库

问题 #

我在用Sass定制Bootstrap时，发现压缩编译后的输出里有两个body{}选择器。为了达到最优压缩效果，我测试了多款在线CSS压缩器，测试输入如下：

body{
    margin:0;
}

body {
    margin-top:60px;
}

多数工具（包括Sass）的输出是未合并的规则：

body{margin:0}body{margin-top:60px}

只有某款在线工具输出了合并后的精简样式：

body{margin:60px 0 0}

请问哪款库可以实现这种合并相同选择器规则的压缩功能？

可行的解决方案 #

以下几款工具/库支持这种合并相同选择器并合并重叠样式规则的压缩功能：

• cssnano：作为PostCSS生态的核心压缩工具，默认配置下就能处理这类样式合并（包括合并相同选择器、精简重叠的margin/padding等简写属性）。你可以在Sass编译后，通过PostCSS集成cssnano来实现更深度的压缩。
• clean-css：开启高级配置（比如mergeRules和mergeAdjacentRules选项）后，能够合并相同选择器并优化重叠的样式声明。
• csso：这款CSS优化器专门针对样式冗余做深度处理，会智能合并相同选择器，并对可简写的属性进行精简，完全能实现你需要的效果。

这些工具都可以集成到前端构建流程（比如Webpack、Vite、Gulp）中，替代单纯的Sass压缩，实现更优的CSS输出。

内容的提问来源于stack exchange，提问作者Eduardo Procópio Gomez