Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み

Nihonbashi.js #8 https://nihonbashi-js.connpass.com/event/301794/

書き起こし記事: https://zenn.dev/yuku/articles/dd4c5c9c7299aa

Transcript

1. Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み @yukukotani 2023/12/13 - Nihonbashi.js #8
2. 小谷 優空 - @yukukotani ・Software Engineer @ Ubie, Inc. (2019/05~) 　　・Head of System Platform ・Maintainer of Kuma UI ・Student @ Univ. Tsukuba (2019/04~) 　　・情報科学類 自己紹介
3. Kuma UI？
4. Kuma UI とは ・和製の CSS-in-JS ライブラリ ・ という手法によるパフォーマンス最適化を売りにしている Hybrid Approach
5. Hybrid Approach？
6. Hybrid Approach とは EmotionやChakra UIのような を完全に保ちながら、 できる限り に変換する ランタイムCSS-in-JSの書き味 ゼロランタイム
7. Hybrid Approach とは ・Linariaなど、従来のゼロランタイムCSS-in-JSでは
 　動的なスタイルの扱いに制限がある ・Kuma UI ではそういった制限がない
8. Kuma UI をみてみよう
9. Kuma UI をみてみよう Dynamic! Runtime! Static! ZeroRuntime!
10. Hybrid Approach の仕組み 変換の過程を見ていく
11. Hybrid Approach の仕組み ビルド時 静的なスタイル にts-morph で TypeScript AST を探索
 まずは を探す
12. Hybrid Approach の仕組み 静的なスタイル
13. Hybrid Approach の仕組み 静的なスタイル ブラウザで実行しなくても値がわかるスタイル
14. Hybrid Approach の仕組み Static! ZeroRuntime!
15. Hybrid Approach の仕組み Static! ZeroRuntime! Why static ?
16. Hybrid Approach の仕組み 値がただの文字列リテラル
17. Hybrid Approach の仕組み 現在の Kuma UI ではこれらを静的なスタイルとして抽出できる ・文字列や数値などのリテラル ・単純な数値計算
18. Hybrid Approach の仕組み 抽出したスタイルはCSSとして出力される
19. Hybrid Approach の仕組み 抽出できたスタイルのプロパティは削除し、代わりに出力したクラスを参照
20. Hybrid Approach の仕組み 抽出できたスタイルのプロパティは削除し、代わりに出力したクラスを参照 Missing something...?
21. Hybrid Approach の仕組み 生成したCSSをlinkタグやstyleタグで読み込む必要がある このクラスの参照先がない
22. Hybrid Approach の仕組み ts-morphじゃHTMLは触れない。どうしよう・・・
23. Hybrid Approach の仕組み ts-morphじゃHTMLは触れない。どうしよう・・・ CSSの差し込みはバンドラ(Vite/webpack)に委譲！
24. Hybrid Approach の仕組み 生成したCSSをインポートするコードを差し込む
25. Hybrid Approach の仕組み ・ViteやwebpackはCSSをサポートしている ・普通にアプリケーションコードでCSSをインポートするのと同じように
 　機械的に差し込んだCSSも解決してくれる
26. Hybrid Approach の仕組み ここまでで静的なスタイルは反映できた
27. Hybrid Approach の仕組み ランタイム 動的なスタイル で を計算する
28. Hybrid Approach の仕組み Dynamic! Runtime!
29. Hybrid Approach の仕組み ランタイムでコンポーネントを レンダリングすれば “black” に確定する！
30. Hybrid Approach の仕組み ビルド時と同様にCSSとして出力する
31. Hybrid Approach の仕組み asプロパティを展開 ビルド時と同じように 生成したクラスを参照 ※概念コード
32. Hybrid Approach の仕組み ビルド時と同じようにCSSを差し込むぞ！
33. Hybrid Approach の仕組み ビルド時と同じようにCSSを差し込むぞ！ Wait
34. Hybrid Approach の仕組み バンドラはビルド時の処理 もちろんランタイムでは使えない
35. Hybrid Approach の仕組み バンドラはビルド時の処理 もちろんランタイムでは使えない useInsertionEffect でDOM APIを叩いて styleタグを差し込む
36. Hybrid Approach の仕組み useInsertionEffect とは ・React 組み込みの CSS-in-JS のためだけの Hooks ・useEffect とほぼ同じだが、実行タイミングだけが違う 　・コンポーネントのレンダリング結果をDOMに反映する前に実行 　・→ チラ付き(FOUC)を回避できる Boxコンポーネントの 実行(レンダリング) useIntersectionEffectで styleタグ差し込み レンダリング結果を 画面(DOM)に反映 useEffectの実行
37. Hybrid Approach の仕組み これで動的なスタイルも反映できた
38. Hybrid Approach イケてるな〜
39. Hybrid Approach イケてるな〜 まだ伸び代だらけ
40. Hybrid Approach のこれから これは静的なスタイル？
41. Hybrid Approach のこれから これは静的なスタイル？ →理論的には静的だが、現在のKuma UIではまだ動的扱いでランタイム処理
42. Hybrid Approach のこれから 静的な値をより厳密に検出できるようにする
43. Hybrid Approach のこれから この動的なスタイルは本当にビルド時に抽出できないのだろうか？ asプロパティを展開
44. Hybrid Approach のこれから この動的なスタイルは本当にビルド時に抽出できないのだろうか？ asプロパティを展開 値は動的だが、colorプロパティがあることはわかる
45. Hybrid Approach のこれから 動的な値はCSS変数にしておくことで、静的なCSSを出力できる
46. Hybrid Approach のこれから CSS変数はインラインのstyle属性で動的に埋め込める
47. Hybrid Approach のこれから 動的なスタイルをランタイムCSSなしで実現する
48. Hybrid Approach のこれから すでに見えている改善施策がたくさん！ ・静的な値をより厳密に検出できるようにする ・動的なスタイルをランタイムCSSなしで実現する 当面はEmotion完全互換を目標に
50. ありがとうございました！ 使ってみてね