emotionの内部構造（CSS-in-JSの裏側）

書いたスタイルがどうなるかという観点でemotion(emotion-js) v10の内部構造を調べたので図にした。styled-componentsもざっと見たけど、だいたい同じような感じ。

emotionをReactと組み合わせて使う場合、基本的には以下の動きをする（SSRが入るとちょっと違う）

1. css`` あるいは styled.hoge`` が、SerializedStyles (ほぼ書いたとおりの状態のスタイルを表現するオブジェクト）を作る。ハッシュ+ラベルでnameがつく。
2. ラップするための「jsx」関数か「styled」のコンポーネントが、React Contextを使ってEmotionCacheを探し出して、SerializedStylesをinsertStyles()する。
3. EmotionCacheが、stylisでSerializedStylesを加工する（実際に使われるスタイルはここでできる）。
4. stylisプラグインが、StyleSheetオブジェクトを経由して、containerに指定された要素（デフォルトではdocument.head）にstyle要素を挿入する。
5. 「jsx」関数か「styled」コンポーネントが、スタイル適用された要素をclassNameを渡すことで作る。

createCache()でEmotionCacheは作れるので、CacheProviderと合わせると木の途中からdocument.head以外の場所、例えばiframeの向こう側にもstyleを挿入することができる。

Reactでない他の枠組みと統合するときは、以下を作ることになるかなという感じ。

• cacheをつくるところ
• (SerializedStyleを作るところ→css`` をそのまま使うのでもあり)
• cacheを見つけてinsertするところ