stylelint 自定义插件

背景：项目升级 styled-components v6 版本时，需要修改所有伪类/伪元素的 css 样式，因为没有找到对应的插件可以解决我的问题，手动一个一个找出来改又太麻烦（主要是容易有遗漏），因此自己写了一个插件来校验&定位伪类/伪元素的 css 样式。

安装依赖

1. yarn add stylelint -D
2. yarn add postcss-styled-syntax -D 因为我们使用的是 styled-components(CSS-in-JS) 写的 css 样式，因此需要安装 postcss-styled-syntax

根目录创建 .stylelintrc 文件

{
  "customSyntax": "postcss-styled-syntax",
  "plugins": ["./stylelint-plugins/selector-pseudo-prefix.js"],
  "rules": {
    "custom/selector-pseudo-prefix": true
  }
}

自定义 selector-pseudo-prefix 插件

创建 stylelint-plugins/selector-pseudo-prefix.js 文件

其实，正确的写法应该是 root.walkRules((rule) => { ... }, 拿到 rule.selector，然后根据选择器操作css，但是我发现这种方式无法完整拿到伪类/伪元素，所以采用了比较激进的方式，直接对所有 css 样式进行正则匹配，找出所有的伪类和伪元素，校验前面是否有 & 符号

当前这个插件不是非常的完善，提示的行数有时候可能会重复，不过针对此次升级，目的已经达到了，可以找出所有的伪类和伪元素进行修改，它已经完成了自己的光荣使命

const stylelint = require('stylelint')

const ruleName = 'custom/selector-pseudo-prefix'

const messages = stylelint.utils.ruleMessages(ruleName, {
  expected: 'Expected pseudo-element/pseudo-class to start with &',
})

module.exports = stylelint.createPlugin(ruleName, (enabled) => {
  if (!enabled) {
    return () => {}
  }

  return (root, result) => {
    root.walkRules((rule) => {
      // console.log(">>>root", root.toString());
      const cssCode = root.toString()
      // 匹配伪元素和伪类选择器
      const pseudoElementRegex = /[^a-z&():]:(:?-?[a-zA-Z-]+|[\w-]|\(+(?=)+)+/g
      const pseudoClassRegex = /[^&]::[a-zA-Z-]+/g
      const matches =
        cssCode.match(pseudoClassRegex) || cssCode.match(pseudoElementRegex)
      // console.log('>>>matches', matches)
      if (matches) {
        matches.forEach((match) => {
          // console.log('>>>>result', result.messages[0] )
          // console.log('>>>>rul------', rule.selector)
          if (!match.startsWith('&')) {
            stylelint.utils.report({
              message: messages.expected + '   ' + match,
              node: rule,
              result,
              ruleName,
            })
          }
        })
      }
    })
  }
})

module.exports.ruleName = ruleName
module.exports.messages = messages

项目中使用

1. 项目根目录使用 npx stylelint <file-name>

2. package.json文件配置 "lint:css": "stylelint './src/**/*.{tsx,ts,jsx}'"

   然后执行 yarn lint:css 校验全局文件