概要

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacing": {
        "hsp-sm": "0.75rem",
        "vsp-md": "1.25rem"
      },
      "colors": {
        "surface": "#f4f1ec",
        "ink": "#203046"
      },
      "radii": {
        "card": "0.5rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-grid": true,
      "wind-demo-card": true,
      "wind-demo-title": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "block",
        "inline-flex",
        "rounded-card",
        "bg-surface",
        "px-hsp-sm",
        "py-vsp-md",
        "text-ink"
      ]
    }
  }
}

.wind-demo-grid { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-card { border: 1px solid #8797aa; }
.wind-demo-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; }

zudo-wind の役割

zudo-wind は zfb が提供するユーティリティ CSS 言語です。有限の集合に属する完全なクラス候補を認識し、設定されたトークンとブレークポイントを使って解決し、zfb コンパイラに CSS の生成を依頼します。言語の契約はバージョン管理されるため、別のツールが変わってもサポート範囲が暗黙に広がることはありません。

候補は、ユーティリティとして解決されるか、認識されても無効なため診断を受けるか、生成ルールを持たない通常のクラスとして残ります。完全な候補として組み立てられていないクラス名を、ビルド時に推測することはできません。zudo-wind はユーティリティプラグインを読み込まず、クラスの発見のためにプロジェクトの JavaScript を実行することもありません。

ビルド内での位置付け

ビルドは設定されたソースプランから候補を集め、生成された wind ルールと手書きのグローバル CSS を組み合わせ、CSS Modules は別の経路で処理します。ユーティリティ言語の範囲外にあるセレクタや宣言は、手書きの CSS に記述します。wind ルールは手書きのグローバルルールの後に、CSS レイヤーなしで出力されます。順序の詳細はカスケードとリセットを参照してください。

ソースの発見では、対象ファイルの内容をテキストとして読みます。アプリケーションは実行しません。build と dev で走査するファイルはソースと候補、グローバル CSS と CSS Modules はスタイリングガイドを参照してください。

最初の例

次の設定は、以降の例で使う静的でない値をすべて指定します。デフォルトのリセットは none で、パレットや余白スケールは自動追加されません。

{
  "wind": {
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "panel": "var(--app-panel)"
      },
      "radii": {
        "default": "0.5rem"
      }
    }
  }
}

同じトップレベルの wind 値を zfb.config.ts または zfb.config.json に指定します。色トークンが参照するプロジェクトのプロパティは、手書きのスタイルシートで定義できます。

:root {
  --app-panel: #f4f1ec;
}

コンポーネントでは、次の完全な候補を使えます。

<section class="rounded bg-panel p-4 text-panel">
  Welcome
</section>

rounded は radii.default、bg-panel と text-panel は colors.panel を使い、p-4 は設定された余白単位を 4 倍します。必要なトークンや単位がなければ、認識されたユーティリティには値を補う代わりにトークン不足の診断が出ます。結び付きの詳細はトークンガイドを参照してください。

バージョン管理された動作

v1 言語の値は spec: 1 です。このフィールドを省略してもバージョン 1 として扱います。コンパイラは生成ルールを zudo-wind://spec/1 として識別します。v1 は生成 CSS のソースマップを作らず、行番号の対応も保証しません。

Tailwind を使ったことがあればユーティリティ構文に見覚えがあるかもしれませんが、zudo-wind は互換性を保証しません。Tailwind からの移行を参照してください。

関連項目

• 設定

• ソースと候補

• ユーティリティリファレンス

• カスケードとリセット