CSS工具如何高效提取重复代码？

CSS重复代码的提取与归并远非简单的字符串去重，真正挑战在于识别语义等价而非字面重复——如`margin: 0`与四向零边距声明本质相同，但`postcss-discard-duplicates`对此完全失效；需借助`css-tree`解析AST，展开简写、标准化单位与值、归一化格式，才能安全比对；而`csso`的restructure模式虽能合并同文件内无隔离的同义规则，却受限于不跨文件、不支持CSS-in-JS、无法模拟运行时条件（如@media嵌套或@supports），更无法理解自定义属性依赖链和人为设计的渐进增强逻辑——这意味着自动化工具只能压缩体积，而决定“哪些重复该留、哪些能删”的终极判断，始终依赖开发者对上下文、优先级和设计意图的深度理解。

为什么 postcss-discard-duplicates 通常不适用

它只删完全相同的规则，对同义但写法不同的声明（比如 margin: 0 和 margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0）完全无感。真正要归并的是语义等价的 CSS，不是字面重复。

用 css-tree 解析 AST 做语义归一化

必须把 CSS 转成抽象语法树才能安全比较属性含义。直接字符串匹配或正则替换会破坏媒体查询嵌套、伪类顺序、自定义属性作用域等上下文。

• 先用 css-tree.parse() 将每个样式块转为 AST
• 对每个 Declaration 节点，用标准值映射表展开简写：把 margin: 1px 2px 拆成四个独立 margin-top/margin-right 等节点
• 对值做 normalize：统一单位（0px → 0）、颜色格式（#fff → white）、函数小写（URL() → url()）
• 忽略浏览器前缀差异（-webkit-transform 和 transform 视为不同，除非你明确启用前缀兼容模式）

csso 的 restructure 模式能做什么、不能做什么

它确实会合并同义规则，比如把分散在多个选择器里的 color: red 提取到共用规则中，但前提是这些规则在同一个文件、且没有被 @layer 或 !important 隔离。

• 开启方式：配置 { restructure: true }，别用默认的 false
• 它不会跨文件分析，所以需先用构建工具（如 esbuild 或 rollup）把所有 CSS 合并为单入口再处理
• 遇到 @supports (display: grid) 这类条件规则时，内部声明仍可能被误合并——因为 csso 不模拟运行时环境，只做静态结构等价判断
• 若项目用了 CSS-in-JS（如 styled-components），得先用 babel-plugin-styled-components 提取为真实 CSS 文件，否则 csso 看不到它们

手动归并前必须检查的三类冲突

自动工具能压缩体积，但无法替代人工判断语义优先级。以下情况强行归并会导致样式错乱：

• 同一选择器下，后声明覆盖前声明（.btn { color: red; color: blue; } → 归并后只剩 color: blue，但若原意是“蓝仅在 hover 时生效”，就出错了）
• 媒体查询层级嵌套：外层 @media (min-width: 768px) 里的 font-size: 16px 和内层 @media (prefers-reduced-motion) 里的同名声明，不能简单合并
• CSS 自定义属性依赖链：--text-color: red; → color: var(--text-color);，如果归并时删掉定义但留下使用，就会变成 color: var(--text-color) 未定义

真正难的不是找出重复，而是确认哪些“重复”其实是刻意的降级、渐进增强或主题切换分支。这类逻辑藏在注释、文件路径或构建配置里，AST 工具看不见。

到这里，我们也就讲完了《CSS工具如何高效提取重复代码？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！