# 機能設計書 18-候補の正規化（canonicalizeCandidates）

## 概要

本ドキュメントは、候補クラス名を正規化するcanonicalizeCandidates関数の設計について記述する。rem→px変換・任意値のテーマ変数化・ショートハンドの展開等、一貫した表現への変換を行う。

### 本機能の処理概要

canonicalizeCandidates関数は、ユーティリティクラス名のリストを受け取り、正規化（canonical化）されたクラス名のリストを返す。同じCSSを生成する異なるクラス名を統一的な表現に変換する。

**業務上の目的・背景**：Tailwind CSSでは同じスタイルを複数の方法で表現できる（例: `mt-[16px]` と `mt-4`、`mr-2 ml-2` と `mx-2`）。コードの一貫性を保ち、冗長なクラスを検出するために、これらの異なる表現を標準的な形式に正規化する必要がある。この機能はPrettierプラグインやESLintプラグイン等のツールで活用される。

**機能の利用シーン**：Prettierプラグインでクラス名の正規化・重複排除を行う際、ESLintプラグインで非標準的なクラス名を検出する際、IDE拡張でクラス名の自動修正を行う際に使用される。

**主要な処理内容**：
1. DesignSystemのストレージにキャッシュを初期化する（prepareDesignSystemStorage）
2. SignatureOptionsの生成（rem値、collapse、logicalToPhysical等のオプション設定）
3. 各候補クラスの正規化: arbitrary値のテーマ変数化、rem→px変換、spacing倍率変換
4. ユーティリティの折り畳み（collapse）: `mt-2 mr-2 mb-2 ml-2` → `m-2` のような変換
5. バリアントの正規化
6. ユーティリティシグネチャによるプロパティ等価性の判定

**関連システム・外部連携**：DesignSystem（design-system.ts）を通じてUtilities・Theme・Variantsを参照する。Prettierプラグイン（@tailwindcss/prettier-plugin）から使用される。

**権限による制御**：権限による制御は存在しない。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 画面機能マッピングに直接の関連画面なし。ツールチェーン向けのユーティリティ機能 |

## 機能種別

データ変換処理 / 最適化処理

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| baseDesignSystem | DesignSystem | Yes | デザインシステムオブジェクト | - |
| candidates | string[] | Yes | 正規化対象の候補クラス名配列 | - |
| options | CanonicalizeOptions | No | 正規化オプション | - |
| options.rem | number | No | ルートフォントサイズ（px）。rem→px変換に使用 | 正の数 |
| options.collapse | boolean | No | 複数ユーティリティの折り畳みを有効化 | - |
| options.logicalToPhysical | boolean | No | 論理プロパティから物理プロパティへの変換を有効化 | - |

### 入力データソース

- HTML/JSXテンプレートから抽出されたクラス名
- Prettierプラグイン等のツールからの入力

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| result | string[] | 正規化されたクラス名の配列（重複除去済み） |

### 出力先

- 呼び出し元のツール（Prettierプラグイン等）に返される

## 処理フロー

### 処理シーケンス

```
1. DesignSystem ストレージの初期化
   └─ prepareDesignSystemStorage で各種キャッシュを設定

2. オプションの解決
   ├─ createSignatureOptions(rem, features)
   └─ createCanonicalizeOptions(signatureOptions, options)

3. 各候補クラスの正規化（キャッシュ付き）
   ├─ canonical候補キャッシュを参照
   ├─ キャッシュミス時に正規化処理を実行
   └─ Set で重複除去

4. 折り畳み処理（collapse オプション有効時）
   ├─ バリアント+重要フラグでグループ化
   ├─ 各グループ内で collapseCandidates を実行
   │   ├─ 各候補のプロパティ・値を計算
   │   ├─ プロパティの共通性で候補をリンク
   │   └─ より簡潔な候補への置換を試行
   └─ 結果を返す
```

### フローチャート

