Stylelint 新规则：禁止使用未知的 at-rule 描述符值

在 CSS 开发中，at-rules（如 @font-face、@media 等）是控制样式行为的重要语法结构。这些规则通常包含描述符（descriptors），用于定义具体的样式特征。然而，开发者有时会不小心为这些描述符指定无效的值，这可能导致样式无法按预期工作。

Stylelint 团队正在开发一个名为 at-rule-descriptor-value-no-unknown 的新规则，专门用于检测和禁止在 at-rule 描述符中使用未知或无效的值。这个规则的开发背景源于现有规则 declaration-property-value-no-unknown 的功能局限性，后者虽然能检测属性值的有效性，但并不适合处理 at-rule 描述符的特殊情况。

为什么需要专门的规则？

CSS 中的描述符和属性有时会共享相同的名称，但它们接受的语法可能完全不同。例如，font-weight 作为 @font-face 规则的描述符和作为普通 CSS 属性时，其有效值范围是不同的。现有的属性值检测规则无法准确区分这些情况，可能导致误报或漏报。

新规则的工作原理

at-rule-descriptor-value-no-unknown 规则将：

1. 识别 CSS 中所有 at-rule 的描述符
2. 根据 CSS 规范验证这些描述符的值是否有效
3. 对使用未知值的描述符发出警告

例如，它会标记以下无效代码：

@font-face {
  size-adjust: red; /* red 不是 size-adjust 描述符的有效值 */
}

规则特点

• 精确检测：专门针对 at-rule 描述符的值进行验证
• 规范一致性：基于最新的 CSS 规范判断值的有效性
• 未来兼容：设计时考虑了 Stylelint 未来的语言选项扩展

对开发者的意义

这个规则的引入将帮助开发者：

1. 更早发现 CSS 中的潜在错误
2. 提高代码的规范性和一致性
3. 减少因无效值导致的样式问题
4. 在团队协作中保持统一的编码标准

随着 CSS 规范的不断发展，at-rule 及其描述符的功能越来越丰富。这个新规则将作为 Stylelint 工具链中的重要补充，帮助开发者更好地驾驭现代 CSS 的强大功能。