概要
EmotionなどのCSS-in-JSにもStylelintを適用したい。
少し苦戦したのですが、うまくいった方法をメモしておきます。
どなたかの参考になれば幸いです！
※ここでは stylelint14系での対処法を紹介します。
環境
- stylelint: v14.3.0
- emotion: v11.6.0（@emotion/styledを使用）
そのままだとどうなる
そのままstylelintをかけると、うまくいきません。
エラー内容
When linting something other than CSS, you should install an appropriate syntax, e.g. "@stylelint/postcss-css-in-js", and use the "customSyntax" option
解決策
必要なモジュールをインストール
you should install an appropriate syntax, e.g. "@stylelint/postcss-css-in-js",
エラー文に言われている @stylelint/postcss-css-in-js と、それとは別でpostcss-syntax をプロジェクトにインストールします。
$ yarn add -D @stylelint/postcss-css-in-js postcss-syntax
参照：@stylelint/postcss-css-in-js
customSyntaxオプションの設定
and use the "customSyntax" option
そして、これも上記のエラー文が教えてくれていますが、stylelintの設定ファイルに下記のようにcustomSyntaxオプションを設定します。
.stylelintrc.js
module.exports = {
// ...略
overrides: [
{
files: ["**/*.{jsx,tsx}"],
customSyntax: "@stylelint/postcss-css-in-js",
},
],
};
参考にさせていただいた記事
検証にあたり、下記の記事から解決につながりました。ありがとうございます！
（環境によって対応策が若干変わる様子です）