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

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

Yuku Kotani
December 14, 2023

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

Yuku Kotani

December 14, 2023
Tweet

More Decks by Yuku Kotani

Other Decks in Programming

Transcript

  1. Kuma UI が提唱する

    Hybrid Approach CSS-in-JS の仕組み
    @yukukotani
    2023/12/13 - Nihonbashi.js #8

    View full-size slide

  2. 小谷 優空 - @yukukotani
    ・Software Engineer @ Ubie, Inc. (2019/05~)

      ・Head of System Platform
    ・Maintainer of Kuma UI
    ・Student @ Univ. Tsukuba (2019/04~)

      ・情報科学類
    自己紹介

    View full-size slide

  3. Kuma UI とは
    ・和製の CSS-in-JS ライブラリ

    ・ という手法によるパフォーマンス最適化を売りにしている
    Hybrid Approach

    View full-size slide

  4. Hybrid Approach?

    View full-size slide

  5. Hybrid Approach とは
    EmotionやChakra UIのような

    を完全に保ちながら、

    できる限り に変換する
    ランタイムCSS-in-JSの書き味
    ゼロランタイム

    View full-size slide

  6. Hybrid Approach とは
    ・Linariaなど、従来のゼロランタイムCSS-in-JSでは

     動的なスタイルの扱いに制限がある

    ・Kuma UI ではそういった制限がない

    View full-size slide

  7. Kuma UI をみてみよう

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    まずは を探す

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Hybrid Approach の仕組み
    Static! ZeroRuntime!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Hybrid Approach の仕組み
    現在の Kuma UI ではこれらを静的なスタイルとして抽出できる

    ・文字列や数値などのリテラル

    ・単純な数値計算

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Hybrid Approach の仕組み
    生成したCSSをlinkタグやstyleタグで読み込む必要がある

    このクラスの参照先がない

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. Hybrid Approach の仕組み
    ・ViteやwebpackはCSSをサポートしている

    ・普通にアプリケーションコードでCSSをインポートするのと同じように

     機械的に差し込んだCSSも解決してくれる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Hybrid Approach の仕組み
    Dynamic! Runtime!

    View full-size slide

  28. Hybrid Approach の仕組み
    ランタイムでコンポーネントを

    レンダリングすれば

    “black” に確定する!

    View full-size slide

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

    View full-size slide

  30. Hybrid Approach の仕組み
    asプロパティを展開
    ビルド時と同じように

    生成したクラスを参照
    ※概念コード

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. Hybrid Approach の仕組み
    バンドラはビルド時の処理

    もちろんランタイムでは使えない

    View full-size slide

  34. Hybrid Approach の仕組み
    バンドラはビルド時の処理

    もちろんランタイムでは使えない
    useInsertionEffect でDOM APIを叩いて

    styleタグを差し込む

    View full-size slide

  35. Hybrid Approach の仕組み
    useInsertionEffect とは

    ・React 組み込みの CSS-in-JS のためだけの Hooks

    ・useEffect とほぼ同じだが、実行タイミングだけが違う

     ・コンポーネントのレンダリング結果をDOMに反映する前に実行

     ・→ チラ付き(FOUC)を回避できる
    Boxコンポーネントの

    実行(レンダリング)
    useIntersectionEffectで

    styleタグ差し込み
    レンダリング結果を

    画面(DOM)に反映 useEffectの実行

    View full-size slide

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

    View full-size slide

  37. Hybrid Approach

    イケてるな〜

    View full-size slide

  38. Hybrid Approach

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

    View full-size slide

  39. Hybrid Approach のこれから
    これは静的なスタイル?

    View full-size slide

  40. Hybrid Approach のこれから
    これは静的なスタイル?

    →理論的には静的だが、現在のKuma UIではまだ動的扱いでランタイム処理

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. Hybrid Approach のこれから
    すでに見えている改善施策がたくさん!

    ・静的な値をより厳密に検出できるようにする

    ・動的なスタイルをランタイムCSSなしで実現する
    当面はEmotion完全互換を目標に

    View full-size slide

  48. ありがとうございました!

    使ってみてね

    View full-size slide