🦁

CSS の記述ミスを編集中に自動で検出するテクニック

2023/02/18に公開

CSS

VS Code

Stylelint

tech

stylelint を利用します。
特に、これから説明する 4 つのプラグインを利用すると、下記のような CSS のミスを賢く検出することができます。

プロパティの値の typo
変数（カスタムプロパティ）名の typo
ブラウザがサポートしていないスタイル
etc ...

（ ※ stylelint についての詳細な説明はここではしません。）
（ VSCode ユーザーの方は VSCode の拡張を使うと、編集中にミスを指摘してもらうことができて便利です。）

結論： .stylelintrc の設定

.stylelintrc

{
  "extends": [
    "stylelint-config-recommended"
  ],
  "plugins": [
    "stylelint-value-no-unknown-custom-properties",
    "stylelint-csstree-validator",
    "stylelint-declaration-block-no-ignored-properties",
    "stylelint-no-unsupported-browser-features"
  ],
  "rules": {
    "csstools/value-no-unknown-custom-properties": true,
    "plugin/declaration-block-no-ignored-properties": true,
    "plugin/no-unsupported-browser-features": [
      true,
      {
        "browsers": [ 
          // ここの値はプロダクトがカバーしたいブラウザの範囲によって変える
          "> 5%"
        ]
      }
  }
}

基本的なミスの指摘： `stylelint-config-recommended` を使う

まず stylelint-config-recommended を extend しておくと、基本的な記述ミスを指摘してくれます。
例えば下記のケースを怒ってくれます：

同じプロパティ名を重複して定義した場合
同じセレクタ名を重複した定義した場合

より細かい、厳格なルールが良い場合は、代わりに stylelint-config-standard を extend しましょう。これは stylelint-config-recommended を継承して、コーディングスタイルも含めたより厳格なルールを追加したものです。（筆者の観測範囲では stylelint-config-recommended よりこちらの方がよく使われている印象です。）

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

肝となる 4 つのプラグイン

stylelint-value-no-unknown-custom-properties

未定義のカスタムプロパティ（変数）を指摘 してくれます。
カスタムプロパティを typo してもブラウザは何も怒ってくれないので、とても重宝します。

body {
  --foo-color: #ffff00;
  background-color: var(--bar-color); /* 未定義の変数なので怒られる */
}

stylelint-csstree-validator

プロパティの値が間違っている場合に指摘 してくれます。
例えば display: none; を display: noen; とか typo したら怒ってくれます。

stylelint-declaration-block-no-ignored-properties

display プロパティの値によって無視されるプロパティを指摘 します。
例えば display: inline; を指定した要素に width を指定してもブラウザは黙って無視しますが、そういった無効な組み合わせを見つけて怒ってくれます。

stylelint-no-unsupported-browser-features

ブラウザが非対応のプロパティを指摘します。
例えば、オプションの値に

        browsers: [ 
          "> 5%"
        ]

と指定すると、5% のシェアを占めるブラウザでサポートしていないプロパティを指定した場合に怒ってくれます。
この配列の値はプロジェクトがカバーしたいブラウザの範囲によって変えてください。指定できる値は Browserslist のページを参照してください。
（ Babel など JS でも Browserslist を利用している場合は、ブラウザの範囲は .stylelintrc.json の内部で定義するのではなく .browserslistrc に共通化して定義すると良いでしょう。）

終わりに

以上です。他におすすめのプラグインなどがあればぜひコメントで教えて下さい。