ESLint で CSS とベースラインのサポートがリリースされました

Jeremy Wagner

公開日: 2025 年 3 月 12 日

長い間、JavaScript の優先的なリンタとして使用されてきた ESLint は、デベロッパーがプロジェクトで JavaScript の適切なスタイルを適用するのに役立つさまざまな設定とルールを提供します。最近、ESLint でプロジェクトの CSS リンティングのサポートがリリースされ、スタイルシートのさまざまな要素をチェックするための追加のルールが提供されました。

CSS サポートのリリースの一環として、ESLint に require-baseline ルールが追加されました。このルールを使用すると、プロジェクトで CSS を lint する際に使用するベースラインのしきい値を指定できます。このクイック投稿では、このルールを使用して CSS がベースラインの「新規」と「広範囲」のしきい値を満たしていることを確認する方法を説明します。

ESLint を使用してベースライン CSS 機能を適用する方法

ESLint を以前に使用したことがあれば、プロジェクトに CSS リンティングを追加するプロセスは比較的簡単です。まず、プロジェクトの @eslint/css パッケージをインストールします。

npm install @eslint/css --save-dev

インストールが完了したら、既存の ESLint 構成に @eslint/css パッケージをインポートして、プロジェクトに CSS リンティングのサポートを追加できます。

// eslint.config.js
import css from "@eslint/css";

export default [
  // Lint css files
  {
    files: ["src/css/**/*.css"],
    plugins: {
      css,
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to ensure they are using
      // only Baseline Widely available features:
      "css/require-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
];

CSS の lint は、それ自体が有用ですが、ESLint が提供する付加価値は、lint の require-baseline ルールによるものです。上記のコード スニペットでは、ベースラインで広く利用されていない機能が検出されると、警告が生成されます。これは、ルールの available プロパティで指定します。このプロパティには "newly" の値も指定できます。これにより、使用されるすべての CSS 機能が少なくともベースラインの新規利用可能レベル以上であることを確認できます。

設定が完了したら、プロジェクトのルートで ESLint を実行して、プロジェクトの CSS を lint できます。

npx eslint

完了すると、ESLint からプロジェクトの CSS に関する警告が次のように表示されます。

/var/www/my-cool-web-project/src/css/styles.css
  269:3   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline
  427:3   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline
  444:12  warning  Value 'contents' of property 'display' is not a widely available baseline feature  css/require-baseline
  500:3   warning  Property 'resize' is not a widely available baseline feature                       css/require-baseline
  573:5   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline

ESLint がこの機能をリリースしたことで得られる大きなメリットの一つは、ESLint を使用するすべてのツール ワークフローでこの機能を使用できることです。たとえば、webpack を使用している場合は、eslint-webpack-plugin を使用して、プロジェクトのビルド中に lint の出力を出力するようにできます。

// Import the ESLint plugin:
import ESLintPlugin from "eslint-webpack-plugin";

// Webpack config:
export default {
  // Prior config code omitted...
  plugins: [
    new ESLintPlugin({
      // Add the `"css"` extension to ensure
      // CSS files are linted as well:
      extensions: ["js", "css"]
    })
  ]
};

ESLint に追加されたこれらの便利な新機能により、プロジェクトで Baseline CSS 機能を使用していることを、それほど手間をかけずに確認できるようになりました。ぜひお試しください。プロジェクトで使用されているベースライン機能の一部に驚くかもしれません。仕組みについて詳しくは、require-baseline ルールのドキュメントをご覧ください。