build(deps-dev): Bump vite from 7.x to 8.x and upgrade related libs (#3305)

[KATO-Hiro]

close #3305

アップグレード時の調査内容を備忘録として残しておく
理由: plan.md は参照されない可能性が高いので、PR とセットとすることで後から検索しやすくするため

背景：なぜ Rolldown/Oxc に移行するのか

dev/prod の分裂問題

Vite 7 以前は dev と prod で異なるバンドラーを使っていた：

dev サーバー  → esbuild（Go製）：高速だが Rollup と動作が異なる
本番ビルド   → Rollup（JS製）：バンドル品質は高いが遅い

2 つの異なるバンドラーが同居していたため「dev では動くが prod でクラッシュ」という再現困難なバグが構造的に発生していた。Vite 8 はこれを Rolldown で一本化することで解消する。

VoidZero エコシステム

Rolldown と Oxc はどちらも VoidZero（Evan You が設立）が開発している Rust 製ツールチェーン：

VoidZero
├── Oxc    — JS ツールチェーンのコア（パーサー・トランスパイラー・ミニファイアー・oxlint・oxfmt）
├── Rolldown — Oxc の上に乗る Rust 製バンドラー（Rollup 後継）
└── Vite   — Rolldown + Oxc transformer/minifier を dev/prod 両方で採用

oxlint（ESLint 互換リンター）や oxfmt（フォーマッター）も同じ Oxc モノレポに属し、同一のパーサーと AST を共有している。Vite 8 に乗ることは「Oxc エコシステムの土台に立つ」ことを意味し、各ツールは独立して・好きなタイミングで追加移行できる。

エコシステム一元化のメリット・デメリット

メリット

項目	内容
dev/prod の動作一致	同一バンドラー（Rolldown）を使うことで prod 限定バグが原理的になくなる
一貫した高速化	全ツールが Rust 製。ビルド・lint・フォーマットがまとめて速くなる
段階移行が可能	oxlint・oxfmt は ESLint/Prettier と互換性を持たせた設計で、一括移行不要
統一されたコア	全ツールが同じ AST を共有するため、パース結果のずれによる不整合が起きにくい

デメリット・リスク

項目	内容
単一障害点	VoidZero 1 社への依存度が高まる。組織・方針変更の影響を受けやすい
成熟度	Rolldown/Oxc はまだ新しく、Rollup/esbuild に比べてエッジケースのバグが潜在する可能性がある
プラグインエコシステム	Rollup プラグインの一部は Rolldown で未対応（本プロジェクトはカスタムプラグイン未使用のため影響なし）
ロックイン	将来 Oxc スタックで標準化するほど、他のツールチェーンへの乗り換えコストが上がる

---

注意事項：バンドルサイズの増加

Vite 7 → 8 のアップグレードにより、クライアントバンドルのサイズが増加している。

	Vite 7	Vite 8	差分
最大 JS chunk	345.7 kB / 91.9 kB gzip	637.8 kB / 162.4 kB gzip	+70.5 kB gzip
CSS	300.1 kB / 37.6 kB gzip	290.4 kB / 37.1 kB gzip	ほぼ同じ
合計 (gzip)	332.1 kB	407.4 kB	+75.3 kB (+22.7%)

原因: Rolldown の chunk splitting アルゴリズムが Rollup と異なるため。Vite 8.x の成熟とともに改善が期待される。

判断: 許容する。Rolldown が安定するにつれ自然に解消される可能性が高く、dev/prod 動作一致などのメリットが上回る。

---

[coderabbitai]

📝 Walkthrough

Walkthrough

Vite 7.3.1 から 8.0.1 へメジャーアップグレードし、Svelte plugin、Vitest 関連パッケージを更新。Tailwind CSS を PostCSS プラグインから Vite プラグインに移行。設計計画を文書化。

Changes

Cohort / File(s)	Summary
計画ドキュメント docs/dev-notes/2026-03-23/vite-upgrade/plan.md	Vite 8.0.1 へのアップグレード計画・検証結果・実装手順を記載。PostCSS 関連エラー解決方法と Rolldown 移行への対応を明記。
依存関係アップグレード package.json	Vite: 7.3.1 → 8.0.1、@sveltejs/vite-plugin-svelte: 6.2.4 → 7.0.0（メジャーバンプ）、Vitest 関連: 4.0.18 → 4.1.0。Tailwind CSS 統合を @tailwindcss/postcss から @tailwindcss/vite に変更。
Tailwind 統合方式の変更 vite.config.ts, postcss.config.mjs	vite.config.ts に tailwindcss() プラグインを追加。postcss.config.mjs の @tailwindcss/postcss エントリを削除し plugins を空化。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🚀 Vite が８へ駆け上がり、
Rolldown の波に乗り換える　
PostCSS の迷路も抜けて、
Tailwind は Vite の道へ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	プルリクエストのタイトルは変更内容の主要なポイント（Vite 7.x から 8.x へのバンプと関連ライブラリのアップグレード）を明確に要約している。
Linked Issues check	✅ Passed	リンク済みイシュー #3305 の要件（Vite と依存ライブラリを v7.x から v8.x にアップグレード）が、本プルリクエストのすべての変更（パッケージバージョン更新、Tailwind 統合の移行、vite.config.ts 修正）によって充足されている。
Out of Scope Changes check	✅ Passed	すべての変更がリンク済みイシュー #3305 の Vite アップグレードおよび関連する互換性対応の範囲内であり、スコープ外の変更は認められない。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch #3305

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/dev-notes/2026-03-23/vite-upgrade/plan.md`:
- Around line 1-170: The doc has minor Markdown lint issues: add a language
specifier (e.g., "text" or "plaintext") to the fenced code blocks used in the
"dev/prod の分裂問題" example and the error block in "Phase 7 補足", and insert a blank
line immediately before the table headed "変更内容:" so the table is recognized;
locate and update the fenced blocks and the table in the Vite 7 → 8 upgrade plan
document (sections "dev/prod の分裂問題" and "Phase 7 補足" and the "変更内容:" table) to
apply these trivial formatting fixes.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 63f07cb4-1c68-442d-934c-d85d2e533d54

📥 Commits

Reviewing files that changed from the base of the PR and between c36c8b3 and 5af6590.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !pnpm-lock.yaml

📒 Files selected for processing (4)

• docs/dev-notes/2026-03-23/vite-upgrade/plan.md
• package.json
• postcss.config.mjs
• vite.config.ts

[KATO-Hiro]

LGTM