自定义Stylelint规则：允许--wp--前缀变量并强制短横线命名

直接使用Stylelint官方的custom-property-pattern规则即可实现需求，无需编写自定义插件。以下是具体配置方案：

配置步骤 #

确保你的Stylelint配置文件（.stylelintrc或stylelint.config.js）中启用custom-property-pattern规则，并设置符合要求的正则表达式：

配置示例（JSON格式） #

{
  "rules": {
    "custom-property-pattern": [
      "^--wp--[a-z0-9]+(-[a-z0-9]+)*$|^--[a-z0-9]+(-[a-z0-9]+)*$",
      {
        "message": "自定义变量必须使用kebab-case命名，仅允许以--wp--开头的变量例外"
      }
    ]
  }
}

配置示例（JS格式） #

module.exports = {
  rules: {
    'custom-property-pattern': [
      /^--wp--[a-z0-9]+(-[a-z0-9]+)*$|^--[a-z0-9]+(-[a-z0-9]+)*$/,
      {
        message: '自定义变量必须使用kebab-case命名，仅允许以--wp--开头的变量例外'
      }
    ]
  }
}

正则说明 #

这个正则会匹配两种合法的变量格式：

• 普通kebab-case变量：比如--primary-color，要求变量名（去掉开头的--）由小写字母、数字和单短横线组成，无连续短横线，符合标准kebab-case规范
• 例外允许的--wp--开头变量：比如--wp--primary-color，在--wp--之后的部分同样遵循kebab-case规范

验证效果 #

配置完成后，以下情况会被拦截：

• --primaryColor：驼峰命名，不符合kebab-case
• --testing--primary-color：不是以--wp--开头的多段命名，不符合规则
• --primary--color：存在连续短横线，不符合kebab-case

而--primary-color和--wp--primary-color会被允许通过检查。

内容的提问来源于stack exchange，提问作者Ben Marshall