Stylelint中property-(dis)allowed-list规则对自定义属性的处理问题解析

背景介绍

在CSS开发中，Stylelint作为一款强大的样式检查工具，其property-allowed-list和property-disallowed-list规则常被用于限制或允许特定的CSS属性使用。然而，这两个规则在处理CSS自定义属性(--custom-property)时存在一些值得探讨的行为差异。

问题发现

开发者在使用property-disallowed-list规则时发现，该规则默认忽略了CSS自定义属性的检查。这与开发者期望的行为不符，特别是当需要禁止某些特定自定义属性时。深入代码后发现，相关规则中有明确的逻辑排除了对自定义属性的处理。

技术分析

现有规则行为

1. property-allowed-list规则明确文档说明会忽略Sass变量、Less变量和自定义属性
2. property-disallowed-list规则文档中未提及对自定义属性的处理方式
3. 实际代码实现中，两个规则都排除了对自定义属性的检查

历史原因

这一设计可以追溯到Stylelint 3.x版本之前的时期，当时开发者认为自定义属性应该被特殊对待。这种设计决策延续至今，导致当前的行为不一致。

相关规则对比

其他以property结尾的Stylelint规则(如declaration-property-value-disallowed-list、declaration-property-unit-disallowed-list等)都能正常处理自定义属性，这使得property-(dis)allowed-list的行为显得尤为特殊。

解决方案讨论

社区提出了几种可能的改进方向：

1. 保持现状，建议开发者使用custom-property-pattern规则通过正则表达式管理自定义属性
2. 修改现有规则，使其能够处理自定义属性，与其他property规则保持一致
3. 新增专门的custom-property-disallowed-list规则

经过讨论，社区倾向于第二种方案，即修改现有规则使其能够处理自定义属性，这能带来更好的API一致性和用户体验。

技术影响

这一变更将带来以下影响：

1. 向后兼容性问题：现有配置可能需要调整
2. 文档需要更新，明确说明规则对自定义属性的处理方式
3. 为需要精细控制自定义属性的场景提供更直接的解决方案

最佳实践建议

在等待官方修复期间，开发者可以：

1. 对于简单的自定义属性命名规范，使用custom-property-pattern规则
2. 对于复杂的自定义属性控制需求，考虑编写自定义Stylelint规则
3. 关注Stylelint版本更新，及时获取对自定义属性的原生支持

总结

Stylelint中property规则对自定义属性的处理存在历史遗留的不一致问题，社区已达成共识将进行改进。这一变更将使Stylelint在CSS自定义属性管理方面更加完善和一致，为开发者提供更好的使用体验。