ESLintを汎用のリンターにする計画に続き、ESLintチームが先日CSS言語の公式サポートを発表した。今回のサポートは、先日追加されたJSONやMarkdown向けリンティングへの追加実装である。
CSSの組み込みリンティングルールには、@importルールの重複、空のブロック、無効なアットルール、無効なプロパティ、 @layerの使用といった禁止事項のチェックが含まれている。CSSレイヤーは、標準仕様CSSへの新規追加実装（CSS Cascading and Inheritance Level 5を参照）であり、より細やかなカスケード制御を通じた適用スタイルの予測が可能になっている。また、別の適用範囲の異なるルールによる上書き防止にも効果的だ。Scout APM社が2020年に実施した調査では、開発者がCSSに関する問題のデバッグに平均週5時間以上を費やしており、その大部分をカスケードや詳細度のバグが占めると報告されている。
しかし、今回追加された必見のルールは、require-baselineルールで間違いないだろう。このルールにより、開発者側で禁止項目とするCSS機能の設定ができるほか、ブラウザ間での採用段階や成熟度を反映した設定が可能になっている。
W3C WebDX Community Groupによる取り組みBaselineでは、Chrome（デスクトップおよびAndroid）、Edge、Firefox（デスクトップおよびAndroid）、Safari（macOSおよびiOS）の4つのコアブラウザで利用可能な機能が記述されている。また、Baselineの一環としては、各ブラウザで利用可能なCSS機能の調査が行われている。機能が幅広い適応範囲で利用可能だとするには、少なくとも30ヶ月以上すべてのコアブラウザでサポートされている必要がある。たいして、すべてのコアブラウザでのサポート期間が30ヶ月未満の場合は、新しく利用可能になった機能とみなされる。以下は、幅広い適応範囲での利用に向けたBaselineのリンター設定の一例である。
// eslint.config.jsimport 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" // <- this here }] }, },];CSSのリンティング実行には、@eslint/cssプラグインが使用される。
npm install @eslint/css -D開発者であれば、リリースノートの確認がお勧めだ。今回のリリースの技術的な詳細情報やコードサンプルに併せて、追加実装となる機能の詳細が閲覧可能である。
ESLintはOpenJS Foundationのプロジェクトであり、オープンソースソフトウェアとしてMITライセンス承認を受けている。ESLintのGitHubリポジトリ経由でコントリビューションを受付中だが、コントリビュータにはESLintコントリビューションガイドラインの順守が求められている。