linaria
https://gyazo.com/97760d9cabcd4889625c24a27b738bd4
Zero-runtime CSS in JS を謳っているライブラリ。astroturf より機能が豊富で、実行時には CSS Variables を使ってスタイルを触ることが出来る。 @keyframes やメディアクエリの適用範囲中に書く記法になっている。これは stylis.js を使ったプリプロセッサによって成し遂げられている。 code: (tsx)
import { css } from 'linaria';
const box = css`
animation: rotate 1s linear infinite;
@keyframes rotate {
{ from: 0deg; }
{ to: 360deg; }
}
`;
CSS を再利用したい場合は Object interpolations を使うことになる。
制約
CSS Variables を使う関係上、IE11 のサポートをすることが出来ない。
また css Template Strings タグを使った場合に動的スタイル適用は出来ない(styled-components のような interpolations と違い、これは className 文字列を返す函数)。回避策が公式から示されていて基本的に自前で style をあてるか、自前で CSS Variables をあてることになる。
例えば styled-components だと実行時に動的にスタイルを出し分けることが可能。
code: jsx
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;
`}
`;
linaria では例えば data 属性を使う。
code: jsx
const StyledButton = styled.button`
padding: 0.25em 1em;
font-size: 1em;
border-radius: 3px;
padding: 0.5em 2em;
font-size: 2em;
}
`;
つまりスタイルが styled のみで完結できない場合がある。
従来の CSS in JS (styled-components / emotion) との違い
table: 比較表
linaria styled-component / emotion
生成物 CSS, JS JS のみ
仕組み CSS でスタイルを割り当て、style 属性に CSS Variables を付与する style 属性に直接付与する
SSR/SSG コンポーネントのみを考慮すれば良い 特別な処理が必要
パフォーマンス 最低限の動的スタイルのみ実行時に割り当てられる 少々難あり
サポートブラウザ CSS Variables が使えるモダンブラウザ(IE11 を除く) IE11 対応
まとめ
どうしてもパフォーマンスの問題で全て動的にインラインでスタイルを適用したくないだとか、CSS in JS でも PostCSS で好きにカスタマイズしたいだとか、静的オンリーな CSS Modules からの移行先としてはまあいいのかもしれない。今の時代にプロダクトに Rollup.js を選ぶみたいな物好きな人が選択しそうな気がした。
ただ十分にプロダクトから要求されるだけの能力はあると感じた。用途にあった機会があれば採用するかもしれない。