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を混ぜるのは、汎用的なパターンで使えそう。

今日の英語の勉強成果

なにそれ? What was that?

意味ワカンネ I dont’s get why…

だろ〜 Right?

ゲ Geh

何考えてんだ!この変態!ドエロ! What are you planning! You bastard! Pervert!

何を想像したんだよ〜 What are you imagining?

なんだっていいだろ It… it doesn’t matter.

そ、それが? W-What about it?

今わたしのデコになんかエロいことしたろ! You were doing something lewd to my forehead just now!

of the sort そのような

してないって I wans’t doing anything of the sort.

した!絶対した! You were! You definitely were!

Hahaha Kanako-sama is so cute.

何が? How so?

だ〜か〜ら〜 That’s why…

イチャイチャしたいと? You wanna get it on.

だべ? Yeah right.

こ、今回だけですよ O-Only this time.

お兄ちゃんどいて!そいつ殺せない! Onii-chan, step aside or I can’t kill her!