postcss-discard-duplicates 仅删除字面重复规则，无法识别语义等价声明；需用 css-tree 解析 AST 并归一化值、展开简写、标准化单位与格式；csso restructure 可合并同文件内无隔离的同义规则，但不跨文件、不处理 CSS-in-JS、不模拟运行时，且人工须核查覆盖逻辑、媒体查询嵌套及自定义属性依赖。
为什么 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 工具看不见。
