# アーキテクチャ構成図

## システム全体構成図

```mermaid
graph TB
    subgraph "Integration Layer（統合層）"
        VITE["@tailwindcss/vite<br/>Vite Plugin"]
        POSTCSS["@tailwindcss/postcss<br/>PostCSS Plugin"]
        CLI["@tailwindcss/cli<br/>CLI Tool"]
        WEBPACK["@tailwindcss/webpack<br/>webpack Loader"]
        BROWSER["@tailwindcss/browser<br/>Browser Bundle"]
        STANDALONE["@tailwindcss/standalone<br/>Standalone CLI"]
    end

    subgraph "Node Adapter Layer（Node アダプタ層）"
        NODE["@tailwindcss/node"]
        NODE_COMPILE["compile.ts<br/>モジュール解決ラッパー"]
        NODE_OPTIMIZE["optimize.ts<br/>Lightning CSS 最適化"]
        NODE_URLS["urls.ts<br/>URL リライト"]
    end

    subgraph "Core Engine Layer（コアエンジン層）"
        CORE["tailwindcss"]
        INDEX["index.ts<br/>compile / compileAst"]
        PARSECSS["parseCss<br/>CSS 解析・構造化"]
        COMPILE["compile.ts<br/>候補コンパイラ"]
        DS["design-system.ts<br/>DesignSystem"]
        AST["ast.ts<br/>CSS AST"]
        CSSPARSER["css-parser.ts<br/>CSS パーサー"]
        CANDIDATE["candidate.ts<br/>候補パーサー"]
        UTILITIES["utilities.ts<br/>ユーティリティ定義"]
        VARIANTS["variants.ts<br/>バリアント定義"]
        THEME["theme.ts<br/>テーマ管理"]
        CSSFUNC["css-functions.ts<br/>CSS 関数解決"]
        APPLY["apply.ts<br/>@apply 処理"]
        ATIMPORT["at-import.ts<br/>@import 処理"]
        WALK["walk.ts<br/>AST 走査"]
        INTELLISENSE["intellisense.ts<br/>IntelliSense API"]
    end

    subgraph "Compatibility Layer（互換性層）"
        COMPAT["compat/"]
        COMPAT_HOOKS["apply-compat-hooks.ts"]
        PLUGIN_API["plugin-api.ts"]
        CONFIG["config/"]
    end

    subgraph "Scanner Layer（スキャナー層 - Rust）"
        OXIDE_NPM["@tailwindcss/oxide<br/>npm パッケージ"]
        OXIDE_NAPI["crates/node<br/>N-API バインディング"]
        OXIDE_CORE["crates/oxide<br/>tailwindcss-oxide"]
        SCANNER["scanner/<br/>ファイルスキャナー"]
        EXTRACTOR["extractor/<br/>候補文字列抽出器"]
        GLOB["glob.rs<br/>Glob マッチ"]
    end

    subgraph "External Dependencies（外部依存）"
        LCSS["Lightning CSS"]
        RESOLVE["enhanced-resolve"]
        JITI["jiti"]
        PARCEL["@parcel/watcher"]
    end

    %% Integration -> Node Adapter
    VITE --> NODE
    POSTCSS --> NODE
    CLI --> NODE
    WEBPACK --> NODE
    STANDALONE --> CLI

    %% Integration -> Scanner
    VITE --> OXIDE_NPM
    POSTCSS --> OXIDE_NPM
    CLI --> OXIDE_NPM
    WEBPACK --> OXIDE_NPM

    %% Integration -> Core (direct)
    VITE --> CORE
    POSTCSS --> CORE
    BROWSER --> CORE

    %% Node Adapter internal
    NODE --> NODE_COMPILE
    NODE --> NODE_OPTIMIZE
    NODE --> NODE_URLS

    %% Node Adapter -> Core
    NODE_COMPILE --> INDEX

    %% Node Adapter -> External
    NODE_OPTIMIZE --> LCSS
    NODE_COMPILE --> RESOLVE
    NODE_COMPILE --> JITI
    CLI --> PARCEL

    %% Core internal
    INDEX --> PARSECSS
    INDEX --> COMPILE
    PARSECSS --> CSSPARSER
    PARSECSS --> ATIMPORT
    PARSECSS --> DS
    PARSECSS --> COMPAT_HOOKS
    PARSECSS --> CSSFUNC
    PARSECSS --> APPLY
    DS --> THEME
    DS --> UTILITIES
    DS --> VARIANTS
    DS --> CANDIDATE
    DS --> COMPILE
    COMPILE --> CANDIDATE
    COMPILE --> UTILITIES
    COMPILE --> VARIANTS
    COMPILE --> WALK

    %% Compat
    COMPAT --> COMPAT_HOOKS
    COMPAT --> PLUGIN_API
    COMPAT --> CONFIG

    %% Scanner internal
    OXIDE_NPM --> OXIDE_NAPI
    OXIDE_NAPI --> OXIDE_CORE
    OXIDE_CORE --> SCANNER
    OXIDE_CORE --> EXTRACTOR
    OXIDE_CORE --> GLOB
```

