fix: build-sparkle-design-theme.mjs が @theme inline の自己参照で壊れる問題を修正

[touyou]

Summary

#289 の Codex レビュー指摘（P1）を受けての修正です。

When make registry runs, scripts/build-sparkle-design-theme.mjs reads the @theme inline block and merges those declarations over the first :root block before writing sparkle-design-theme.json; with this self-reference pattern, the generated registry theme contains entries like color-primary-500: var(--color-primary-500).

• sparkle-design-cli 2.4.1+ は @theme inline の各セマンティック宣言を同名変数への自己参照（例: --color-primary-500: var(--color-primary-500)）にする設計に変更した（goodpatch/sparkle-design-internal#229）
• build-sparkle-design-theme.mjs はこの @theme inline ブロックを解析して registry の cssVars にマージしていたため、自己参照の場合 color-primary-500 の値が解決不能な循環参照（"var(--color-primary-500)"）になってしまっていた
• sparkle-design.css には実行時に参照できる実値を持つセマンティックトークン専用の :root ブロックが別途あるため（@theme inline は Tailwind の compiled utility 生成専用）、そちらを読むように変更。extractBraceBlock（最初の1ブロックのみ取得）を extractAllBraceBlocks に置き換え、プリミティブ :root とセマンティック :root の両方をマージする

影響

• 現状 Vercel 本番ビルド（scripts/build-registry-vercel.sh）は sparkle-design-cli@2.2.2 に固定されているため直ちには影響しませんが、ローカルの make registry 実行、および将来のバージョン固定引き上げ時に確実に顕在化する問題でした

動作確認

• 手動でスクリプトを実行し、cssVars.theme['color-primary-500'] が "var(--color-blue-500)"（解決可能な値）になることを確認（修正前は "var(--color-primary-500)" という循環参照になっていた）
• 生成される sparkle-design-theme.json は git 管理外のビルド成果物のため、確認用に生成したファイルはコミットに含めていません

Co-Authored-By: Claude Sonnet 5 noreply@anthropic.com

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sparkle-design	Ready	Preview, Comment	Jul 10, 2026 8:22am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: adcf2741-5891-4671-a980-816920eb61a6

📥 Commits

Reviewing files that changed from the base of the PR and between 0b7d233 and df48ee2.

📒 Files selected for processing (1)

• scripts/build-sparkle-design-theme.mjs

---

Walkthrough

sparkle-design.cssからテーマJSONを生成する処理を更新しました。複数の:rootブロックを統合し、@theme inlineの取り込みを廃止しています。buildThemeのデフォルトエクスポートも削除されました。

Changes

テーマJSON生成

Layer / File(s)	Summary
複数:rootブロックの抽出 scripts/build-sparkle-design-theme.mjs	単一ブロック抽出を、指定トークンに続くすべてのブレースブロックを配列として抽出する処理へ変更しました。
テーマ変数の統合 scripts/build-sparkle-design-theme.mjs	複数の:rootブロックをマージしてcssVars.themeを生成し、@theme inlineの抽出・マージを削除しました。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Poem

ぴょんと跳ねたらテーマが整う
ルートの変数をみんなで拾う
inlineの輪はそっとほどいて
JSONの野原に色をまく
うさぎもにっこり、CSSぴょん!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	変更内容の主眼である@theme inlineの自己参照問題の修正を、簡潔かつ具体的に表しています。
Description check	✅ Passed	目的、原因、変更内容、影響、動作確認が記載されており、主要情報は揃っています。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ 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 worktree-fix-registry-theme-self-ref

---

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

[Copilot]

Pull request overview

sparkle-design.css の @theme inline が（将来的に）自己参照トークンを含む場合でも、registry 用に生成する sparkle-design-theme.json の cssVars.theme が循環参照にならないよう、テーマ抽出ロジックを調整する修正です。

Changes:

• :root { ... } ブロックを「最初の1つ」ではなく「すべて」抽出できるようにし、複数 :root をマージして cssVars.theme を生成
• @theme inline ブロックを registry の cssVars ソースとして使わない方針をコードコメントで明確化