# 通知設計書 17-@keyframes内@applyエラー

## 概要

本ドキュメントは、Tailwind CSSの`@apply`処理において、`@keyframes`ルール内で`@apply`が使用された場合にエラーメッセージを出力する通知の設計を記述する。

### 本通知の処理概要

CSSの`@apply`ディレクティブの代入処理（`substituteAtApply`関数）中にAST走査を行い、`@keyframes`ルール内に`@apply`ディレクティブが検出された場合にエラー例外をスローする処理である。

**業務上の目的・背景**：`@keyframes`ルール内ではユーティリティクラスの`@apply`は技術的に正しく機能しない。`@keyframes`はアニメーションのフレームを定義するためのCSSルールであり、その中にユーティリティクラスを展開すると、スコープの問題や予期しないCSS出力が発生する可能性がある。この制約を明示的なエラーとして通知することで、開発者が意図しない使用を防ぎ、CSSの品質を確保する。

**通知の送信タイミング**：CSSコンパイルの`@apply`代入フェーズにおいて、AST走査で`@keyframes`ノードの子ノードに`@apply`が検出された時点で即座にスローされる。

**通知の受信者**：CSSを記述・ビルドしている開発者。例外は上位のエラーハンドリング（CLI、PostCSSプラグイン等）でキャッチされ、コンソールに表示される。

**通知内容の概要**：`@keyframes`内で`@apply`が使用できない旨のエラーメッセージが出力される。

**期待されるアクション**：開発者は`@keyframes`ルール内の`@apply`ディレクティブを削除し、代わりに直接CSSプロパティを記述する。

## 通知種別

@applyエラー（Error例外 / throw）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（throw による例外スロー） |
| 優先度 | 高 |
| リトライ | なし |

### 送信先決定ロジック

例外のスローにより上位の処理層にエラーが伝播する。最終的な出力先は上位のエラーハンドラに依存する。

## 通知テンプレート

### メール通知の場合

該当なし（例外スローのみ）

### 本文テンプレート

```
You cannot use `@apply` inside `@keyframes`.
```

### 添付ファイル

該当なし

## テンプレート変数

該当なし（固定メッセージ）

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| コンパイル処理 | @apply代入のAST走査 | node.name === '@keyframes' かつ子ノードに @apply が存在 | apply.ts 33-37行目 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| @keyframes内に@applyが存在しない場合 | 通常のスタイルルールやプロパティのみの場合はスキップ |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[substituteAtApply開始] --> B[ASTをwalkで走査]
    B --> C{node.name === '@keyframes'?}
    C -->|No| D[他のノード処理]
    C -->|Yes| E[@keyframes子ノードを走査]
    E --> F{子ノードに@apply?}
    F -->|No| G[WalkAction.Skip]
    F -->|Yes| H["throw Error: @apply inside @keyframes"]
```

## データベース参照・更新仕様

### 参照テーブル一覧

該当なし（データベースは使用しない）

### 更新テーブル一覧

該当なし（データベースは使用しない）

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| @keyframes内@apply | @keyframesルール内に@applyが存在 | @applyを削除し直接CSSプロパティを記述 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 0 |
| リトライ間隔 | N/A |
| リトライ対象エラー | N/A（例外がスローされ処理は中断） |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | なし |
| 1日あたり上限 | なし |

### 配信時間帯

制限なし（CSSコンパイル時に随時発生）

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

固定のエラーメッセージのみであり、機密情報の漏洩リスクはない。

## 備考

- `@keyframes`ノードが検出された場合、子ノードの走査後に`WalkAction.Skip`が返され、以降の@keyframes内のノードは二重処理されない（39行目）
- このチェックはAST走査の「収集フェーズ」（29-79行目）で実行され、`@apply`の実際の代入処理（158行目以降）の前に行われる

---

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

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

### 推奨読解順序

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

ASTノードの構造と@applyの表現を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ast.ts | `packages/tailwindcss/src/ast.ts` | AstNode型（AtRule, Rule等）の定義 |
| 1-2 | apply.ts | `packages/tailwindcss/src/apply.ts` | 1-8行目: インポート文とモジュール依存関係 |

**読解のコツ**: ASTノードのkindプロパティが'at-rule'の場合、nameプロパティで`@keyframes`や`@apply`を識別する。

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

substituteAtApply関数がエントリーポイント。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | apply.ts | `packages/tailwindcss/src/apply.ts` | 10行目: substituteAtApply関数の定義 |
| 2-2 | apply.ts | `packages/tailwindcss/src/apply.ts` | 29行目: メインのwalkによるAST走査開始 |

**主要処理フロー**:
1. **17行目**: ASTをルートルール`&`でラップ
2. **29行目**: walk関数でASTを走査
3. **33行目**: `node.name === '@keyframes'`のチェック
4. **34-37行目**: @keyframes内の子ノードを走査し、@applyが見つかればthrow Error
5. **39行目**: WalkAction.Skipで@keyframes内の以降の走査をスキップ

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

```
substituteAtApply(ast, designSystem) [apply.ts:10]
    |
    +-- walk([root], callback) [apply.ts:29]
            |
            +-- [node.name === '@keyframes'] [33行目]
                    |
                    +-- walk(node.nodes, callback) [34行目]
                    |       |
                    |       +-- [child.name === '@apply'] -> throw Error [35-36行目]
                    |
                    +-- WalkAction.Skip [39行目]
```

### データフロー図

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

CSS AST          --->  substituteAtApply()
  (@keyframes内         |
   に@apply含む)        v
                   walk(AST)
                        |
                   @keyframesノード検出
                        |
                   子ノードwalk
                        |
                   @applyノード検出
                        |
                        v
                   throw Error         --->  "You cannot use `@apply`
                                              inside `@keyframes`."
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| apply.ts | `packages/tailwindcss/src/apply.ts` | ソース | @apply代入処理（substituteAtApply関数） |
| ast.ts | `packages/tailwindcss/src/ast.ts` | ソース | AST型定義（AstNode, AtRule等） |
| walk.ts | `packages/tailwindcss/src/walk.ts` | ソース | AST走査ユーティリティ（walk関数, WalkAction） |
| compile.ts | `packages/tailwindcss/src/compile.ts` | ソース | コンパイル処理（@apply処理の呼び出し元） |
