# バッチ設計書 7-@tailwindcss/cli build

## 概要

本ドキュメントは、Tailwind CSSプロジェクトにおけるCLIバッチ `@tailwindcss/cli build` のバッチ設計書である。入力CSSファイルからTailwind CSSをコンパイルし、出力ファイルを生成する処理の仕様を定義する。

### 本バッチの処理概要

本バッチは、Tailwind CSS CLIの `build` コマンドとして動作し、入力CSSファイルを解析してTailwind CSSのユーティリティクラスを含む完全なCSSファイルを出力する。`--watch` オプションによるファイル監視モードも提供する。

**業務上の目的・背景**：Tailwind CSSはユーティリティファーストのCSSフレームワークであり、ソースコード中のクラス名を検出してCSSを生成する。本CLIバッチは、ビルドツール（Vite/PostCSS等）を使わない環境やCI/CDパイプラインで、CSSのコンパイルを実行するための主要なインターフェースである。`tailwindcss` コマンドとして実行される。

**バッチの実行タイミング**：開発時は `--watch` モードで常時実行される。本番ビルド時は単発実行される。CI/CDパイプラインからも呼び出される。

**主要な処理内容**：
1. コマンドライン引数を解析し、入力ファイル・出力ファイル・各種オプションを取得する
2. 入力CSSファイル（未指定時は `@import 'tailwindcss'` がデフォルト）を読み込む
3. `@tailwindcss/node` の `compile` 関数でコンパイラを初期化する
4. `@tailwindcss/oxide` の `Scanner` でソースファイルを走査し、使用されているクラス候補を検出する
5. コンパイラでCSSをビルドする
6. `--minify`/`--optimize` オプションに応じてCSSを最適化する
7. `--map` オプションに応じてソースマップを生成する
8. 出力ファイルまたは標準出力に書き出す
9. `--watch` モードでは、ファイル変更を監視してインクリメンタルまたはフルリビルドを行う

**前後の処理との関連**：独立したCLIツールとして動作する。ビルドツールチェーンの一部として利用される場合もある。`@tailwindcss/node` と `@tailwindcss/oxide` に依存する。

**影響範囲**：指定された出力ファイルにCSSが書き出される。入力ファイルやソースコードには変更を加えない。

## バッチ種別

CSSビルド / コンパイル処理

## 実行スケジュール

| 項目 | 内容 |
|-----|------|
| 実行頻度 | 随時（開発時は常時、ビルド時は単発） |
| 実行時刻 | N/A |
| 実行曜日 | N/A |
| 実行日 | N/A |
| トリガー | 手動実行（`tailwindcss build` コマンド） |

## 実行条件

### 前提条件

| 条件 | 説明 |
|-----|------|
| @tailwindcss/cliパッケージ | パッケージがインストールされていること |
| @tailwindcss/nodeパッケージ | コンパイラ依存パッケージが利用可能であること |
| @tailwindcss/oxideパッケージ | スキャナー依存パッケージ（ネイティブバイナリ）が利用可能であること |
| 入力CSSファイル | `--input` で指定するファイルが存在すること（未指定時はデフォルトCSS使用） |

### 実行可否判定

- 入力ファイルが `--input` で指定されている場合、ファイルの存在チェックを行い、存在しない場合はエラー終了する
- 入力ファイルと出力ファイルが同一パスの場合はエラー終了する

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | デフォルト値 | 説明 |
|-------------|-----|-----|-------------|------|
| --input (-i) | string | No | `@import 'tailwindcss'` | 入力CSSファイルパス。`-`で標準入力 |
| --output (-o) | string | No | `-`（標準出力） | 出力CSSファイルパス。`-`で標準出力 |
| --watch (-w) | boolean/string | No | false | ファイル監視モード。`always`で常時監視 |
| --minify (-m) | boolean | No | false | 出力CSSの最小化（圧縮） |
| --optimize | boolean | No | false | 出力CSSの最適化（圧縮なし） |
| --cwd | string | No | `.`（カレントディレクトリ） | 作業ディレクトリ |
| --map | boolean/string | No | false | ソースマップの生成。trueでインライン、パス指定で外部ファイル |

### 入力データソース

| データソース | 形式 | 説明 |
|-------------|------|------|
| 入力CSSファイル | CSS | Tailwindディレクティブを含むCSSファイル |
| プロジェクトソースファイル | HTML/JS/TSX等 | クラス名の候補をスキャンする対象ファイル |

## 出力仕様

### 出力データ

| 出力先 | 形式 | 説明 |
|-------|------|------|
| 出力CSSファイルまたは標準出力 | CSS | コンパイル済みTailwind CSS |
| ソースマップファイル（オプション） | JSON | CSSソースマップ |

### 出力ファイル仕様

| 項目 | 内容 |
|-----|------|
| ファイル名 | `--output` で指定 |
| 出力先 | `--output` で指定されたパス |
| 文字コード | UTF-8 |
| フォーマット | CSS（`--minify`時は圧縮済み） |

## 処理フロー

### 処理シーケンス

