@tabula-css/preset

プロジェクトの Tailwind v4 エントリスタイルシートを組み立てます: @import "tailwindcss" source(none) に加えて @theme、そして閉じた語彙全体にわたる @source inline()。

インストール

@tabula-css/preset はランタイム依存であり、ルート README のクイックスタートの一部です。

bash

npm install @tabula-css/merge @tabula-css/preset

概要

@tabula-css/preset は純粋なライブラリです: すべてのエクスポートは ResolvedModel → string 関数であり、ファイルシステムへのアクセスはありません — 結果を .tabula/source.css に書き込むのは @tabula-css/cli の仕事であり、このパッケージの仕事ではありません。@tabula-css/tokens から解決済みトークンモデルを受け取り、プロジェクトのビルドがインポートする単一のスタイルシートを生成します: Tailwind のスキャンをオフにし(source(none))、トークンテーマ(@tabula-css/tokens の emitThemeCss() に委譲)、登録済みクラスごとに 1 つの @utility ブロック(論理的 なロングハンドのみで、これによりすべての出力プロパティが正規スロットのままになります)、そして閉じた語彙をちょうど列挙する @source inline(...) 宣言 — これが閉包性(T3、Concepts を参照)を成立させるものです: 未登録のクラスは文字どおり CSS を生成できません。なぜなら source(none) が Tailwind に他の何もスキャンしないよう指示しているからです。

エクスポート

`buildPresetCss()`

export function buildPresetCss(model: ResolvedModel): string;

解決済みモデルに対して、完全な Tailwind v4 エントリスタイルシートを組み立てます — tabula build が .tabula/source.css に書き込む厳密な文字列です。順序は次のとおりです: @import "tailwindcss" source(none); 行(加えて、base プロファイルレベルの下では、プロファイル自身の部分的な typography ユーティリティだけが存在するように、標準の text-*/font-*/leading-*/tracking-* スケールをリセットする @theme ブロック)、埋め込まれたトークンテーマ、候補クラスごとに 1 つの @utility ブロック、@source inline(...) による語彙の閉包、宣言済みのバリアントチェーンのルールを付加した @layer utilities ブロック(buildChainLayer() 経由。モデルがチェーンを一切宣言していない場合は省略されます)、そして独自のレイヤーにある prose-quarantine の除外 CSS。

import { writeFileSync } from 'node:fs';
import { buildProfile } from '@tabula-css/tokens';
import { buildPresetCss } from '@tabula-css/preset';

const { model } = buildProfile(tokensJson, configJson);
writeFileSync('.tabula/source.css', buildPresetCss(model));

`buildUtilities()`

export function buildUtilities(model: ResolvedModel): string;

周囲の import/theme/source-inline の足場なしに、@utility <class> { … } ブロックだけを、モデルのランク順で候補ごとに 1 つずつレンダリングします。各宣言は、候補の変数経由の emitted 形式を、そのリテラルの value よりも優先するため、出力される CSS はテーマ変更可能なままです。

`buildSourceInline()`

export function buildSourceInline(model: ResolvedModel): string[];

候補クラスリストを圧縮し(compressClasses())、それをレンダリングする(renderSourceInline())ことで、語彙全体をカバーする @source inline(...) 行をレンダリングします。単一の文字列ではなく行の配列として返されます。これは buildPresetCss() がそれをより大きなドキュメントへ結合する方法と一致します。

`buildChainLayer()`

export function buildChainLayer(model: ResolvedModel): string;

宣言済みのバリアントプロダクト(v0.2 のバリアント閉包の修正)を、1 つの付加された @layer utilities { … } ブロックとしてレンダリングします — model.chainCandidates の各エントリにつき 1 つのリテラル CSS ルールで、その宣言本体はベースユーティリティのものとバイト同一です(buildUtilities() と同じレンダリング経路です)。ルールはグローバルな (effectiveRank, class) 順で出力され、同じメディア条件を共有する連続したルールは 1 つの @media ブロックにまとめられるため、ドキュメント順がマージの全順序を正確に実現します。モデルがチェーンを一切宣言していない場合は空文字列を返します。チェーンのルールは意図的に @source inline には列挙されません — もしそこに列挙されていたら、Tailwind はプロファイルの (0,1,0) の形と矛盾する、標準の形をした (0,2,0) の重複を生成してしまうためです。リテラルなルールとして出力することが、構造によって正しいカスケード順序を強制する方法です。

`compressClasses()` / `expandSpec()` / `expandSpecs()` / `renderSourceInline()`

export function compressClasses(classes: readonly string[]): string[];
export function expandSpec(spec: string): string[];
export function expandSpecs(specs: readonly string[]): string[];
export function renderSourceInline(specs: readonly string[], maxLineLength?: number): string[];

このパッケージの閉包保証の土台となる @source inline スペックの合成です。compressClasses() は、最初のセグメントを共有するクラスリスト(bg-surface、bg-surface-raised → bg-{surface,surface-raised})を、より小さな Tailwind の波括弧展開スペックの集合へと畳み込みます — ソート済みなので、スペックリストはクラス集合の純粋関数です — 一方、畳み込むと安全でないもの(-m-md のような否定クラス、単一セグメントの名前)はそのまま列挙されます。expandSpec()/expandSpecs() はその厳密な逆写像で、expandSpecs(compressClasses(v)) === v(集合として)という往復性を、実際の Tailwind ビルドを介さずにテスト可能にするために特別にエクスポートされています。renderSourceInline() は、スペックリストを @source inline("…"); 行にラップし、生成されたファイル内で大きな語彙が読みやすいままであるよう maxLineLength(デフォルト 96)で改行します。

import { compressClasses, renderSourceInline } from '@tabula-css/preset';

renderSourceInline(compressClasses(['bg-surface', 'bg-surface-raised', 'p-md']));
// → ['@source inline("bg-{surface,surface-raised} p-md");']

@tabula-css/preset ​

インストール ​

概要 ​

エクスポート ​

buildPresetCss() ​

buildUtilities() ​

buildSourceInline() ​

buildChainLayer() ​

compressClasses() / expandSpec() / expandSpecs() / renderSourceInline() ​

関連パッケージ ​