## CSS コンパイルパイプライン

```mermaid
flowchart LR
    INPUT["CSS 入力<br/>(@tailwind utilities,<br/>@theme, @import 等)"]
    PARSE["CSS パース<br/>css-parser.ts"]
    IMPORT["@import 解決<br/>at-import.ts"]
    ANALYZE["AST 解析<br/>@theme, @utility,<br/>@custom-variant 収集"]
    BUILD_DS["DesignSystem 構築<br/>design-system.ts"]
    COMPAT["互換性フック<br/>@plugin/@config 処理"]
    FUNC["CSS 関数解決<br/>theme(), --spacing()"]
    VARIANT_SUB["@variant 置換"]
    APPLY_SUB["@apply 置換"]
    SCAN["ソースファイルスキャン<br/>Oxide Scanner (Rust)"]
    COMPILE_CAND["候補コンパイル<br/>compile.ts"]
    OPTIMIZE_AST["AST 最適化<br/>ポリフィル挿入"]
    TO_CSS["CSS 出力<br/>toCss()"]
    POST_OPT["後最適化<br/>Lightning CSS"]
    OUTPUT["最終 CSS 出力"]

    INPUT --> PARSE --> IMPORT --> ANALYZE --> BUILD_DS --> COMPAT
    COMPAT --> FUNC --> VARIANT_SUB --> APPLY_SUB
    SCAN --> COMPILE_CAND
    APPLY_SUB --> COMPILE_CAND --> OPTIMIZE_AST --> TO_CSS --> POST_OPT --> OUTPUT
```

## パッケージ依存関係図

```mermaid
graph TD
    VITE["@tailwindcss/vite"]
    POSTCSS["@tailwindcss/postcss"]
    CLI["@tailwindcss/cli"]
    WEBPACK["@tailwindcss/webpack"]
    STANDALONE["@tailwindcss/standalone"]
    BROWSER["@tailwindcss/browser"]
    UPGRADE["@tailwindcss/upgrade"]
    NODE["@tailwindcss/node"]
    OXIDE["@tailwindcss/oxide"]
    CORE["tailwindcss"]

    VITE --> NODE
    VITE --> OXIDE
    VITE --> CORE

    POSTCSS --> NODE
    POSTCSS --> OXIDE
    POSTCSS --> CORE

    CLI --> NODE
    CLI --> OXIDE
    CLI --> CORE

    WEBPACK --> NODE
    WEBPACK --> OXIDE
    WEBPACK --> CORE

    STANDALONE --> CLI
    STANDALONE --> CORE

    BROWSER --> CORE

    UPGRADE --> NODE
    UPGRADE --> OXIDE
    UPGRADE --> CORE

    NODE --> CORE

    CORE -.->|devDependency| OXIDE
```

## Rust クレート構成図

