Stylelint中自定义属性命名规则的检测优化

在CSS开发中，自定义属性（CSS变量）已经成为现代前端开发的重要工具。然而，在Stylelint项目中，关于自定义属性命名规则的检测存在一个值得注意的问题。

问题背景

Stylelint作为一款强大的CSS代码检查工具，其custom-property-pattern规则用于确保自定义属性名称符合特定的命名模式（如kebab-case）。然而，该规则在处理@property规则时存在检测盲区。

具体问题表现

当开发者使用@property规则定义自定义属性时，Stylelint无法正确检测这些属性的命名是否符合规范。例如：

/* 不会被检测 */
@property --Foo {
  syntax: "string";
}

/* 会被检测 */
a {
  --Bar: a;
}

在上述代码中，--Foo和--Bar都使用了不符合kebab-case规范的命名方式（大写字母开头），但只有后者会被Stylelint标记为错误。

技术分析

这个问题源于Stylelint对@property规则的特殊处理不足。@property是CSS Houdini API的一部分，它允许开发者显式定义自定义属性的类型、初始值和继承行为。然而，Stylelint的规则检查器没有完全覆盖这种新型语法结构。

解决方案

要解决这个问题，需要修改Stylelint的规则实现，使其能够：

1. 识别@property规则中的自定义属性定义
2. 对这些属性名称应用与普通自定义属性相同的命名规则检查
3. 保持与现有规则一致的错误报告机制

实现意义

修复这个问题将带来以下好处：

1. 一致性：确保所有自定义属性定义方式都遵循相同的命名规范
2. 代码质量：帮助开发者避免在@property规则中使用不规范的自定义属性名称
3. 开发者体验：减少因规则不一致导致的困惑和错误

总结

这个改进将使Stylelint在CSS自定义属性检查方面更加全面和可靠，特别是在处理现代CSS特性时。对于使用Houdini API的项目来说，这将显著提高代码规范性和可维护性。