Stylelint 14 での SCSS と CSS-in-JS の設定方法

2021.12.7

実践と知見

はじめに

こんにちは。胃もたれすることが増えてきたような気がしている kimizuy です。今回は Stylelint のバージョンを 13 から 14 に上げる機会があったので、そこで得た知見をもとに v14 の変更点や設定のサンプル（SCSS と CSS-in-JS）をご紹介します。

前提

VSCode で普段開発しているのですが Stylelint の拡張機能に以下の警告が出るようになっていました。

Stylelint version 13.12.0 is no longer supported. While it may continue to work for a while, you may encounter unexpected behavior. Please upgrade to version 14.0.0 or newer. See the migration guide for more information.

バージョン 13 はサポートされなくなり 14 に上げる必要があるということですね。

This release contains breaking changes. We know these can be disruptive, but they were needed to keep our dependencies up to date and Stylelint free of security issues.

Migrating to 14.0.0

今回の変更はセキュリティの問題が発端のようです。

バージョン 14 で変わったこと

syntax オプション（--syntax　フラグ）を廃止し、stylelint 自体に構文（プログラミング言語の書き方のルール）をバンドルしなくなりました。構文の設定は .stylelintrc ファイルを読み込みます。つまりバニラ CSS 以外の Sass や CSS-in-JS を解析するにはプラグインやカスタム構文を別途インストール必要があります。

まとめると以下の構文は含まれません。

SCSS、Sass、Less、SugarSS などの CSS スーパーセット
CSS-in-JS オブジェクトやテンプレートリテラルからスタイルを抽出すること

Stylelint 14 での設定サンプル

まずプロジェクトは以下の構成です。Next.js ペースのプロジェクトのため CSS Modules（sass）をメインで使っており、一部で emotion を使ったテンプレートリテラルのスタイリングをしています。

Next.js 12
CSS Modules(sass)
emotion

これらの構成を踏まえて 14 に上げたときのサンプルを以下に示します。

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-scss",
    "stylelint-config-styled-components",
    "stylelint-config-prettier"
  ],
  "overrides": [
    {
      "files": ["src/**/*.{js,ts,jsx,tsx}"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ],
  "rules": {
    "comment-empty-line-before": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["global"]
      }
    ],
    "color-function-notation": "legacy",
    "scss/at-import-partial-extension": "always",
    "function-url-quotes": "never",
    "number-max-precision": 10,
    "no-invalid-position-at-import-rule": null,
    "selector-class-pattern": null,
    "rule-empty-line-before": null,
    "scss/dollar-variable-pattern": null,
    "scss/double-slash-comment-empty-line-before": null,
    "scss/no-global-function-names": null,
    "scss/dollar-variable-empty-line-before": null
  }
}

SCSS ファイルの解析については以下のルールセットを追加するだけでした。

  "extends": [
    ...
    "stylelint-config-standard-scss",
    ...
  ],

JavaScript/TypeScript ファイルに埋めまれたテンプレートリテラルまたはオブジェクト記法のスタイルの解析は次の設定を追加することで可能になります。 @stylelint/postcss-css-in-js をインストールし、今回新たに追加された customSyntax に設定して使います。

  "overrides": [
    {
      "files": ["src/**/*.{js,ts,jsx,tsx}"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ],

他、デフォルトのルールだと大幅な修正が必要だったため、軽微な修正はしつつ null や legacy でお茶を濁しています（TODO: あとで直す）。

おわりに

今回バージョンアップしてみて、個人的な感想としては特に複雑な設定もしていないためか customSyntax を使う必要があるくらいだな、という印象でした。反対にこれまで Stylelint が内包していた構文をユーザーが明示的に取り入れることで設定時のわかりやすさが多少、増したような気がしています。

以上、お読みいただきありがとうございました。