styled-componentsでStylelintを使う方法2022

Google検索するとstylelint-config-styled-componentsとstylelint-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-caseとfunction-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
         }
       }
     ]
   }