CSS Linter による Baseline サポートの仕組み

Browser and UI #1 CSS (2025/02/21) での発表資料
https://browser-and-ui.connpass.com/event/341857/

Transcript

1. CSS Linter による Baseline サポートの仕組み まっつー / @ryo_manba 2025/02/21 Browser and UI #1 CSS
2. 自己紹介 まっつー • メルカリ • フロントエンドエンジニア • HeroUI, Stylelint チームメンバー • 𝕏: @ryo_manba • GitHub: @ryo-manba
3. Baseline • 主要ブラウザでの Web 標準のサポート状況 ◦ Chrome, Edge, Safari, Firefox • 3つのステータス ◦ Widely available: 主要ブラウザでサポートされて2.5年 ◦ Newly available: 主要ブラウザでサポート ◦ Limited availability: 上記の基準を満たさない 3
4. Baseline を確認する 4
5. 正しい定義を見落とす可能性 • clip-path (基本機能) → Widely • fill-box, stroke-box, view-box → Newly • Animatable clipping paths → Limited 5 mdn「Widely です」 開発者「よし、通れ！」
6. Linter でチェックしたい…
7. @eslint/css によるサポート • require-baseline ルールが追加 • Baseline の Widely か Newly をオプションで指定し、 満たさない場合に警告を出す 7
8. require-baseline ルールの仕組み 1. Baseline のデータを取得する 2. @supports をチェックする 3. Baseline のステータスを比較する 8
9. Baseline のデータを取得する • @web-features から取得 ◦ WebDX Community Group が提供するライブラリ ◦ YAML をパースして JavaScript オブジェクトにしているだけ → 操作性が低い、不要な情報も含まれている • @eslint/css で名前とレベルのみの形式に変換して管理 9
10. @supports のチェック @supports を利用している場合、警告を出す必要がない 10
11. @supports のネストへの対応 ネストを考慮して適用範囲を管理している 11
12. 機能の Baseline ステータスを取得する 12
13. 機能の Baseline ステータスを比較する 13
14. まとめ • @eslint/css の require-baseline ルールでは、 ◦ web-features から Baseline の定義を取得 ◦ @supports の適用範囲をコンテキストとして管理 ◦ これらを元に Baseline ステータスを比較 • Baseline が活用しやすくなった！ 14
15. 余談: Stylelint のプラグインでも実現できる？ • stylelint-no-unsupported-browser-features と browserslist を組み合わせれば近いことはできる • しかし、検知できない機能が複数ある ◦ 内部で利用している @doiuse の対応を待つしかない • @supports の対応もない Stylelint 本体がサポートするまでは難しそう… 15