Upgrade to Pro — share decks privately, control downloads, hide ads and more …

linaria: Zero-Runtime CSS in JS

linaria: Zero-Runtime CSS in JS

社内エンジニア勉強会

petamoriken / 森建

July 31, 2020
Tweet

More Decks by petamoriken / 森建

Other Decks in Programming

Transcript

  1. 2 自己紹介まわり • 主にフロントエンドエンジニア • ECMAScript や WHATWG DOM を追うのが好き

    • iOSDC Japan 2020 のサイト制作を担当しました petamoriken 課題解決部
  2. 3 HTML(JSX) と CSS の連携 • HTML(JSX) と CSS ファイルが分かれたタイプ

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

    ◦ BEM によるクラス管理 ◦ CSS Modules • CSS in JS ◦ styled-components / emotion ◦ jss
  4. const StyledButton = styled.button` color: blue; width: ${(props) => props.width}px;

    `; <StyledButton width={50} /> styled-components / emotion 5 JSX HTML (レンダリング後) <button style="color: blue; width: 50px;">
  5. 6 styled-components / emotion について • 利点 ◦ CSS との連携を考えなくて良くなる

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

  7. const StyledButton = styled.button` color: blue; width: ${(props) => props.width}px;

    `; <StyledButton width={50} /> linaria 8 JSX .abcd1234 { color: blue; width: var(--abcd1234-0); } CSS <button class="abcd1234" style="--abcd1234-0: 50px;"> HTML (レンダリング後)
  8. 9 linaria について • 利点 ◦ パフォーマンスの問題を解決 ◦ コンパイル時に PostCSS

    によるカスタマイズが可能 • 問題点 ◦ IE 11 非対応 ◦ ランタイムで styled-components / emotion ほどの柔軟性はない css prop が使えない / CSS プロパティの出し分けが出来ない
  9. 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
  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
  11. 12 linaria を使ってみた所感 • styled-components / emotion とほとんど同じ書き方が可能 ◦ コンパイル時に

    CSS が静的解析できないといけないことに注意 ◦ 書いていて特に困ることはなかった • まだまだ発展途上なため、即採用するものではなさそう ◦ Next.js には 1.x.x が使えないため 2.0.0-alpha.5 を使うことになる