```mermaid
flowchart TD
    A["candidates[] 入力"] --> B["prepareDesignSystemStorage"]
    B --> C["各候補をキャッシュで正規化"]
    C --> D["Set で重複除去"]
    D --> E{collapse有効?}
    E -->|No| F["結果を返す"]
    E -->|Yes| G["バリアント+importantでグループ化"]
    G --> H["各グループで collapseCandidates"]
    H --> I["プロパティ・値の計算"]
    I --> J["候補のリンク（共通プロパティ）"]
    J --> K["簡潔な候補への置換"]
    K --> F
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-18-01 | rem→px変換 | options.rem が指定された場合、arbitrary値のrem値をpx値に変換してテーマ値と照合する | rem オプション指定時 |
| BR-18-02 | テーマ変数化 | arbitrary値がテーマ変数の値と一致する場合、名前付き値に変換する（例: `bg-[#0088cc]` → `bg-blue-500`） | 常時 |
| BR-18-03 | collapse | collapse が有効な場合、同じプロパティを設定する複数ユーティリティを1つのショートハンドに折り畳む | collapse オプション有効時 |
| BR-18-04 | logicalToPhysical | 論理プロパティ（ms, me）と物理プロパティ（ml, mr）の変換を許可する | logicalToPhysical オプション有効時 |
| BR-18-05 | シグネチャベース判定 | ユーティリティの等価性はプロパティと値のシグネチャで判定する | collapse処理時 |
| BR-18-06 | キャッシュ活用 | 正規化結果はDesignSystemのstorageにキャッシュされ、再利用される | 常時 |

### 計算ロジック

折り畳みロジック: 各候補のCSSプロパティと値を計算し、プロパティの交差集合でリンクを構築する。リンクされた候補グループに対して、全プロパティをカバーする最小の候補セットを探索する。シグネチャが一致する候補のみが折り畳み対象となる。

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

本機能はデータベースを使用しない。キャッシュはインメモリのDefaultMapで管理される。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | - | 正規化できない候補はそのまま返される | エラーは発生しない |

### リトライ仕様

リトライ処理は存在しない。

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

トランザクション管理は存在しない。

## パフォーマンス要件

- DefaultMapによるキャッシュで再計算を回避
- collapseCandidatesの組み合わせ探索は候補数に依存するが、リンクによる枝刈りで効率化

## セキュリティ考慮事項

外部入力のクラス名を処理するが、CSS仕様の範囲内で処理される。

## 備考

- canonicalize-candidates.ts は大規模なファイルであり、多数のキャッシュとヘルパー関数を含む
- SignatureOptions はrem値とfeatureフラグを持つ不変オブジェクトで、キャッシュのキーとして使用される
- Symbolキーによるストレージ管理で、複数のキャッシュが衝突なく共存する

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

正規化のオプションとストレージの構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | canonicalize-candidates.ts | `packages/tailwindcss/src/canonicalize-candidates.ts` | CanonicalizeOptions インターフェース（31-54行目）。rem / collapse / logicalToPhysical の各オプション |
| 1-2 | canonicalize-candidates.ts | `packages/tailwindcss/src/canonicalize-candidates.ts` | DesignSystem ストレージ拡張（74-108行目）。Symbol キーによる各種キャッシュの定義 |

**読解のコツ**: TypeScript の Symbol キーによるストレージパターンが使用されている。各キャッシュは DefaultMap のネストで構成され、自動生成されるデフォルト値がキャッシュの初期化を担う。

#### Step 2: エントリーポイントを理解する

canonicalizeCandidates関数のメインフローを把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | canonicalize-candidates.ts | `packages/tailwindcss/src/canonicalize-candidates.ts` | canonicalizeCandidates関数（179-198行目）。オプション解決、キャッシュ参照、collapse判定 |
| 2-2 | canonicalize-candidates.ts | `packages/tailwindcss/src/canonicalize-candidates.ts` | prepareDesignSystemStorage関数（110-131行目）。各種キャッシュの初期化 |

**主要処理フロー**:
1. **184行目**: createSignatureOptions でオプションを解決
2. **185行目**: createCanonicalizeOptions で内部オプションを生成
3. **187行目**: prepareDesignSystemStorage でキャッシュを初期化
4. **190-193行目**: キャッシュ経由で各候補を正規化
5. **195-197行目**: collapse有効時は collapseCandidates を呼び出し

#### Step 3: 折り畳み処理を理解する

collapseCandidates の実装を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | canonicalize-candidates.ts | `packages/tailwindcss/src/canonicalize-candidates.ts` | collapseCandidates関数（200行目以降）。グループ化、リンク構築、組み合わせ探索 |

### プログラム呼び出し階層図

```
canonicalizeCandidates(baseDesignSystem, candidates, options)
    │
    ├─ createSignatureOptions(baseDesignSystem, options)
    │      └─ prepareDesignSystemStorage(baseDesignSystem, options)
    │
    ├─ createCanonicalizeOptions(baseDesignSystem, signatureOptions, options)
    │
    ├─ cache.get(candidate) × N  [キャッシュ付き正規化]
    │
    └─ collapseCandidates(options, candidates) [collapse有効時]
           ├─ segment(candidate, ':') でグループ化
           ├─ computeUtilitiesPropertiesLookup で プロパティ計算
           ├─ staticUtilities でリンク構築
           └─ combinations() で組み合わせ探索
```

### データフロー図

```
[入力]                          [処理]                           [出力]

["mt-[16px]",            ───▶ 正規化処理                 ───▶ ["mt-4",
 "mr-2", "ml-2"]               rem→px変換                       "mx-2"]
                                テーマ変数化
                                collapse
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| canonicalize-candidates.ts | `packages/tailwindcss/src/canonicalize-candidates.ts` | ソース | canonicalizeCandidates関数の本体 |
| design-system.ts | `packages/tailwindcss/src/design-system.ts` | ソース | DesignSystem型。storageプロパティ |
| candidate.ts | `packages/tailwindcss/src/candidate.ts` | ソース | Candidate型。cloneCandidate関数 |
| theme.ts | `packages/tailwindcss/src/theme.ts` | ソース | テーマ値の参照（テーマ変数化に使用） |
| constant-fold-declaration.ts | `packages/tailwindcss/src/constant-fold-declaration.ts` | ソース | calc()式の定数畳み込み |
| expand-declaration.ts | `packages/tailwindcss/src/expand-declaration.ts` | ソース | CSS省略プロパティの展開 |
| default-map.ts | `packages/tailwindcss/src/utils/default-map.ts` | ソース | DefaultMap - キャッシュのストレージ |
| selector-parser.ts | `packages/tailwindcss/src/selector-parser.ts` | ソース | セレクタのパース（バリアント正規化に使用） |
| attribute-selector-parser.ts | `packages/tailwindcss/src/attribute-selector-parser.ts` | ソース | 属性セレクタの解析 |
