✅

stylelintでOS/ブラウザの旧バージョンでのUI崩れを防ぐ

2023/12/14に公開

CSS

指定したOS/ブラウザバージョンでサポートされてないCSSプロパティを検知することがstylelintでできます。
世に出るプロダクトでは多少古いバージョンでもUI崩れは極力発生させたくないものだと思いますので、需要のあるlintと思います。
簡単に設定できるのですが、作業中複数サイトを見ることになったため、ここでまとめておきます。

導入の背景

最近作成したLPでmedia queryの指定に比較演算子を活用する記法にしたことで、記法をサポートしていないバージョンでUI崩れが起きる問題が発生しました。
その再発防止として、サポート対象のOS/ブラウザで機能しないCSSを洗い出すlintはないのかという話になり、stylelint-no-unsupported-browser-featuresというプラグインを見つけ、導入に至りました。

参考：media queryの範囲指定

stylelint-no-unsupported-browser-featuresの導入

stylelint自体の導入は他にも詳しい記事がたくさんあるので、ここでは省略します。
https://ics.media/entry/230525/

packageのインストール

公式のREADMEだとDオプションが付いてないですが、開発時以外は不要なのでDを付与しています。

npm install -D stylelint-no-unsupported-browser-features

stylelintrcへの追加

pluginsとrulesにno-unsupported-browser-featuresを追加します。

.stylelintrc.json

  "plugins": ["stylelint-no-unsupported-browser-features"],
  "rules": {
    "color-hex-length": "long",
    ・・・略・・・・
    "plugin/no-unsupported-browser-features": [
      true,
      {
        "ignore": ["css-nesting"],
        "ignorePartialSupport": true,
        "severity": "warning"
      }
    ]
  }

各オプションに関してですが、

ignore
- ここに追加したプロパティは警告されません。今回導入したプロダクトではscssで開発しているため、css-nestingはignoreしています。
ignorePartialSupport
- 部分的な違反は無視するというもので詳細はよく分からなかったのですが、こちらがfalseの場合に出る警告に問題はなかったため、trueで設定しています。
severity
- warningに設定していますが、プロダクトによってはエラーにしてhuskyと組み合わせて、エラー発生時はコミットできない状態にしても良いと思います。

browserlistの設定

チェック対象にするブラウザ・端末（のバージョン）を指定します。
指定の仕方はいくつかありますが、視認性・保守性から.browserslistrcを採用しています。
.browserslistrcをプロジェクト直下に配置し、以下のように指定します。

.browserslistrc

last 2 Chrome versions
last 2 Edge versions
last 2 Safari versions
ios >= 15

指定の仕方は以下が参考になります。

Tips（IDEでの検知）

stylelint全般の話ですが、記載しておきます。

VSCode

プラグインを入れます。

保存時に自動で修正してくれる設定を入れます。
（.vscodeディレクトリにsetting.jsonを作成する）

setting.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  },
  "stylelint.stylelintPath": "node_modules/stylelint",
  "stylelint.validate": ["scss"]
}

同じく.vscodeディレクトリにextensions.jsonも設定しておくと、新規開発者が自動でプラグイン導入されるので作っておきましょう。

extensions.json

{
  "recommendations": [
    "stylelint.vscode-stylelint"
  ]
}

IntelliJ

SettingsのLanguages & Frameworks > Style Sheets > Stylelintを選択
Enableにチェックを入れ、scssを使ってる場合は、Run for filesに追記する

{**/*,*}.{css,scss}

自動設定はfile-watchersを活用します。

まとめ

設定すると以下のように警告を出してくれます。

CSSはどんどん便利な記法が出てきていますが、安易に活用するとプロダクト品質を落とすことに繋がりかねません。
lintを活用することで不適切なCSSが混入しないことを実現できるため、導入することをお勧めします。