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

Slide 1

Slide 1 text

Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み @yukukotani 2023/12/13 - Nihonbashi.js #8

Slide 2

Slide 2 text

小谷優空 - @yukukotani ・Software Engineer @ Ubie, Inc. (2019/05~) 　　・Head of System Platform ・Maintainer of Kuma UI ・Student @ Univ. Tsukuba (2019/04~) 　　・情報科学類自己紹介

Slide 3

Slide 3 text

Kuma UI？

Slide 4

Slide 4 text

Kuma UI とは・和製の CSS-in-JS ライブラリ・という手法によるパフォーマンス最適化を売りにしている Hybrid Approach

Slide 5

Slide 5 text

Hybrid Approach？

Slide 6

Slide 6 text

Hybrid Approach とは EmotionやChakra UIのようなを完全に保ちながら、できる限りに変換するランタイムCSS-in-JSの書き味ゼロランタイム

Slide 7

Slide 7 text

Hybrid Approach とは・Linariaなど、従来のゼロランタイムCSS-in-JSでは  　動的なスタイルの扱いに制限がある・Kuma UI ではそういった制限がない

Slide 8

Slide 8 text

Kuma UI をみてみよう

Slide 9

Slide 9 text

Kuma UI をみてみよう Dynamic! Runtime! Static! ZeroRuntime!

Slide 10

Slide 10 text

Hybrid Approach の仕組み変換の過程を見ていく

Slide 11

Slide 11 text

Hybrid Approach の仕組みビルド時静的なスタイルにts-morph で TypeScript AST を探索  まずはを探す

Slide 12

Slide 12 text

Hybrid Approach の仕組み静的なスタイル

Slide 13

Slide 13 text

Hybrid Approach の仕組み静的なスタイルブラウザで実行しなくても値がわかるスタイル

Slide 14

Slide 14 text

Hybrid Approach の仕組み Static! ZeroRuntime!

Slide 15

Slide 15 text

Hybrid Approach の仕組み Static! ZeroRuntime! Why static ?

Slide 16

Slide 16 text

Hybrid Approach の仕組み値がただの文字列リテラル

Slide 17

Slide 17 text

Hybrid Approach の仕組み現在の Kuma UI ではこれらを静的なスタイルとして抽出できる・文字列や数値などのリテラル・単純な数値計算

Slide 18

Slide 18 text

Hybrid Approach の仕組み抽出したスタイルはCSSとして出力される

Slide 19

Slide 19 text

Hybrid Approach の仕組み抽出できたスタイルのプロパティは削除し、代わりに出力したクラスを参照

Slide 20

Slide 20 text

Hybrid Approach の仕組み抽出できたスタイルのプロパティは削除し、代わりに出力したクラスを参照 Missing something...?

Slide 21

Slide 21 text

Hybrid Approach の仕組み生成したCSSをlinkタグやstyleタグで読み込む必要があるこのクラスの参照先がない

Slide 22

Slide 22 text

Hybrid Approach の仕組み ts-morphじゃHTMLは触れない。どうしよう・・・

Slide 23

Slide 23 text

Hybrid Approach の仕組み ts-morphじゃHTMLは触れない。どうしよう・・・ CSSの差し込みはバンドラ(Vite/webpack)に委譲！

Slide 24

Slide 24 text

Hybrid Approach の仕組み生成したCSSをインポートするコードを差し込む

Slide 25

Slide 25 text

Hybrid Approach の仕組み・ViteやwebpackはCSSをサポートしている・普通にアプリケーションコードでCSSをインポートするのと同じように  　機械的に差し込んだCSSも解決してくれる

Slide 26

Slide 26 text

Hybrid Approach の仕組みここまでで静的なスタイルは反映できた

Slide 27

Slide 27 text

Hybrid Approach の仕組みランタイム動的なスタイルでを計算する

Slide 28

Slide 28 text

Hybrid Approach の仕組み Dynamic! Runtime!

Slide 29

Slide 29 text

Hybrid Approach の仕組みランタイムでコンポーネントをレンダリングすれば “black” に確定する！

Slide 30

Slide 30 text

Hybrid Approach の仕組みビルド時と同様にCSSとして出力する

Slide 31

Slide 31 text

Hybrid Approach の仕組み asプロパティを展開ビルド時と同じように生成したクラスを参照 ※概念コード

Slide 32

Slide 32 text

Hybrid Approach の仕組みビルド時と同じようにCSSを差し込むぞ！

Slide 33

Slide 33 text

Hybrid Approach の仕組みビルド時と同じようにCSSを差し込むぞ！ Wait

Slide 34

Slide 34 text

Hybrid Approach の仕組みバンドラはビルド時の処理もちろんランタイムでは使えない

Slide 35

Slide 35 text

Hybrid Approach の仕組みバンドラはビルド時の処理もちろんランタイムでは使えない useInsertionEffect でDOM APIを叩いて styleタグを差し込む

Slide 36

Slide 36 text

Hybrid Approach の仕組み useInsertionEffect とは・React 組み込みの CSS-in-JS のためだけの Hooks ・useEffect とほぼ同じだが、実行タイミングだけが違う　・コンポーネントのレンダリング結果をDOMに反映する前に実行　・→ チラ付き(FOUC)を回避できる Boxコンポーネントの実行(レンダリング) useIntersectionEffectで styleタグ差し込みレンダリング結果を画面(DOM)に反映 useEffectの実行

Slide 37

Slide 37 text

Hybrid Approach の仕組みこれで動的なスタイルも反映できた

Slide 38

Slide 38 text

Hybrid Approach イケてるな〜

Slide 39

Slide 39 text

Hybrid Approach イケてるな〜まだ伸び代だらけ

Slide 40

Slide 40 text

Hybrid Approach のこれからこれは静的なスタイル？

Slide 41

Slide 41 text

Hybrid Approach のこれからこれは静的なスタイル？ →理論的には静的だが、現在のKuma UIではまだ動的扱いでランタイム処理

Slide 42

Slide 42 text

Hybrid Approach のこれから静的な値をより厳密に検出できるようにする

Slide 43

Slide 43 text

Hybrid Approach のこれからこの動的なスタイルは本当にビルド時に抽出できないのだろうか？ asプロパティを展開

Slide 44

Slide 44 text

Hybrid Approach のこれからこの動的なスタイルは本当にビルド時に抽出できないのだろうか？ asプロパティを展開値は動的だが、colorプロパティがあることはわかる

Slide 45

Slide 45 text

Hybrid Approach のこれから動的な値はCSS変数にしておくことで、静的なCSSを出力できる

Slide 46

Slide 46 text

Hybrid Approach のこれから CSS変数はインラインのstyle属性で動的に埋め込める

Slide 47

Slide 47 text

Hybrid Approach のこれから動的なスタイルをランタイムCSSなしで実現する

Slide 48

Slide 48 text

Hybrid Approach のこれからすでに見えている改善施策がたくさん！・静的な値をより厳密に検出できるようにする・動的なスタイルをランタイムCSSなしで実現する当面はEmotion完全互換を目標に