# 機能設計書 22---spacing()関数

## 概要

本ドキュメントは、Tailwind CSSにおける`--spacing()`カスタムCSS関数の仕様・処理フロー・内部構造を記述した機能設計書である。

### 本機能の処理概要

`--spacing()`関数は、テーマに定義されたspacing基準値に乗数を掛けた`calc()`式を生成するカスタムCSS関数である。`--spacing(4)`と記述すると、テーマの`--spacing`変数の値に基づき`calc(0.25rem * 4)`のような式に変換される。

**業務上の目的・背景**：Tailwind CSSのデザインシステムでは、spacing（余白・間隔）の値を一貫したスケールで管理する。`--spacing()`関数を提供することで、CSS内で動的にspacing値の計算が可能となり、テーマのspacing基準値を元にした柔軟な間隔指定ができる。

**機能の利用シーン**：カスタムCSS内でテーマのspacing値に基づく計算を行う場合（例: `width: --spacing(8)`）、カスタムユーティリティ定義内でspacing値を参照する場合、`@apply`と組み合わせてspacing値を使用する場合などで使用される。

**主要な処理内容**：
1. CSS値パーサーでCSS値文字列をパースし、`--spacing()`関数ノードを検出する
2. テーマの`--spacing`変数を`designSystem.theme.resolve(null, ['--spacing'])`で解決する
3. `calc({multiplier} * {value})`形式の文字列を生成する

**関連システム・外部連携**：DesignSystem（テーマ値の解決）、Theme（`--spacing`テーマ変数の管理）、CSS関数置換フレームワーク（substituteFunctions）と連携する。

**権限による制御**：特になし。CSS処理パイプラインの一部として自動的に実行される。

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| - | - | - | 本機能はCSS処理パイプラインの内部処理であり、特定の画面とは直接関連しない |

## 機能種別

計算処理（CSS値のcalc()式生成）

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| designSystem | DesignSystem | Yes | テーマ値の解決に使用するデザインシステム | - |
| _source | AstNode | Yes | 関数が使用されているASTノード（未使用） | - |
| value | string | Yes | 乗数値 | 空文字列でないこと |
| rest | string[] | No | 追加の引数 | 空であること（1引数のみ許可） |

### 入力データソース

CSSのAST内の宣言値から抽出される。

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| result | string | `calc({multiplier} * {value})`形式の文字列 |

### 出力先

AST上の関数ノードが生成された`calc()`式で置換される。

## 処理フロー

### 処理シーケンス

```
1. substituteFunctions内でASTを走査し--spacing()関数を検出
   └─ THEME_FUNCTION_INVOCATION正規表現でマッチ
2. spacing関数を呼び出し
   └─ 引数のバリデーション（空でないこと、1引数のみ）
3. テーマからspacing基準値を解決
   └─ designSystem.theme.resolve(null, ['--spacing'])
4. calc()式を生成
   └─ `calc(${multiplier} * ${value})`を返す
```

### フローチャート

```mermaid
flowchart TD
    A[--spacing関数呼び出し] --> B{valueが空?}
    B -->|Yes| C[エラー: 引数が必要]
    B -->|No| D{rest.length > 0?}
    D -->|Yes| E[エラー: 引数は1つのみ]
    D -->|No| F[theme.resolve で --spacing 取得]
    F --> G{multiplierが存在?}
    G -->|No| H[エラー: --spacing変数が必要]
    G -->|Yes| I["calc(multiplier * value)を返す"]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-01 | 単一引数制約 | `--spacing()`は1つの引数のみ受け取る | 常時 |
| BR-02 | 非空引数制約 | 引数は空であってはならない | 常時 |
| BR-03 | spacing変数必須 | テーマに`--spacing`変数が定義されている必要がある | 常時 |

### 計算ロジック

`calc({テーマの--spacing値} * {引数の値})`

例: `--spacing`が`0.25rem`、引数が`4`の場合 -> `calc(0.25rem * 4)`

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

本機能はデータベース操作を行わない。

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| - | Error | 引数が空 | `--spacing()`に引数を指定する |
| - | Error | 引数が2つ以上 | 引数を1つに減らす |
| - | Error | テーマに`--spacing`変数が存在しない | テーマに`--spacing`変数を定義する |

### リトライ仕様

リトライは行わない。

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

トランザクション管理は不要。

## パフォーマンス要件

特段の要件なし。単純な文字列連結処理であり、パフォーマンス上の懸念はない。

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

特段のセキュリティ考慮事項はない。

## 備考

- `--spacing()`はCSS関数置換フレームワーク（CSS_FUNCTIONS）の一部として`--theme()`、`--alpha()`と同じ仕組みで処理される
- 生成されるcalc()式はブラウザ側で計算される

---

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

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

### 推奨読解順序

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

CSS_FUNCTIONSレコードの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | css-functions.ts | `packages/tailwindcss/src/css-functions.ts` | **9-17行目**: CSS_FUNCTIONSレコード。`--spacing`キーにspacing関数がマッピングされている |

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | css-functions.ts | `packages/tailwindcss/src/css-functions.ts` | **158-183行目**: substituteFunctions関数がエントリーポイント。ASTを走査し`--spacing()`を検出する |

#### Step 3: spacing関数の実装を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | css-functions.ts | `packages/tailwindcss/src/css-functions.ts` | **42-66行目**: spacing関数の実装 |

**主要処理フロー**:
- **48-50行目**: 引数が空の場合のエラー
- **52-56行目**: 引数が複数の場合のエラー
- **58行目**: `designSystem.theme.resolve(null, ['--spacing'])`でspacing基準値を取得
- **59-63行目**: spacing基準値が見つからない場合のエラー
- **65行目**: `calc(${multiplier} * ${value})`の生成

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

```
substituteFunctions(ast, designSystem)
    │
    ├─ walk(ast, callback)
    │      │
    │      └─ substituteFunctionsInValue(value, source, designSystem)
    │             │
    │             ├─ ValueParser.parse(value)
    │             │
    │             └─ spacing(designSystem, _source, value, ...rest)
    │                    │
    │                    └─ designSystem.theme.resolve(null, ['--spacing'])
    │
    └─ Features更新
```

### データフロー図

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

CSS値文字列               ──▶ substituteFunctions            ──▶ CSS値文字列（変換済み）
"width: --spacing(4)"          │
                               ├─ --spacing(4) を検出
                               │
                               ├─ theme.resolve で
                               │    --spacing = "0.25rem" 取得
                               │
                               └─ "calc(0.25rem * 4)" に置換
                                                                  "width: calc(0.25rem * 4)"
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| css-functions.ts | `packages/tailwindcss/src/css-functions.ts` | ソース | --spacing()関数の主要実装（42-66行目） |
| design-system.ts | `packages/tailwindcss/src/design-system.ts` | ソース | DesignSystemインタフェース |
| theme.ts | `packages/tailwindcss/src/theme.ts` | ソース | テーマ値の管理・resolveメソッド |
| value-parser.ts | `packages/tailwindcss/src/value-parser.ts` | ソース | CSS値のパーサー |
| segment.ts | `packages/tailwindcss/src/utils/segment.ts` | ソース | 文字列分割ユーティリティ |
| walk.ts | `packages/tailwindcss/src/walk.ts` | ソース | AST走査ユーティリティ |
