linaria: Zero-Runtime CSS in JS

社内エンジニア勉強会

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. View Slide

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

   View Slide

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

   View Slide

10. 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
    

    View Slide

11. 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
    

    View Slide

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

    View Slide