Deno で UnoCSS を SSR する方法の紹介です。

UnoCSS とは

UnoCSS は Tailwind CSS と互換性のある、Atomic CSS エンジンです。

Vite や Vue のコアメンバーである Anthony Fu によって開発が始められ、現在は複数のメンバーによって活発に開発が続けられています。

Anthony Fu は UnoCSS を開発する以前に、似たような Atomic CSS エンジンである Windi CSS を開発していました。Windi CSS では、プラグインの機構なども含めて、かなり厳密に Tailwind との互換性を取るようなデザインをしていましたが、その制約によって、Windi CSS の使い勝手が悪いという不満を作者自身が感じるようになりました。Tailwind との細かい互換性を無視して、速さと設定のフレキシブルさによりフォーカスしたデザインで1から作り直したものが UnoCSS です。(この辺りの経緯が UnoCSS 開発の動機を説明したブログ記事で詳しく説明されています。

Deno とは

Deno は TypeScript や開発ツール (リンター、フォーマッター) がビルトインされた新しい JavaScript エンジンです。

Deno で UnoCSS を SSR する

Deno から UnoCSS を使うには、esm.sh でホストされているバージョンを使います。

import { createGenerator } from "https://esm.sh/@unocss/core@0.45.22";
import presetUno from "https://esm.sh/@unocss/preset-uno@0.45.22";

createGenerator() で UnoCSS の Generator クラスを作る事が出来ます。これが UnoCSS エンジンの本体になります。presetUno は UnoCSS のデフォルトのクラス定義集です。Tailwind にほぼ互換な設定がプリセットされています。

// Creates Uno generator
const uno = createGenerator({ presets: [presetUno()] });

Generator である uno に対して .generate(...) メソッドを呼び出すと、与えられたクラス群に対応するスタイルシートを生成してくれます。

// Generates css
const { css } = await uno.generate("ml-1", { preflights: false });
console.log(css);
// 以下のように出力されます
// /* layer: default */
// .ml-1{margin-left:0.25rem;}

.generate(...) の1引数目に色々なクラスを指定すると、それに応じた内容のスタイルシートが出力されます。

const { css } = await uno.generate("border border-t border-blue-100", { preflights: false });
console.log(css);
// 以下が出力される
// /* layer: default */
// .border{border-width:1px;border-style:solid;}
// .border-t{border-top-width:1px;border-top-style:solid;}
// .border-blue-100{--un-border-opacity:1;border-color:rgba(219,234,254,var(--un-border-opacity));}

上記の例で指定しているオプションで preflights: true を指定すると、リセット CSS に相当するスタイルシートが同時に出力されます (冗長なため、サンプルは割愛)

サーバーに組み込む場合は、上記の css 変数の内容を、<style> タグにセットする事で必要なスタイルを効かせる事が出来ます。