linaria Zero-Runtime CSS in JS pixiv Inc. petamoriken 2020.7.31

2 自己紹介まわり ● 主にフロントエンドエンジニア ● ECMAScript や WHATWG DOM を追うのが好き ● iOSDC Japan 2020 のサイト制作を担当しました petamoriken 課題解決部

3 HTML(JSX) と CSS の連携 ● HTML(JSX) と CSS ファイルが分かれたタイプ ○ BEM によるクラス管理 ○ CSS Modules ● CSS in JS ○ styled-components / emotion ○ jss

4 HTML(JSX) と CSS の連携 ● HTML(JSX) と CSS ファイルが分かれたタイプ ○ BEM によるクラス管理 ○ CSS Modules ● CSS in JS ○ styled-components / emotion ○ jss

const StyledButton = styled.button` color: blue; width: ${(props) => props.width}px; `; styled-components / emotion 5 JSX HTML (レンダリング後)

6 styled-components / emotion について ● 利点 ○ CSS との連携を考えなくて良くなる ● 問題点 ○ JS のランタイムで実行されるためパフォーマンスに問題がある スタイル付けされたCSS-in-JS実装は、スタイル付けされていないバージョンと比べ て50%以上もレンダリングに時間がかかるように見えた。 https://www.infoq.com/jp/news/2020/01/css-cssinjs-performance-cost/ ○ ランタイムに stylis.js を使っていてカスタマイズしづらい

7

const StyledButton = styled.button` color: blue; width: ${(props) => props.width}px; `; linaria 8 JSX .abcd1234 { color: blue; width: var(--abcd1234-0); } CSS HTML (レンダリング後)

9 linaria について ● 利点 ○ パフォーマンスの問題を解決 ○ コンパイル時に PostCSS によるカスタマイズが可能 ● 問題点 ○ IE 11 非対応 ○ ランタイムで styled-components / emotion ほどの柔軟性はない css prop が使えない / CSS プロパティの出し分けが出来ない

const StyledButton = styled.button` border-radius: 3px; ${(props) => props.large ? css` padding: 0.5em 2em; font-size: 2em; ` : css` padding: 0.25em 1em; font-size: 1em; `} `; styled-components / emotion 10

const StyledButton = styled.button` border-radius: 3px; padding: 0.25em 1em; font-size: 1em; &[data-large] { padding: 0.5em 2em; font-size: 2em; } `; linaria 11

12 linaria を使ってみた所感 ● styled-components / emotion とほとんど同じ書き方が可能 ○ コンパイル時に CSS が静的解析できないといけないことに注意 ○ 書いていて特に困ることはなかった ● まだまだ発展途上なため、即採用するものではなさそう ○ Next.js には 1.x.x が使えないため 2.0.0-alpha.5 を使うことになる