styled-componentsでStylelintを使う方法2022


Google検索するとstylelint-config-styled-componentsstylelint-processor-styled-componentsを使うやり方が出てきましたが、それではうまく動きませんでした。
試行錯誤の結果@stylelint/postcss-css-in-jsを使うとうまくいくことがわかったので、記録を残しておきます。

  1. stylelintとconfigに加えて、postcss-syntax@stylelint/postcss-css-in-jsをインストール
    yarn add -D stylelint stylelint-config-standard postcss-syntax @stylelint/postcss-css-in-js
    
  2. stylelint.config.jsを作成し、JavaScript/TypeScriptファイルにはcustomSyntax: '@stylelint/postcss-css-in-js'が適用されるよう設定
    stylelint.config.js
    module.exports = {
      extends: 'stylelint-config-standard',
      overrides: [
        {
          files: ['**/*.{js,jsx,ts,tsx}'],
          customSyntax: '@stylelint/postcss-css-in-js'
        }
      ]
    }
    
  3. 以下のコマンドでlintを実行
    stylelint ./src/**/*.{css,js,jsx,ts,tsx}
    
  4. (任意)CSS in JSでは誤検知が多いfunction-name-casefunction-no-unknownを無効化
    stylelint.config.js
    module.exports = {
      extends: 'stylelint-config-standard',
      overrides: [
        {
          files: ['**/*.{js,jsx,ts,tsx}'],
          customSyntax: '@stylelint/postcss-css-in-js',
          rules: {
            'function-name-case': null,
            'function-no-unknown': null
          }
        }
      ]
    }