React: Stylelint v15系を使う

React: Stylelint v15系を使う

February 10, 2023

React で新しいプロジェクトを作成するときに、ESLint は真っ先に導入する一方で、CSS まわりのリンターは蔑ろにしてきました。

今回はじめて Stylelint を入れてみたので、その時のメモを残します。

今回導入したプロジェクトは React で MUI（の sx プロップスなど）を使用してスタイリングしており、以降に記載する設定はその環境を想定しています。

Stylelint のバージョンは、本記事作成時点で最新版の v15.0.0 を対象としています。

TL;DR #

Stylelint のインストールと設定 #

プロジェクトに次のパッケージをインストールする。

npm i -D \
  stylelint \
  stylelint-config-standard \
  postcss-jsx

プロジェクトのルートに .stylelintrc.json を作成して以下をコピペ。

{
  "extends": ["stylelint-config-standard"],
  "overrides": [
    {
      "files": ["**/*.{jsx,tsx}"],
      "customSyntax": "postcss-jsx",
      "rules": {
        "value-keyword-case": null
      }
    }
  ]
}

VSCode プラグインのインストールと設定（任意） #

プラグインをインストールする。

settings.json に以下をコピペ。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "javascriptreact", "typescriptreact"]
}

説明：バージョンの違いによる導入方法の違い #

はじめて Stylelint を導入しようとする人が手順を調べたとき、記事によって導入方法の説明が異なっており混乱するのではないでしょうか。

Stylelint はバージョンが上がるにつれて導入方法が少しずつ変わっています。公式のマイグレーションガイドを見れば、その変遷がなんとなくわかるはずです。

特に v13 から v14 のときの変更点が大きかったのですが、その内容や背景については次のブログ記事が詳しいです。

また記事によっては @stylelint/postcss-css-in-js を使うように説明されているものもありますが、そちらは stylelint が v15 になったときに合わせて非推奨になりました。

説明：.stylelintrc.json について #

最終系は冒頭に記載した通りですが、なぜあのような記述になるのか、こちらの Getting started の内容に沿って説明していきます。

CSS ファイルを解析する場合 #

Linting CSS - https://stylelint.io/user-guide/get-started#linting-css

例えば CSS ファイルを解析する場合は以下で OK です。

{
  "extends": "stylelint-config-standard"
}

stylelint-config-standard は ESLint における eslint:recommended のようなもので、公式が推奨するリントルールのデフォルト設定です。

なお stylelint-config-recommended というのも公式が用意していますが、こちらは standard と比較して緩いルールとなっているので、基本的にはより厳しい standard に従った方が良いと思います。

SCSS ファイルを解析する場合 #

Linting CSS-like languages and CSS within containers - https://stylelint.io/user-guide/get-started#linting-css-like-languages-and-css-within-containers

次に SCSS ファイルを解析したい場合です。SCSS を解析するには、

  1. SCSS の記述を CSS としてパースし
  2. その結果に対してルールを用いて解析する

必要があります。

と言っても設定ファイルは非常に単純で、以下で完結します。

{
  "extends": "stylelint-config-standard-scss"
}

その理由は stylelint-config-standard-scss がパースの機能とルールのセットを同梱しているからです。

こういった全部入りコンフィグは以下のページの「Configs」のところにまとめられています。

CSS in JS ファイルを解析する場合 #

Using a custom syntax directly - https://stylelint.io/user-guide/get-started#using-a-custom-syntax-directly

今回の記事でやりたいことがこちらに該当します。

残念ながら現時点ではさきほどの「Configs」には CSS in JS に対応するものはありません。この場合はその言語をどのようにパースするかを customSyntax で設定します。

{
  "extends": "stylelint-config-standard",
  "customSyntax": "postcss-jsx"
}

customSyntax のところに設定しているのがパーサです。本記事冒頭の例では postcss-jsx というパーサをインストールし、そちらを使用するように設定していました。

そして、パースした結果に対して stylelint-config-standard のルールをもって解析するという流れになります。

パーサは以下で見つけることができます。

CSS と CSS in JS のファイルを解析する場合 #

単に以下のようにしてしまうと、純粋な CSS のファイルに対するリントがかからなくなってしまいます。

{
  "extends": "stylelint-config-standard",
  "customSyntax": "postcss-jsx"
}

複数のファイルを解析したい場合は、以下のようにします。

{
  "extends": ["stylelint-config-standard"],
  "overrides": [
    {
      "files": ["**/*.{jsx,tsx}"],
      "customSyntax": "postcss-jsx"
    }
  ]
}

これは、全ファイルに対するベースのルールとして stylelint-config-standard を適用し、その上で拡張子が jsx/tsx のファイルについては postcss-jsx のパーサを適用するという意味です。

これにより、CSS は CSS としてルールがあたり、CSS in JS はパースした上でルールがあたるため、どちらも意図したように解析することができます。

説明：VSCode の設定について #

VSCode のプラグインを入れただけでは CSS ファイルではエラーがでるものの CSS in JS のファイルにはエラーが表示されません。

その理由はプラグインのデフォルトでは解析対象が CSS（と PostCSS）のファイルだけとなっているためです。

jsx/tsx のファイルも対象に含めるためには次のように settings.json を更新します。

{
  "stylelint.validate": ["css", "javascriptreact", "typescriptreact"]
}

言語を指定するキーワードは以下で見つけることができます。