如何让Stylelint自动修复Styled-components中CSS-in-JS的样式顺序？

1. 补全必要依赖 #

先确认所有适配CSS-in-JS和排序功能的依赖都已安装：

• 用于解析styled-components语法的@stylelint/postcss-css-in-js（Stylelint 14+推荐替代旧版processor）
• 排序核心插件stylelint-order及预设stylelint-config-rational-order
• 适配styled-components的基础配置stylelint-config-styled-components

执行安装命令：

npm install --save-dev @stylelint/postcss-css-in-js stylelint-order stylelint-config-rational-order stylelint-config-styled-components

2. 修正.stylelintrc.json配置 #

核心是让Stylelint正确识别TSX中的CSS-in-JS语法，并启用排序规则。示例配置如下：

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-styled-components",
    "stylelint-config-rational-order",
    "stylelint-config-prettier" // 放在最后，避免和Prettier规则冲突
  ],
  "rules": {
    "order/grouped-properties": true, // 强制分组后换行
    // 可自定义分组规则，覆盖rational-order的默认配置
    "order/properties-order": [
      {
        "groupName": "布局定位",
        "properties": ["position", "top", "right", "bottom", "left", "z-index", "display", "flex", "flex-direction"]
      },
      {
        "groupName": "盒模型",
        "properties": ["width", "height", "margin", "padding", "border", "border-radius"]
      },
      {
        "groupName": "视觉样式",
        "properties": ["background", "color", "font-size", "font-weight", "text-align"]
      }
    ]
  },
  "overrides": [
    {
      "files": ["**/*.tsx"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ]
}

3. 规避Prettier冲突 #

Prettier的格式化规则可能会覆盖Stylelint的排序结果，需确保：

• 安装stylelint-config-prettier禁用Stylelint中与Prettier冲突的规则（已包含在上述配置的extends中）
• 不要让Prettier单独处理styled-components的样式部分，可在.prettierrc中添加配置：

{
  "overrides": [
    {
      "files": ["**/*.tsx"],
      "options": {
        "parser": "typescript"
      }
    }
  ]
}

4. 执行修复的正确命令 #

如果配置中已通过overrides指定了customSyntax，直接执行：

stylelint "src/**/*.tsx" --fix

若配置未生效，可显式指定语法解析器：

stylelint "src/**/*.tsx" --fix --custom-syntax @stylelint/postcss-css-in-js

5. 排查单个文件的规则生效情况 #

若部分文件未修复，可针对单个文件执行命令查看详细日志：

stylelint "src/components/TargetComponent.tsx" --fix --verbose

根据日志判断是否存在语法解析错误、规则被忽略或配置未正确应用的问题。

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