基于 PostCSS AST 的 CSS 格式化与属性重排：重复声明、Fallback 与 Vendor Prefix 避坑

一、问题概述：AST 重排时的声明顺序破坏

PostCSS 将 CSS 源码解析为 Root、Rule、Declaration 等节点。如果在重排属性时单纯将 Declaration 数组按属性名字母或简单字典序排列，会打乱特定浏览器的降级声明与前缀覆盖顺序。

二、最小复现：Fallback 与 Prefix 顺序被重排错乱

下面的 CSS 利用同名属性在不同浏览器中的支持差异实现 Fallback。若属性重排去除了重复声明或颠倒了出现顺序，旧版本浏览器的降级机制将失灵。

/* 源码：display: block 作为不兼容 flex 浏览器的 Fallback 声明 */
.box {
  display: block;
  display: flex;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 错误重排产物：同名 display 声明被覆盖去重，导致 Fallback 丢失 */
.box {
  display: flex;
  transform: scale(1);
}

三、根因分析：后声明覆盖原则 (Declaration Cascade Inside Rule)

在同一个 CSS Rule 内部，当出现同名 Declaration（如多个 display 或 color）或带有 Vendor Prefix 的属性（如 -webkit-transform 与 transform）时，浏览器解析器按顺序处理，跳过无法识别的属性并保留最后一个有效声明。改变顺序会使 Fallback 与前缀优化失效。

四、推荐方案：基于 AST 的同名与前缀保护排序

1. 严格禁止对同名 Declaration 进行去重或乱序，同名属性必须保持原有出现顺序。2. Vendor Prefix（如 -webkit-）必须排在无前缀标准属性之前，确保标准属性优先级最高。3. CSS 自定义属性 (--*) 置顶或保持原序，避免干扰后面的回退逻辑。

五、完整代码：基于 AST 模型的安全 CSS 属性排序算法

下面的 TypeScript 函数模拟 PostCSS AST Declaration 节点的重排逻辑，在按属性组排序的同时保护同名 Fallback 与 Vendor Prefix 的相对顺序。

interface CSSDeclaration {
  prop: string;
  value: string;
}

const PROPERTY_GROUPS = [
  ["position", "top", "right", "bottom", "left", "z-index"],
  ["display", "flex", "grid", "width", "height", "margin", "padding"],
  ["color", "background", "font-size", "line-height"],
];

function getPropertyOrder(prop: string): number {
  const cleanProp = prop.replace(/^-(webkit|moz|ms|o)-/, "");
  for (let groupIndex = 0; groupIndex < PROPERTY_GROUPS.length; groupIndex++) {
    const itemIndex = PROPERTY_GROUPS[groupIndex].indexOf(cleanProp);
    if (itemIndex !== -1) {
      return groupIndex * 100 + itemIndex;
    }
  }
  return 9999;
}

function safeReorderDeclarations(decls: CSSDeclaration[]): CSSDeclaration[] {
  const indexed = decls.map((d, index) => ({ decl: d, originalIndex: index }));

  indexed.sort((a, b) => {
    const propA = a.decl.prop;
    const propB = b.decl.prop;

    // 1. 同名属性：严格保持原始相对位置 (Fallback 保护)
    if (propA === propB) {
      return a.originalIndex - b.originalIndex;
    }

    // 2. 前缀与标准同根属性：前缀优先排在前面 (如 -webkit-transform 排在 transform 前)
    const baseA = propA.replace(/^-(webkit|moz|ms|o)-/, "");
    const baseB = propB.replace(/^-(webkit|moz|ms|o)-/, "");
    if (baseA === baseB) {
      const isPrefixA = propA.startsWith("-");
      const isPrefixB = propB.startsWith("-");
      if (isPrefixA && !isPrefixB) return -1;
      if (!isPrefixA && isPrefixB) return 1;
      return a.originalIndex - b.originalIndex;
    }

    // 3. 不同属性：按预定义属性组顺序排列
    const orderA = getPropertyOrder(propA);
    const orderB = getPropertyOrder(propB);
    if (orderA !== orderB) {
      return orderA - orderB;
    }

    return a.originalIndex - b.originalIndex;
  });

  return indexed.map((item) => item.decl);
}

const sampleDecls: CSSDeclaration[] = [
  { prop: "display", value: "block" },
  { prop: "display", value: "flex" },
  { prop: "-webkit-transform", value: "scale(1)" },
  { prop: "transform", value: "scale(1)" },
  { prop: "color", value: "red" },
];

console.log(safeReorderDeclarations(sampleDecls));

六、常见错误方案

使用 JavaScript 对象 Object.fromEntries() 存储 Declaration 进行重排，导致重名 Fallback 属性被强行覆盖去重；忽视 Vendor Prefix 前缀依赖，将 transform 排在 -webkit-transform 之前。

七、边界条件：@keyframes 帧声明与 CSS Grid 命名空间

在 @keyframes 动画关键帧内部，某些声明顺序与属性插值强相关；CSS Grid 区域划分与命名线段也需要保持上下文连贯，不宜盲目跨上下文强行排序。

八、如何验证 PostCSS 属性重排安全性

在 Stylelint order/properties-order 中配置稳定排序逻辑；通过无头浏览器自动化比对重排前后 DOM 节点的真实 Computed Style 结果。

九、FAQ

问：PostCSS 属性重排对 Gzip 压缩有帮助吗？答：有微弱帮助，因为规范排序后重复出现的属性字符串模式增加，有利于 LZ77 算法寻找滑动窗口匹配。

问：为同名降级属性重排时最常见的 Bug 是什么？答：使用 Key-Value Map 操作 AST 属性，导致同名的 display 或 color 声明被覆盖丢弃。

问：为什么 PostCSS 格式化比正则替换更安全？答：PostCSS 构建了完整的语法树，能精准识别选择器、注释、媒体查询与 Declaration 节点，避免正则误伤。

十、总结

利用 PostCSS AST 重排 CSS 属性时，必须在排序算法中保留同名 Fallback 声明与 Vendor Prefix 的相对顺序，禁止将 AST 节点转换为覆盖式 Key-Value 字典。