現代CSSフレームワークの仕組みは、大きく以下3つに分類される
XW 静的解析Y
a Kuma UI なC
iW VM実行Y
a Vanilla Extract なC
4W 仕様ハックY
a CSS Hooks など
Slide 6
Slide 6 text
ÄÂ 静的解析系
抽象構文木(AST)を走査して、抽出対象となるスタ
イルを抜き取る。ロジックの実態はコンパイラ側で持
つ
V 利`
V xxx.css.ts の様にCSSファイルとJSX &
Templateを分けなくて良い。→関心の分離を
技術単位でなくコンポーネント単位にでき5
V 欠`
V 静的解析が難しい!単純なリテラルだけであれ
ば解析は容易だが、変数の場合はフロー解析が
必要。
Slide 7
Slide 7 text
ÆÂ VM実行系
ASTを静的解析せず、作成した独自コンテキストを
Node.jsのVMを用いて隔離されたサンドバックス環境
でコードを「実行する」S
I 利a
I 「実行」するので、JSの構文として正しく、
かつビルド時に決定できさえすれば、変数代入
でもInterpolationでも何でも対応できるS
I 欠a
I コードを「実行」する必要があるので、コン
ポーネントの中に直接書けず、別ファイルに定
義する必要がある(コンポーネントでは、副作
用や非NodeのAPIが使用される)。
Slide 8
Slide 8 text
ÇÅ 仕様ハック系
CSSフレームワークが存在する唯一の理由は、インラ
インスタイルで擬似要素やメディアクエリが使えない
から。CSS変数の guaranteed-invalid valueという仕
様をハックして擬似要素にもスタイルを当てる
B 利T
B バンドラやプラグインが必要なくWeb APIなし
で(ほぼ)ゼロランタイムを実現する
B 欠T
B バンドルサイズが上がったり、実行時のパ
フォーマンスが懸念される。StyleXの作者は、
インラインスタイルはレンダリングのたびに再
計算する必要性から批判的。