[Stylelint] tsxファイルの解析でCssSyntaxErrorが発生する場合の対処方法

状況

stylelint ./components/**/*.tsx

stylelintを tsx ファイルに対して実行すると下記のようなエラーが発生した。

/components/TheHeader.tsx: When linting something other than CSS, you should install an appropriate syntax, e.g. "@stylelint/postcss-css-in-js", and use the "customSyntax" option

components/Heading.tsx
 1:10  ✖  Unknown word  CssSyntaxError

環境

• stylelint: 14.0.1

原因

v14 で変更があったようだった。

Stylelint no longer includes the syntaxes that:

• parse CSS-like languages like SCSS, Sass, Less and SugarSS
• extract styles from HTML, Markdown and CSS-in-JS object & template literals

CSS ファイル以外のものを解析したい場合は別途シンタックスモジュールが必要になったようだ。

参考:

• Migrating to 14.0.0 | Stylelint

解決方法

@stylelint/postcss-css-in-jsをインストールする。

npm install -D @stylelint/postcss-css-in-js

次にstylelint.config.jsに下記のようなオプションを追加する。

// stylelint.config.js
module.exports = {
  // ...略
  overrides: [
    {
      files: ["**/*.{jsx,tsx}"],
      customSyntax: "@stylelint/postcss-css-in-js",
    },
  ],
};

jsx や tsx ファイルの場合のシンタックスは@stylelint/postcss-css-in-jsにするといった具合。

tsx ファイルに対してstylelintがこれまで通り解析できるようになった。