使用stylelint校验styled-components的css标签报Unknown word CssSyntaxError如何解决

stylelint-processor-styled-components 不支持解析插值内嵌套的 css 模板标签语法，你在 animation 属性的插值内部又套了一层 css 标签，处理器识别失败就抛出了 Unknown word 的 CssSyntaxError 报错，和你本身的业务代码逻辑无关。

方法一：移除多余的 css 嵌套（推荐） #

你当前的用法里 css 标签完全没有必要，直接把动画参数拼接为字符串即可，修改后的代码功能不变，且能通过stylelint校验：

const DeterminateLinearProgressDiv = styled(ProgressDiv)`
  animation: ${props => `${DeterminateFill(props)} 1s ease-in forwards`};
`

方法二：修改stylelint配置适配现有写法 #

如果必须保留原有嵌套 css 的写法，可以调整配置关闭对应校验规则：

module.exports = {
  processors: ['stylelint-processor-styled-components'],
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-styled-components',
  ],
  rules: {
    // 忽略插值内部的语法校验，避免误报
    'value-keyword-case': null,
    'no-invalid-double-slash-comments': null,
  }
}

同时要确认你的源码文件后缀为 .jsx 或 .tsx，否则处理器可能无法正确识别styled-components语法。

方法三：升级依赖到维护版本 #

你当前使用的stylelint v13以及配套的styled-components processor已经停止维护，升级到新的解析工具也能解决问题：

1. 卸载旧依赖：
   npm uninstall stylelint stylelint-config-recommended stylelint-config-styled-components stylelint-processor-styled-components
2. 安装新依赖：
   npm install stylelint @stylelint/postcss-css-in-js stylelint-config-recommended --save-dev
3. 更新stylelint配置：

module.exports = {
  customSyntax: '@stylelint/postcss-css-in-js',
  extends: [
    'stylelint-config-recommended'
  ]
}

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