```
1. 引数解析
   └─ --input, --output, --watch, --minify, --optimize, --cwd, --map を解析
2. パス解決
   └─ 入力ファイル・出力ファイルのパスを絶対パスに解決
3. 入力検証
   └─ 入力ファイルの存在チェック、入出力パスの同一チェック
4. 入力CSS読み込み
   └─ ファイル/標準入力/デフォルトCSS から入力CSSを取得
5. コンパイラ初期化
   └─ compile関数でTailwind CSSコンパイラを作成
6. スキャナー初期化
   └─ Scannerでソースファイルの走査設定を構築
7. 候補スキャン
   └─ ソースファイルからクラス名候補を検出
8. CSSビルド
   └─ コンパイラで候補からCSSを生成
9. 最適化（オプション）
   └─ --minify/--optimize に応じてCSSを最適化
10. ソースマップ生成（オプション）
    └─ --map に応じてソースマップを生成（インラインまたは外部ファイル）
11. 出力
    └─ ファイルまたは標準出力に書き出し
12. 監視モード（オプション）
    └─ --watch 時はParcel Watcherでファイル変更を監視し、インクリメンタル/フルリビルドを実行
```

### フローチャート

```mermaid
flowchart TD
    A[バッチ開始] --> B[引数解析・パス解決]
    B --> C{入力ファイル存在?}
    C -->|なし| D[エラー終了]
    C -->|あり/デフォルト| E[入力CSS読み込み]
    E --> F[コンパイラ・スキャナー初期化]
    F --> G[ソースファイルからクラス候補をスキャン]
    G --> H[CSSビルド]
    H --> I{最適化オプション?}
    I -->|あり| J[CSS最適化]
    I -->|なし| K[出力処理]
    J --> K
    K --> L{--watch モード?}
    L -->|はい| M[ファイル監視を開始]
    L -->|いいえ| N[バッチ終了]
    M --> O{ファイル変更検出}
    O --> P{フルリビルド必要?}
    P -->|はい| Q[コンパイラ再初期化・フルスキャン]
    P -->|いいえ| R[変更ファイルのみインクリメンタルスキャン]
    Q --> H
    R --> S{新しい候補あり?}
    S -->|あり| H
    S -->|なし| O
```

## データベース操作仕様

### 操作別データベース影響一覧

本バッチではデータベース操作は行わない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | 入力ファイル不存在 | --inputで指定したファイルが存在しない | ファイルパスを確認して修正 |
| - | 入出力パス同一 | --inputと--outputが同じパス | 別のパスを指定 |
| - | --map不正使用 | --map - と指定した場合 | --mapを値なしで使用（インライン） |
| - | コンパイルエラー | CSS構文エラー等 | エラーメッセージを確認して修正。watchモードでは処理を継続 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | なし（watchモードでは自動的に次の変更で再試行） |
| リトライ間隔 | N/A |
| リトライ対象エラー | N/A |

### 障害時対応

watchモードでは、コンパイルエラーが発生してもプロセスは終了せず、エラーメッセージをstderrに出力して監視を継続する。単発実行時はprocess.exit(1)で終了する。

## トランザクション仕様

| 項目 | 内容 |
|-----|------|
| トランザクション範囲 | N/A |
| コミットタイミング | N/A |
| ロールバック条件 | N/A |

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定処理件数 | プロジェクトのソースファイル数に依存 |
| 目標処理時間 | 初回ビルド：数秒以内、インクリメンタルビルド：数百ミリ秒以内 |
| メモリ使用量上限 | 特に定めなし |

## 排他制御

同時実行は想定しない。watchモードでは、出力ファイルへの変更を検出した場合はリビルドをスキップして無限ループを防止する。デバウンス処理により、短時間の連続変更は1回のリビルドにまとめられる。

## ログ出力

| ログ種別 | 出力タイミング | 出力内容 |
|---------|--------------|---------|
| ヘッダー | バッチ開始時 | Tailwind CSSのバージョン情報（stderr） |
| 完了ログ | ビルド完了時 | "Done in {duration}"（stderr） |
| エラーログ | エラー発生時 | エラーメッセージ（stderr） |
| デバッグログ | DEBUG=true時 | 各処理ステップの計測時間（Instrumentationクラス） |

## 監視・アラート

| 監視項目 | 閾値 | アラート先 |
|---------|-----|----------|
| 特に定めなし | - | - |

## 備考

- `tailwindcss` コマンドとして実行される（package.jsonのbin設定）
- 入力ファイル未指定時は `@import 'tailwindcss'` がデフォルトの入力CSSとして使用される
- watchモードでは `@parcel/watcher` を使用してファイルシステムの変更を監視する
- インクリメンタルリビルドでは、変更されたファイルのみをスキャンし、新しいクラス候補が見つかった場合のみCSSを再ビルドする
- フルリビルドは、入力CSSファイルやJS設定/プラグインファイルが変更された場合にトリガーされる
- `--watch=always` を指定すると、stdinが閉じられてもプロセスが終了しない（デフォルトではstdinの終了でプロセスが終了する）
- ソースマップはインライン（`--map`）または外部ファイル（`--map {path}`）で出力可能
- `compiler.root` の値に応じてソースの自動検出を制御できる（`none`で無効化）
