CSS Linter による Baseline サポートの仕組み まっつー / @ryo_manba 2025/02/21 Browser and UI #1 CSS

自己紹介 まっつー ● メルカリ ● フロントエンドエンジニア ● HeroUI, Stylelint チームメンバー ● 𝕏: @ryo_manba ● GitHub: @ryo-manba

Baseline ● 主要ブラウザでの Web 標準のサポート状況 ○ Chrome, Edge, Safari, Firefox ● 3つのステータス ○ Widely available: 主要ブラウザでサポートされて2.5年 ○ Newly available: 主要ブラウザでサポート ○ Limited availability: 上記の基準を満たさない 3

Baseline を確認する 4

正しい定義を見落とす可能性 ● clip-path (基本機能) → Widely ● fill-box, stroke-box, view-box → Newly ● Animatable clipping paths → Limited 5 mdn「Widely です」 開発者「よし、通れ！」

Linter でチェックしたい…

@eslint/css によるサポート ● require-baseline ルールが追加 ● Baseline の Widely か Newly をオプションで指定し、 満たさない場合に警告を出す 7

require-baseline ルールの仕組み 1. Baseline のデータを取得する 2. @supports をチェックする 3. Baseline のステータスを比較する 8

Baseline のデータを取得する ● @web-features から取得 ○ WebDX Community Group が提供するライブラリ ○ YAML をパースして JavaScript オブジェクトにしているだけ → 操作性が低い、不要な情報も含まれている ● @eslint/css で名前とレベルのみの形式に変換して管理 9

@supports のチェック @supports を利用している場合、警告を出す必要がない 10

@supports のネストへの対応 ネストを考慮して適用範囲を管理している 11

機能の Baseline ステータスを取得する 12

機能の Baseline ステータスを比較する 13

まとめ ● @eslint/css の require-baseline ルールでは、 ○ web-features から Baseline の定義を取得 ○ @supports の適用範囲をコンテキストとして管理 ○ これらを元に Baseline ステータスを比較 ● Baseline が活用しやすくなった！ 14

余談: Stylelint のプラグインでも実現できる？ ● stylelint-no-unsupported-browser-features と browserslist を組み合わせれば近いことはできる ● しかし、検知できない機能が複数ある ○ 内部で利用している @doiuse の対応を待つしかない ● @supports の対応もない Stylelint 本体がサポートするまでは難しそう… 15