■

styled-componentsの作者とtwitterで会話した。 この歳になっても全然英語できるようになってなくて、今まで俺は何をしていたんだって気持ちになった。

styled-componentsは、本当によく出来ててコードの見通しがよくなるしまじでいいと思う。 あとで、コールドリーディング。

いや、しないな。 あとでっていうとたいていできないんだ。 今から25分時間をとってやる。

見るべきところは、どのようにcssを生成してclassNameをあてているかを知れればいい。

npm-src styled-components
yarn

https://github.com/styled-components/styled-components/blob/1fb841ac84cd3093ffef4b1db383d46418dd1bfe/src/index.js#L3 シングルトンかのコメント便利

https://github.com/styled-components/styled-components/blob/1fb841ac84cd3093ffef4b1db383d46418dd1bfe/src/index.js#L22 デコレータっぽい処理

styledを見に行く

styledComponentsをうけとって

https://github.com/styled-components/styled-components/blob/1fb841ac84cd3093ffef4b1db383d46418dd1bfe/src/types.js#L2 Interpolationはcssのruleのことっぽい

Targetは、stringはreactClass テンプレートリテラルはどうつくるの？ func～はただの関数 ${}があればその前後で分割

var a = (...arg) => arg.map(x => 'hello' + x).join()
a`A${1}B${2}C`
'helloA,B,C,hello1,hello2'

domElemntsをforEachで回してそれぞれの関数をつくる。 DI.styledComponent関数に適用する

styledComponentを見に行く https://github.com/styled-components/styled-components/blob/1fb841ac84cd3093ffef4b1db383d46418dd1bfe/src/models/StyledComponent.js

コレ自体も高階関数 クラスを関数でラップ 渡ってきただけで処理はしてない。

コメントが書いてある

* Flattens a rule set into valid CSS
* Hashes it, wraps the whole chunk in a ._hashName {}
* Parses that with PostCSS then runs PostCSS-Nested on it
* Returns the hash to be injected on render()

cssをフラットにして(nestに対応してるため) ハッシュ化し、チャンク全体をラップ PostCSSでパースして、PostCSS-Nestedを実行 ハッシュを返してrender()にインジェクトする

ここから面倒になったので、コードに直接コメント書いた。

どうハッシュを生成するか

cssのインジェクトはGlamorを使ってる てゆうかめっちゃGlamorに依存してる Glamorやばい

styled-componentsが力を割いてるのは、themeとの合成。 themeのためにHOCでシンプルなイベントエミッタを導入してコンテキストでぶちこんだり。

hashのclassNameをCloneElementでpropsを混ぜるのは、汎用的なパターンで使えそう。