Deno で Linaria のような Zero-runtime CSS in JS を実現する

トランスパイル

Deno は内部で swc を使っており、TypeScript を JavaScript に変換して V8 で実行している。しかし Linaria のような Zero-runtime CSS in JS を実現するにはそれだけでは不十分で更にトランスパイルが必要となる。

Linaria では Babel を使って AST から該当する Template Literal を見つけてきて、CSS を出力し、元の JSX を書き換えている。

Aleph.js の実装

Aleph.js はまだ experimental な Next.js ライクのフレームワーク。swc と parcel css を使った WebAssembly で実行できるコンパイラを内包している。

これを真似ることで Deno でも Zero-runtime CSS in JS を実現できそう。