CSSNano 中自定义 CSS 百分比属性初始值优化问题解析

在 CSS 预处理和优化工具 CSSNano 的最新版本中，开发者发现了一个关于自定义 CSS 属性（CSS Custom Properties）百分比值处理的优化问题。这个问题涉及到 CSS Houdini API 中的 @property 规则，特别是当定义百分比类型的自定义属性时，初始值中的百分号会被错误地移除。

问题现象

当开发者使用 @property 规则定义一个接受百分比值的自定义属性时，例如：

@property --ratio {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

经过 CSSNano 的默认或高级优化配置处理后，输出结果会变成：

@property --ratio{syntax:"<percentage>";inherits:false;initial-value:0}

可以看到，初始值 0% 被简化为 0，丢失了百分号。这种优化在技术上是错误的，因为根据 CSS 规范，当属性语法定义为 <percentage> 时，值必须包含百分号才能被视为有效的百分比值。

技术背景

CSS Houdini 的 @property 规则允许开发者显式地定义自定义 CSS 属性，包括指定其类型、继承行为和初始值。这种显式定义比传统的 CSS 变量（--*）提供了更强的类型保证和性能优化机会。

百分比值在 CSS 中是一个特殊的维度类型，与长度单位不同，它总是相对于另一个值计算的。例如在宽度、高度或字体大小等属性中，百分比是相对于父元素的对应值计算的。

问题影响

这个优化错误会导致几个潜在问题：

1. 语法无效：生成的 CSS 在语法上是不正确的，因为 0 不符合 <percentage> 的类型定义。

2. 浏览器兼容性问题：现代浏览器对 @property 规则有严格的类型检查，无效的初始值可能导致整个规则被忽略。

3. 样式计算错误：如果浏览器宽容地接受了这个值，它可能会被解释为 0 而不是预期的 0%，导致不同的渲染结果。

解决方案对比

CSSNano 提供了三种优化配置：

1. 默认配置：会产生上述错误
2. 高级配置：同样会产生错误
3. 精简配置：能正确处理并保留百分号

这表明问题出在某些特定的优化插件上，而不是核心的 CSS 解析逻辑。根据分析，可能是 postcss-convert-values 或 postcss-normalize-whitespace 这类处理值简化的插件导致了这个问题。

最佳实践建议

在使用 CSSNano 优化包含 @property 规则的 CSS 时，开发者可以：

1. 暂时使用精简配置（lite preset）避免此问题
2. 在构建配置中排除可能导致问题的插件
3. 等待官方修复后升级到新版本

对于自定义属性的定义，特别是使用 Houdini API 时，建议：

1. 始终为百分比值保留单位
2. 在构建后检查 @property 规则的输出
3. 考虑为关键的自定义属性添加 CSS 测试验证其有效性

总结

CSS 优化工具在追求最小化输出时，必须平衡文件大小和语法正确性。这个案例展示了类型感知在 CSS 预处理中的重要性，特别是随着 CSS Houdini 等高级功能的使用增加。开发者在使用优化工具时应当了解其局限性，并对关键 CSS 功能进行验证测试。