```mermaid
graph TD
    subgraph "crates/"
        NODE_CRATE["node<br/>(N-API バインディング)"]
        OXIDE_CRATE["oxide<br/>(tailwindcss-oxide)"]
        CLASSIFICATION["classification-macros<br/>(Rust マクロ)"]
        IGNORE_CRATE["ignore<br/>(gitignore 互換)"]
    end

    subgraph "oxide 内部モジュール"
        SCANNER_MOD["scanner/<br/>ファイルスキャナー"]
        EXTRACTOR_MOD["extractor/<br/>候補抽出<br/>(ステートマシン)"]
        GLOB_MOD["glob.rs<br/>パターンマッチ"]
        CURSOR_MOD["cursor.rs<br/>テキストカーソル"]
        FAST_SKIP_MOD["fast_skip.rs<br/>高速スキップ"]
    end

    subgraph "extractor ステートマシン"
        CANDIDATE_M["candidate_machine.rs"]
        UTILITY_M["utility_machine.rs"]
        VARIANT_M["variant_machine.rs"]
        NAMED_UTIL_M["named_utility_machine.rs"]
        NAMED_VAR_M["named_variant_machine.rs"]
        ARB_PROP_M["arbitrary_property_machine.rs"]
        ARB_VAL_M["arbitrary_value_machine.rs"]
        ARB_VAR_M["arbitrary_variable_machine.rs"]
    end

    NODE_CRATE --> OXIDE_CRATE
    OXIDE_CRATE --> CLASSIFICATION
    OXIDE_CRATE --> IGNORE_CRATE
    OXIDE_CRATE --> SCANNER_MOD
    OXIDE_CRATE --> EXTRACTOR_MOD
    OXIDE_CRATE --> GLOB_MOD
    OXIDE_CRATE --> CURSOR_MOD
    OXIDE_CRATE --> FAST_SKIP_MOD
    EXTRACTOR_MOD --> CANDIDATE_M
    EXTRACTOR_MOD --> UTILITY_M
    EXTRACTOR_MOD --> VARIANT_M
    EXTRACTOR_MOD --> NAMED_UTIL_M
    EXTRACTOR_MOD --> NAMED_VAR_M
    EXTRACTOR_MOD --> ARB_PROP_M
    EXTRACTOR_MOD --> ARB_VAL_M
    EXTRACTOR_MOD --> ARB_VAR_M
```

## コアエンジン内部モジュール関係図

```mermaid
graph TD
    subgraph "packages/tailwindcss/src/"
        INDEX_TS["index.ts<br/>compile() / compileAst()"]
        COMPILE_TS["compile.ts<br/>compileCandidates()"]
        DS_TS["design-system.ts<br/>buildDesignSystem()"]
        AST_TS["ast.ts<br/>AstNode 型定義"]
        CSS_PARSER_TS["css-parser.ts<br/>parse()"]
        CANDIDATE_TS["candidate.ts<br/>parseCandidate()"]
        UTILITIES_TS["utilities.ts<br/>createUtilities()"]
        VARIANTS_TS["variants.ts<br/>createVariants()"]
        THEME_TS["theme.ts<br/>Theme クラス"]
        WALK_TS["walk.ts<br/>walk()"]
        CSS_FUNC_TS["css-functions.ts<br/>substituteFunctions()"]
        APPLY_TS["apply.ts<br/>substituteAtApply()"]
        AT_IMPORT_TS["at-import.ts<br/>substituteAtImports()"]
        INTELLISENSE_TS["intellisense.ts"]
        SORT_TS["sort.ts"]
        PLUGIN_TS["plugin.ts"]
        SOURCEMAPS["source-maps/"]
    end

    INDEX_TS --> CSS_PARSER_TS
    INDEX_TS --> AT_IMPORT_TS
    INDEX_TS --> DS_TS
    INDEX_TS --> COMPILE_TS
    INDEX_TS --> CSS_FUNC_TS
    INDEX_TS --> APPLY_TS
    INDEX_TS --> VARIANTS_TS
    INDEX_TS --> UTILITIES_TS
    INDEX_TS --> AST_TS
    INDEX_TS --> WALK_TS
    INDEX_TS --> THEME_TS
    INDEX_TS --> SOURCEMAPS

    DS_TS --> THEME_TS
    DS_TS --> UTILITIES_TS
    DS_TS --> VARIANTS_TS
    DS_TS --> CANDIDATE_TS
    DS_TS --> COMPILE_TS
    DS_TS --> CSS_FUNC_TS
    DS_TS --> INTELLISENSE_TS
    DS_TS --> SORT_TS

    COMPILE_TS --> CANDIDATE_TS
    COMPILE_TS --> UTILITIES_TS
    COMPILE_TS --> VARIANTS_TS
    COMPILE_TS --> AST_TS
    COMPILE_TS --> WALK_TS

    AT_IMPORT_TS --> CSS_PARSER_TS
    AT_IMPORT_TS --> AST_TS

    APPLY_TS --> COMPILE_TS
    APPLY_TS --> AST_TS
    APPLY_TS --> WALK_TS

    CSS_FUNC_TS --> WALK_TS
    VARIANTS_TS --> AST_TS
    VARIANTS_TS --> WALK_TS
    UTILITIES_TS --> AST_TS
```
