Upgrade to Pro — share decks privately, control downloads, hide ads and more …

現代CSSフレームワークの内部実装とその仕組み

poteboy
April 19, 2024

 現代CSSフレームワークの内部実装とその仕組み

meta社製StyleXやChakraチームのPanda CSSなど、CSSフレームワーク界隈は大盛り上がり。そんな各CSSフレームワークはどのような仕組みで動いているのか、自らも「Kuma UI」というCSSフレームワークを作っている観点から深掘りしていきます

poteboy

April 19, 2024
Tweet

More Decks by poteboy

Other Decks in Technology

Transcript

  1. poteboy 自己紹介 t 合同会社ぽてぽてランド 代表社a t ほぼフリーランB t 最近やってること( t

    Frontend Ops/SR& t モバイルアプリ新規開 t SND t GitHub: potebo t X (Twitter): @_poteboy_
  2. Ä 静的解析系 抽象構文木(AST)を走査して、抽出対象となるスタ イルを抜き取る。ロジックの実態はコンパイラ側で持 つ V 利` V xxx.css.ts の様にCSSファイルとJSX

    & Templateを分けなくて良い。→関心の分離を 技術単位でなくコンポーネント単位にでき5 V 欠` V 静的解析が難しい!単純なリテラルだけであれ ば解析は容易だが、変数の場合はフロー解析が 必要。
  3. ÆÂ VM実行系 ASTを静的解析せず、作成した独自コンテキストを Node.jsのVMを用いて隔離されたサンドバックス環境 でコードを「実行する」S I 利a I 「実行」するので、JSの構文として正しく、 かつビルド時に決定できさえすれば、変数代入

    でもInterpolationでも何でも対応できるS I 欠a I コードを「実行」する必要があるので、コン ポーネントの中に直接書けず、別ファイルに定 義する必要がある(コンポーネントでは、副作 用や非NodeのAPIが使用される)。
  4. ÇÅ 仕様ハック系 CSSフレームワークが存在する唯一の理由は、インラ インスタイルで擬似要素やメディアクエリが使えない から。CSS変数の guaranteed-invalid valueという仕 様をハックして擬似要素にもスタイルを当てる„ B 利T

    B バンドラやプラグインが必要なくWeb APIなし で(ほぼ)ゼロランタイムを実現する„ B 欠T B バンドルサイズが上がったり、実行時のパ フォーマンスが懸念される。StyleXの作者は、 インラインスタイルはレンダリングのたびに再 計算する必要性から批判的。