honey-css-modules/ADR/パーサーには postcss を使う
公開日: 2024/11/18
ステータス
Accepted (2024/11/18)
背景
*.module.cssから export されるトークンを特定するには、*.module.cssをパースしなければならない
そのために CSS Parser が必要になる
現在主要な CSS Parser には以下の 2 つがある
postcss
csstree
どちらを使うか決めたい
検討
postcss
これを使えば、やりたいことができることが分かっている
postcss の AST をトラバースしてトークンの情報を収集するコードとか
Plugin を導入すれば、Sass/Less をパースできる
honey-css-modules では Sass/Less をサポートする予定は今のところないけど、やろうと思ったらできる
ただし、細かいところのパースが postcss 本体ではできなくて、3rd-party ライブラリ頼りになってる
セレクター: postcss-selector-parser
@import ...: postcss-value-parser
csstree
過去に採用したことがなく、やりたいことが実現できるかわからない
多分できるとは思う
セレクターや@import ...のパースロジックも組み込まれてる
Sass/Less のパースはできない
決定事項
postcss を使う
その他検討したこと
lightningcss
トランスパイル用の API (transform) やバンドル用の API (bundle) は用意されているが、パース用の API がない
Rust 向けにはパース用の API (StyleSheet::parse) が公開されているが、Node.js 向けにはパフォーマンス上の理由により、公開されていない
honey-css-modules では、トークンがファイル中のどの位置に存在するかを知るために、パース用の API が不可欠
そのため、lightningcss は不採用とした