astroturf
制約
コンパイル時に CSS を解決しないといけない上に Babel のみで変換可能なアーキテクチャのためファイル単位でコンパイルされる制約があり、別の JS ファイルで作った定数を持ってくることが出来ない。
よって以下のようなファイル構成にすることが出来ない。
code: lib/constant.js
export const WIDTH = 800;
code: components/app.js
import { styled } from "astroturf";
import { WIDTH } from "../lib/constant";
// 別ファイルから定数を持ってきているのでエラーになる
const styledDiv = styled`
width: ${WIDTH}px;
`;
// ...
CSS Variables を使えば無理矢理実行時に変数展開させることが出来るので、ある程度はマシになるが……果たして CSS in JS とはという気持ちになる。
code: lib/constant.js
import { css } from "astroturf";
export const WIDTH = 800;
// 同じファイルから定数を持ってきているのでOK
css`
:root {
--width: ${WIDTH}px;
}
`;
code: components/app.js
import "../lib/constant";
import { styled } from "astroturf";
const styledDiv = styled`
width: var(--width);
`;
// ...
まとめ
完全に CSS を静的にしたいという玄人向けのライブラリな気がする。基本的にプロダクトに採用することはなさそう。