sparkle-design-cli 2.0.7-beta.1 → 2.0.7-beta.10

package/lib/font-manager.js

@@ -88,22 +88,64 @@ function createCustomCssImportBlock(customCssPath, globalsPath) {
   return [COMMENTS.CUSTOM_CSS, `@import "${relativePath}";`].join('\n');
 }
 
+/**
+ * entry CSS (globals.css / index.css) から sparkle-design.css への相対 path を
+ * 計算し、`@import` 文を組み立てる。同一ディレクトリなら `./sparkle-design.css`、
+ * 異なるなら `./app/sparkle-design.css` のような相対 path になる。Vite の
+ * `src/index.css` → `src/app/sparkle-design.css` レイアウトで正しい path が
+ * 出るようにするために追加された関数（beta.7 まではハードコード）。
+ * en: Compute the relative path from the entry CSS to sparkle-design.css.
+ * Handles layouts like Vite's `src/index.css` → `src/app/sparkle-design.css`,
+ * where the two files live in different directories.
+ */
+function buildSparkleImportStatement(globalsPath, sparkleDesignPath) {
+  if (!globalsPath || !sparkleDesignPath) {
+    return IMPORTS.SPARKLE_DESIGN;
+  }
+  const globalsDir = path.dirname(globalsPath);
+  const rel = path.relative(globalsDir, sparkleDesignPath).split(path.sep).join('/');
+  // path.relative が空文字を返すのは globalsPath === sparkleDesignPath のときのみ
+  // （想定外）。念のため fallback として同一 dir 前提の default import を返す。
+  // en: path.relative returns '' only when paths match; use the same-dir default.
+  if (!rel) return IMPORTS.SPARKLE_DESIGN;
+  const importPath = rel.startsWith('.') ? rel : `./${rel}`;
+  return `@import "${importPath}";`;
+}
+
 /**
  * sparkle-design.css importブロックを生成する
  * @param {Array<string>} sourcePackages 追加パッケージ名の配列
  * @param {string} globalsPath globals.css の絶対パス（@source パス計算用）
  * @param {string|null} customCssPath custom-css ファイルの相対パス
+ * @param {string|null} sparkleDesignPath sparkle-design.css の絶対パス（相対 import 計算用）
  * @returns {string} sparkle-design.css importブロック
  */
-function createSparkleImportBlock(sourcePackages = [], globalsPath = null, customCssPath = null) {
+function createSparkleImportBlock(
+  sourcePackages = [],
+  globalsPath = null,
+  customCssPath = null,
+  sparkleDesignPath = null
+) {
   const parts = [''];
 
-  if (sourcePackages !== null && sourcePackages !== undefined) {
-    const nodeModulesRel = globalsPath ? resolveNodeModulesRelPath(globalsPath) : '../node_modules';
-    parts.push(createSourceBlock(sourcePackages, nodeModulesRel));
-  }
-
-  parts.push(COMMENTS.SPARKLE_IMPORT, IMPORTS.SPARKLE_DESIGN);
+  // CSS 仕様上 `@import` は `@charset` / `@layer` 以外の at-rule より前に
+  // 書く必要がある。`@source` を `@import` より前に置くと、PostCSS 処理系に
+  // よっては後続の `@import "./sparkle-design.css"` が silent に drop され、
+  // sparkle tokens が最終 CSS に出ない回帰になる（beta.6 以前で再現）。
+  // そのため順序は:
+  //   1. @import "./sparkle-design.css"   （Sparkle 本体のトークン）
+  //   2. @import "./custom-tokens.css"    （ユーザーのカスタムトークン、任意）
+  //   3. @source "../node_modules/..."    （Tailwind スキャン対象、任意）
+  // の順で出力する。
+  // en: Per CSS spec, all `@import` rules must precede any other at-rule
+  // (except `@charset` / `@layer`). Placing `@source` between imports makes
+  // downstream `@import "./sparkle-design.css"` silently drop in some
+  // PostCSS toolchains, which removes Sparkle tokens from the output.
+  // We now emit @import blocks first, then any @source directives.
+  parts.push(
+    COMMENTS.SPARKLE_IMPORT,
+    buildSparkleImportStatement(globalsPath, sparkleDesignPath)
+  );
 
   // カスタムCSS import を sparkle-design.css の後に配置
   const customBlock = createCustomCssImportBlock(customCssPath, globalsPath);
@@ -111,6 +153,11 @@ function createSparkleImportBlock(sourcePackages = [], globalsPath = null, custo
     parts.push(customBlock);
   }
 
+  if (sourcePackages !== null && sourcePackages !== undefined) {
+    const nodeModulesRel = globalsPath ? resolveNodeModulesRelPath(globalsPath) : '../node_modules';
+    parts.push(createSourceBlock(sourcePackages, nodeModulesRel));
+  }
+
   parts.push('');
   return parts.join('\n');
 }
@@ -190,24 +237,27 @@ function reconstructGlobalsCss(globalsContent, sparkleImportBlock, tailwindInfo)
  * - sparkle-design.css importをTailwindの後に配置
  * - 自動検出した sourcePackages から @source ディレクティブを挿入
  *
- * **v2.0.7-beta.1 以前の不具合**: 早期 return が `fontImports.length === 0` 単独で
- * 行われていたため、フォントを SparkleHead に移行済みかつ既存 globals.css が
- * ある（Vite の `src/index.css` など）プロジェクトでは `@source` が一切挿入
- * されなかった。条件を「フォント・sourcePackages・customCssPath のすべてが
- * 空なら skip」に変更し、パッケージの自動検出結果だけでも globals.css が
- * patch されるようにした。
+ * **v2.0.7-beta.2**: 戻り値を真偽値から `{ status, reason }` の状態付きに変更。
+ * 呼び出し側が「作業不要でスキップ」「失敗したがデフォルトは warn 継続」を
+ * 区別できるようにし、`--strict` モードで失敗を exit code に反映できるよう
+ * にした（#31）。`skipped` は後方互換のため `false` に、`updated` は `true`
+ * に toBoolean で扱える想定。
  *
  * @param {Array<string>} fontImports フォントimport文の配列
  * @param {string} globalsPath globals.cssのパス
  * @param {Array<string>|null} sourcePackages 追加パッケージ名の配列（null の場合は @source を生成しない）
  * @param {string|null} customCssPath custom-css ファイルの相対パス
- * @returns {boolean} globals.css の更新に成功した場合は true
+ * @returns {{ status: 'skipped' | 'updated' | 'failed', reason?: string }}
+ *   skipped: 触る理由がない (fonts/sourcePackages/customCss すべて空)
+ *   updated: globals.css を正常に書き換えた
+ *   failed: 書き換え対象だったが失敗した (TAILWIND_IMPORT 欠落、write 失敗等)
  */
 export function updateGlobalsWithFonts(
   fontImports,
   globalsPath,
   sourcePackages = null,
-  customCssPath = null
+  customCssPath = null,
+  sparkleDesignPath = null
 ) {
   const hasFonts = fontImports.length > 0;
   const hasSourcePackages = sourcePackages !== null && sourcePackages !== undefined;
@@ -217,7 +267,7 @@ export function updateGlobalsWithFonts(
   // 理由がないので skip。
   // en: Nothing to inject, so leave globals.css alone.
   if (!hasFonts && !hasSourcePackages && !hasCustomCss) {
-    return false;
+    return { status: 'skipped', reason: 'no-work' };
   }
 
   try {
@@ -227,15 +277,42 @@ export function updateGlobalsWithFonts(
     // 2. 既存のimportを削除
     globalsContent = removeExistingImports(globalsContent);
 
-    // 3. Tailwind import の位置を見つける
-    const tailwindInfo = findTailwindImport(globalsContent);
+    // 3. Tailwind import の位置を見つける。無ければ先頭に自動で prepend する。
+    //    ここで silent に失敗すると `create-vite` 等が生成した既存 index.css に
+    //    `@import "tailwindcss"` が無いプロジェクトで setup が no-op に終わり、
+    //    AI が後から手書きで import を補うが `@source` を知らず落とす、という
+    //    連鎖的な崩れが起きていた（beta.8 試用で確認）。canonical な import を
+    //    自動投入することでその連鎖を根絶する。
+    // en: If `@import "tailwindcss"` is missing from an existing entry CSS
+    // (e.g. untouched `create-vite` default), auto-prepend it instead of
+    // silently warning. Without this recovery, the whole patch becomes a no-op
+    // and AI ends up hand-writing imports without `@source`, producing drifted
+    // output (observed in beta.8 user testing).
+    let tailwindInfo = findTailwindImport(globalsContent);
     if (!tailwindInfo) {
-      console.warn(MESSAGES.TAILWIND_NOT_FOUND);
-      return false;
+      const displayPath = path.relative(process.cwd(), globalsPath) || globalsPath;
+      console.warn(
+        `⚠️  ${displayPath} に \`@import "tailwindcss";\` が見つからなかったため先頭に追記します（canonical な Tailwind v4 entry point にするため）。`
+      );
+      globalsContent = `${IMPORTS.TAILWIND}\n${globalsContent.startsWith('\n') ? '' : ''}${globalsContent}`;
+      tailwindInfo = findTailwindImport(globalsContent);
+      if (!tailwindInfo) {
+        // prepend したのに正規表現で拾えないのは `REGEX.TAILWIND_IMPORT` が
+        // 想定と違う（= コードの不整合）。fail-fast する。
+        // en: We just wrote the canonical import but the regex doesn't see it —
+        // this is an internal inconsistency, not a user error. Fail loud.
+        console.error(MESSAGES.TAILWIND_NOT_FOUND(displayPath));
+        return { status: 'failed', reason: 'tailwind-import-missing-after-prepend' };
+      }
     }
 
     // 4. importブロックを生成（フォント @import は SparkleHead に移行したため生成しない）
-    const sparkleImportBlock = createSparkleImportBlock(sourcePackages, globalsPath, customCssPath);
+    const sparkleImportBlock = createSparkleImportBlock(
+      sourcePackages,
+      globalsPath,
+      customCssPath,
+      sparkleDesignPath
+    );
 
     // 5. globals.css を再構築（フォント @import なし）
     const reconstructedContent = reconstructGlobalsCss(
@@ -247,11 +324,10 @@ export function updateGlobalsWithFonts(
     // 6. 更新したglobals.cssを書き込む
     fs.writeFileSync(globalsPath, reconstructedContent, 'utf8');
     console.log(MESSAGES.GLOBALS_UPDATED(globalsPath));
-    return true;
+    return { status: 'updated' };
   } catch (error) {
     console.error(MESSAGES.GLOBALS_UPDATE_FAILED(error.message));
-    // globals.cssの更新は必須ではないので、エラーでも処理を続行
-    return false;
+    return { status: 'failed', reason: `write-error: ${error.code ?? error.message}` };
   }
 }
 
@@ -355,8 +431,17 @@ function resolveGlobalsPath(sparkleDesignPath, explicitGlobalsPath = null) {
     if (fs.existsSync(resolved)) {
       return { path: resolved, source: 'explicit' };
     }
-    console.warn(`⚠️  指定された globals パスが見つかりません: ${explicitGlobalsPath}`);
-    return null;
+    // 明示指定は settings bug / typo なので silent warn ではなく throw に
+    // 昇格させる。--strict の有無に関わらず呼び出し元で伝播させたいので、
+    // error.code を付けて上流で識別できるようにする。
+    // en: An explicit --globals-path value that doesn't exist is almost
+    // always a typo. We tag the error so manageFontImports's catch knows
+    // to re-throw regardless of strict mode.
+    const err = new Error(
+      `指定された globals パスが見つかりません: ${explicitGlobalsPath} (cwd 基準で解決: ${resolved})`
+    );
+    err.code = 'E_EXPLICIT_GLOBALS_PATH_NOT_FOUND';
+    throw err;
   }
 
   // 1. 自動検出: sparkle-design.css と同じディレクトリで @import "tailwindcss" を含む
@@ -384,11 +469,22 @@ function resolveGlobalsPath(sparkleDesignPath, explicitGlobalsPath = null) {
   const candidates = isViteProject(cwd)
     ? GLOBALS_CSS_CANDIDATES.slice().sort((a, b) => vitePriority(a) - vitePriority(b))
     : GLOBALS_CSS_CANDIDATES;
+  // 2-a) まず既知候補の中で `@import "tailwindcss"` を持つファイルを探す。
+  //       持っているファイルが第一候補（canonical Tailwind entry CSS）。
+  // 2-b) 2-a で見つからなかった場合、`@import` 無しで既存の候補ファイルが
+  //       あればそれを拾う（Vite の `create-vite` 直後のように entry CSS は
+  //       あるが Tailwind 未設定のプロジェクト）。これで上流の
+  //       `updateGlobalsWithFonts` が auto-prepend で tailwind import を
+  //       補えるため、silent に no-op 終了する回帰を避けられる（beta.8 で再現）。
+  // en: First pick candidates that already contain `@import "tailwindcss"`.
+  // If none match, fall back to the first existing candidate anyway so the
+  // upstream patcher can auto-prepend the canonical tailwind import. Without
+  // this fallback, a Vite project created by `create-vite` with an untouched
+  // `src/index.css` would cause setup to end as a silent no-op.
+  let fallbackExistingPath = null;
   for (const candidate of candidates) {
     const absolute = path.resolve(cwd, candidate);
     if (!fs.existsSync(absolute)) continue;
-    // 自身（sparkle-design.css）は除外
-    // en: Skip sparkle-design.css itself just in case a candidate points at it.
     if (path.resolve(absolute) === path.resolve(sparkleDesignPath)) continue;
     try {
       const content = fs.readFileSync(absolute, 'utf8');
@@ -396,6 +492,9 @@ function resolveGlobalsPath(sparkleDesignPath, explicitGlobalsPath = null) {
         console.log(`📝 Tailwind エントリポイントを検出しました（project root）: ${candidate}`);
         return { path: absolute, source: 'project' };
       }
+      if (!fallbackExistingPath) {
+        fallbackExistingPath = { path: absolute, candidate };
+      }
     } catch (err) {
       // ENOENT 系は existsSync で既に弾いているので、ここに来るのは権限不足や
       // ディレクトリ衝突などデバッグ価値のあるケース。silent に消さずに理由を出す。
@@ -407,6 +506,13 @@ function resolveGlobalsPath(sparkleDesignPath, explicitGlobalsPath = null) {
     }
   }
 
+  if (fallbackExistingPath) {
+    console.log(
+      `📝 Tailwind import 未設定の既存 entry CSS を検出しました（project root）: ${fallbackExistingPath.candidate}。後続処理で \`@import "tailwindcss";\` を自動追記します。`
+    );
+    return { path: fallbackExistingPath.path, source: 'existing-no-tailwind' };
+  }
+
   // 3. デフォルト: sparkle-design.css と同じディレクトリの globals.css
   // en: Last resort — a globals.css next to sparkle-design.css.
   const defaultPath = path.join(dir, 'globals.css');
@@ -420,24 +526,54 @@ function resolveGlobalsPath(sparkleDesignPath, explicitGlobalsPath = null) {
 /**
  * フォント管理の自動処理を実行する
  * sparkle-design.css からフォントimportを抽出し、Tailwind エントリポイント CSS に @source 等を挿入する
+ *
+ * **v2.0.7-beta.2**: 戻り値を `{ status, reason? }` に変更し、呼び出し側が
+ * 「作業不要のスキップ」「作業すべき状態だが失敗」を区別できるようにした
+ * (#31)。`options.strict` が true のとき、`status === 'failed'` になる状態は
+ * throw に昇格させて `bin/sparkle-design.js` の outer catch で exit 1 に
+ * 繋げる。
+ *
  * @param {string} sparkleDesignPath sparkle-design.cssのパス
  * @param {Array<string>|null} sourcePackages 追加パッケージ名の配列（null の場合は @source を生成しない）
  * @param {string|null} customCssPath custom-css ファイルの相対パス
  * @param {string|null} globalsPathOverride 明示的に指定された globals パス
+ * @param {{ strict?: boolean }} [options] strict=true のとき失敗を throw する
+ * @returns {{ status: 'skipped' | 'updated' | 'failed', reason?: string }}
  */
 export function manageFontImports(
   sparkleDesignPath,
   sourcePackages = null,
   customCssPath = null,
-  globalsPathOverride = null
+  globalsPathOverride = null,
+  options = {}
 ) {
+  const strict = Boolean(options.strict);
+  const hasWork =
+    (sourcePackages !== null && sourcePackages !== undefined) || Boolean(customCssPath);
+
+  const raiseOrReturn = (result) => {
+    if (strict && result.status === 'failed') {
+      throw new Error(
+        `globals.css の更新に失敗しました (${result.reason ?? 'unknown'})。--strict モードでは exit 1 で終了します。`
+      );
+    }
+    return result;
+  };
+
   try {
     // 1. globals パスを解決
     const resolved = resolveGlobalsPath(sparkleDesignPath, globalsPathOverride);
 
     if (!resolved) {
+      // 作業すべき状態（sourcePackages 等あり）で entry CSS が見つからないのは
+      // 事実上の不具合。strict なら throw、非 strict なら従来どおり情報ログ。
+      // en: With work queued, missing entry CSS is effectively a misconfiguration.
+      if (hasWork) {
+        console.warn(MESSAGES.GLOBALS_NOT_FOUND);
+        return raiseOrReturn({ status: 'failed', reason: 'entry-css-not-found' });
+      }
       console.log(MESSAGES.GLOBALS_NOT_FOUND);
-      return;
+      return { status: 'skipped', reason: 'entry-css-not-found-no-work' };
     }
 
     const globalsPath = resolved.path;
@@ -460,17 +596,25 @@ export function manageFontImports(
     }
 
     // 4. globals.css に import / @source を追加
-    const globalsUpdated = updateGlobalsWithFonts(
+    // sparkle-design.css の絶対パスを渡すことで、globalsPath と異なる
+    // ディレクトリに置かれている場合でも相対 import が正しく計算される
+    // （Vite の src/index.css → src/app/sparkle-design.css 等）。
+    // en: Pass the absolute sparkle-design.css path so the import can be
+    // computed relative to the entry CSS, even in Vite-style layouts where
+    // the two files live in different directories.
+    const result = updateGlobalsWithFonts(
       fontImports,
       globalsPath,
       sourcePackages,
-      customCssPath
+      customCssPath,
+      sparkleDesignPath
     );
 
-    if (!globalsUpdated) {
-      // fonts が元々無く sourcePackages / customCss も空なら更新不要。
-      // en: Nothing to do — not an error.
-      return;
+    if (result.status === 'skipped') {
+      return result;
+    }
+    if (result.status === 'failed') {
+      return raiseOrReturn(result);
     }
 
     // 5. fonts が sparkle-design.css 側に残っていれば削除（globals 側に移動済みの前提）
@@ -480,8 +624,15 @@ export function manageFontImports(
       fs.writeFileSync(sparkleDesignPath, cleanedSparkleContent, 'utf8');
       console.log(MESSAGES.FONT_REMOVED);
     }
+    return result;
   } catch (error) {
     console.error(MESSAGES.FONT_MANAGEMENT_ERROR(error.message));
-    // フォント管理は必須ではないので、エラーでも処理を続行
+    // strict モード、または明示指定された globals path の not-found は
+    // ユーザーが必ず気付くべきなので非 strict でも再 throw する。
+    // en: Always re-throw explicit --globals-path typos; respect strict for the rest.
+    if (strict || error.code === 'E_EXPLICIT_GLOBALS_PATH_NOT_FOUND') {
+      throw error;
+    }
+    return { status: 'failed', reason: `manage-error: ${error.code ?? error.message}` };
   }
 }

package/lib/generate-css.js

@@ -68,7 +68,7 @@ function dedupeFontImports(cssContent) {
 
   return cssContent
     .split('\n')
-    .filter(line => {
+    .filter((line) => {
       if (!line.includes('fonts.googleapis.com')) {
         return true;
       }
@@ -96,7 +96,7 @@ function normalizeFontsEntry(entry) {
     return [{ family: entry, weights: FONT_DEFAULTS.WEIGHTS }];
   }
   if (Array.isArray(entry)) {
-    return entry.map(item => {
+    return entry.map((item) => {
       if (typeof item === 'string') {
         return { family: item, weights: FONT_DEFAULTS.WEIGHTS };
       }
@@ -132,7 +132,7 @@ function resolveFontConfig(config) {
  * @returns {string} CSS font-family 値（例: 'Montserrat', 'Noto Sans JP', sans-serif）
  */
 function generateFontFamilyValue(fonts, genericFamily) {
-  const quoted = fonts.map(f => `'${f.family}'`);
+  const quoted = fonts.map((f) => `'${f.family}'`);
   return [...quoted, genericFamily].join(', ');
 }
 
@@ -169,9 +169,10 @@ function generateMergedFontImports(allFonts) {
  * @returns {string} フォント import ブロック
  */
 function generateFontImportsBlock(configOrResolved) {
-  const { pro, mono } = configOrResolved.pro && configOrResolved.mono
-    ? configOrResolved
-    : resolveFontConfig(configOrResolved);
+  const { pro, mono } =
+    configOrResolved.pro && configOrResolved.mono
+      ? configOrResolved
+      : resolveFontConfig(configOrResolved);
 
   const imports = [
     FONT_DEFAULTS.MATERIAL_SYMBOLS_IMPORT,
@@ -206,7 +207,7 @@ function generateSparkleHeadContent(resolvedFonts) {
     `      <link rel="preconnect" href="${FONT_DOMAINS.GOOGLEAPIS}" />`,
     `      <link rel="preconnect" href="${FONT_DOMAINS.GSTATIC}" crossOrigin="anonymous" />`,
     `      <link rel="stylesheet" href="${materialSymbolsUrl}" />`,
-    ...fontUrls.map(url => `      <link rel="stylesheet" href="${url}" />`),
+    ...fontUrls.map((url) => `      <link rel="stylesheet" href="${url}" />`),
   ];
 
   return `/**
@@ -255,6 +256,92 @@ function writeSparkleHead(content, sparkleDesignCssPath) {
   console.log('   → ルートレイアウトの <head> 内に <SparkleHead /> を追加してください');
 }
 
+const VITE_INDEX_HTML_BLOCK_START = '<!-- sparkle-design-cli:fonts:start -->';
+const VITE_INDEX_HTML_BLOCK_END = '<!-- sparkle-design-cli:fonts:end -->';
+
+/**
+ * SparkleHead.tsx と同じフォント <link> タグ群を HTML 文字列として生成する。
+ * Vite のように `<head>` が `index.html` にある環境では、React コンポーネントを
+ * 挟めないため HTML に直接注入する必要がある。
+ * en: Return the font/link tags as HTML strings so we can inject them into
+ * Vite's `index.html`, where a React SparkleHead component can't reach the head.
+ */
+function buildSparkleFontLinksHtml(resolvedFonts) {
+  const materialSymbolsUrl = extractUrlFromImport(FONT_DEFAULTS.MATERIAL_SYMBOLS_IMPORT);
+  const fontImportLines = generateMergedFontImports([...resolvedFonts.pro, ...resolvedFonts.mono]);
+  const fontUrls = fontImportLines.map(extractUrlFromImport).filter(Boolean);
+  return [
+    `<link rel="preconnect" href="${FONT_DOMAINS.GOOGLEAPIS}" />`,
+    `<link rel="preconnect" href="${FONT_DOMAINS.GSTATIC}" crossorigin />`,
+    `<link rel="stylesheet" href="${materialSymbolsUrl}" />`,
+    ...fontUrls.map((url) => `<link rel="stylesheet" href="${url}" />`),
+  ];
+}
+
+/**
+ * Vite プロジェクトの `index.html` に managed block で Sparkle のフォント
+ * `<link>` タグを upsert する。存在しない場合は `</head>` 直前に挿入、
+ * 既にマーカー付きブロックがあれば内容を置換する。
+ *
+ * - Vite 以外（Next.js の src/app など）は index.html を持たないので呼ばれない
+ * - 既存ユーザーの head 内に書いた自作の link は触らない（managed block の
+ *   範囲だけを管理するので non-destructive）
+ *
+ * en: Upsert a managed block of Sparkle font `<link>` tags into Vite's
+ * `index.html`, injecting before `</head>` on first run and replacing the
+ * block content on re-runs. Non-destructive against user-authored links
+ * outside the markers.
+ */
+function upsertViteIndexHtmlFonts(cwd, resolvedFonts) {
+  const indexHtmlPath = path.resolve(cwd, 'index.html');
+  if (!fs.existsSync(indexHtmlPath)) {
+    return { status: 'skipped', reason: 'no-index-html' };
+  }
+  let html;
+  try {
+    html = fs.readFileSync(indexHtmlPath, 'utf8');
+  } catch (error) {
+    return { status: 'failed', reason: `read-error: ${error.code ?? error.message}` };
+  }
+
+  const links = buildSparkleFontLinksHtml(resolvedFonts);
+  // ブロック内部の各行は innerIndent で統一する。マーカー行自体も含める。
+  // en: Apply innerIndent to every line of the managed block, markers included.
+  const innerIndent = '    ';
+  const block = [VITE_INDEX_HTML_BLOCK_START, ...links, VITE_INDEX_HTML_BLOCK_END]
+    .map((line) => innerIndent + line)
+    .join('\n');
+
+  if (html.includes(VITE_INDEX_HTML_BLOCK_START) && html.includes(VITE_INDEX_HTML_BLOCK_END)) {
+    // 既存ブロックの各行インデントを尊重しつつ中身だけ置換すると複雑になるので、
+    // BLOCK_START の前にある空白を再利用してブロックごと丸ごと差し替える。
+    // en: Replace the entire managed block while preserving the leading
+    // whitespace that already sits in front of BLOCK_START.
+    const existingBlockRegex = new RegExp(
+      `([^\\S\\n]*)${VITE_INDEX_HTML_BLOCK_START}[\\s\\S]*?${VITE_INDEX_HTML_BLOCK_END}`
+    );
+    const replaced = html.replace(existingBlockRegex, (_match, leadingWs) => {
+      // 既存 leading を innerIndent に揃える。マーカー前の空白が行頭にある想定。
+      return [VITE_INDEX_HTML_BLOCK_START, ...links, VITE_INDEX_HTML_BLOCK_END]
+        .map((line, idx) => (idx === 0 ? leadingWs : innerIndent) + line)
+        .join('\n');
+    });
+    if (replaced === html) return { status: 'unchanged', path: indexHtmlPath };
+    fs.writeFileSync(indexHtmlPath, replaced, 'utf8');
+    return { status: 'updated', path: indexHtmlPath };
+  }
+
+  const headCloseRegex = /(\s*)<\/head>/i;
+  const match = html.match(headCloseRegex);
+  if (!match) {
+    return { status: 'failed', reason: 'no-head-close-tag' };
+  }
+  const leading = match[1]; // 通常 `\n  ` (`</head>` 直前の改行とインデント)
+  const replaced = html.replace(headCloseRegex, `\n${block}${leading}</head>`);
+  fs.writeFileSync(indexHtmlPath, replaced, 'utf8');
+  return { status: 'created', path: indexHtmlPath };
+}
+
 /**
  * テンプレート変数を設定値で置換する
  * @param {string} template CSSテンプレート
@@ -289,7 +376,15 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
   // 5. 基本的な設定値による置換（オブジェクト・配列・拡張フィールドはスキップ）
   Object.entries(config).forEach(([key, value]) => {
     // 配列・オブジェクト・拡張フィールドはスキップ
-    if (Array.isArray(value) || (typeof value === 'object' && value !== null) || key === 'custom-css' || key === 'fonts' || key === 'extend' || key === 'source-packages' || key === 'globals-path') {
+    if (
+      Array.isArray(value) ||
+      (typeof value === 'object' && value !== null) ||
+      key === 'custom-css' ||
+      key === 'fonts' ||
+      key === 'extend' ||
+      key === 'source-packages' ||
+      key === 'globals-path'
+    ) {
       return;
     }
     // 通常のプレースホルダー（CSS用 - スペースはそのまま）
@@ -336,9 +431,7 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
 // `sparkle-design` は CLI 側のデフォルトパッケージなのでリストには加えず「存在判定」にだけ使う。
 // en: Known design-system packages to auto-detect. `sparkle-design` is the CLI's
 //     default source package, so it only acts as an "enables @source" signal.
-const KNOWN_DESIGN_SYSTEM_PACKAGES = [
-  '@goodpatch/sparkle-design-internal',
-];
+const KNOWN_DESIGN_SYSTEM_PACKAGES = ['@goodpatch/sparkle-design-internal'];
 
 /**
  * package.json の dependencies / devDependencies から既知のデザインシステムパッケージを検出する。
@@ -394,8 +487,17 @@ function writeCSS(cssContent, outputPath = null) {
  * メイン処理
  * @param {string|null} configPath カスタム設定ファイルのパス（オプション）
  * @param {string|null} outputPath カスタム出力パス（オプション）
+ * @param {string|null} globalsPath 明示指定の globals.css パス（オプション）
+ * @param {{ strict?: boolean }} [options] strict=true のとき、
+ *   globals.css パッチ失敗などを throw に昇格させる（exit 1 に繋げるため）
+ * @returns {{ globalsResult: { status: 'skipped'|'updated'|'failed', reason?: string } }}
  */
-export function generateCSS(configPath = null, outputPath = null, globalsPath = null) {
+export function generateCSS(
+  configPath = null,
+  outputPath = null,
+  globalsPath = null,
+  options = {}
+) {
   console.log(MESSAGES.START);
 
   // 1. 設定ファイルを読み込み
@@ -413,7 +515,13 @@ export function generateCSS(configPath = null, outputPath = null, globalsPath =
   const radiusMapping = loadRadiusMapping();
 
   // 5. テンプレートを設定値で処理（resolvedFonts も返す）
-  const { css: processedCSS, resolvedFonts } = processTemplate(template, config, grayMapping, radiusMapping, colors);
+  const { css: processedCSS, resolvedFonts } = processTemplate(
+    template,
+    config,
+    grayMapping,
+    radiusMapping,
+    colors
+  );
 
   // 6. CSSファイルを書き出し
   const defaultOutputPath = path.resolve(
@@ -428,6 +536,27 @@ export function generateCSS(configPath = null, outputPath = null, globalsPath =
   const sparkleHeadContent = generateSparkleHeadContent(resolvedFonts);
   writeSparkleHead(sparkleHeadContent, resolvedOutputPath);
 
+  // 7.5 Vite プロジェクトの index.html に Sparkle のフォント <link> タグを upsert
+  // する。Vite は <head> が index.html 側にあるため、React コンポーネントの
+  // SparkleHead を挟めない。managed block でマーカー間だけを管理し、既存の
+  // head 内容は非破壊に保つ。
+  // en: Vite ships its <head> in index.html, outside React's reach, so mirror
+  // the SparkleHead link tags into a managed block there.
+  const cwdForHtml = process.cwd();
+  if (fs.existsSync(path.resolve(cwdForHtml, 'index.html'))) {
+    const htmlResult = upsertViteIndexHtmlFonts(cwdForHtml, resolvedFonts);
+    if (htmlResult.status === 'created' || htmlResult.status === 'updated') {
+      const displayPath = path.relative(cwdForHtml, htmlResult.path) || htmlResult.path;
+      console.log(
+        `✅ index.html の Sparkle フォント <link> ブロックを${htmlResult.status === 'created' ? '挿入' : '更新'}しました: ${displayPath}`
+      );
+    } else if (htmlResult.status === 'failed') {
+      console.warn(
+        `⚠️  index.html への Sparkle フォント <link> 挿入に失敗しました (${htmlResult.reason})。手動で <head> 内に SparkleHead.tsx 相当の <link> タグを追加してください。`
+      );
+    }
+  }
+
   // 8. フォント管理の自動処理を実行（globals.css にはフォント @import を差し込まない）
   // source-packages は以下の合成で決まる:
   //   1. package.json から既知のデザインシステムパッケージを自動検出（baseline）
@@ -437,16 +566,23 @@ export function generateCSS(configPath = null, outputPath = null, globalsPath =
   //     with explicit config entries. If neither surfaces anything, @source is skipped.
   console.log(MESSAGES.FONT_MANAGEMENT_START);
   const detectedPackages = detectSourcePackagesFromPackageJson();
-  const explicitPackages = 'source-packages' in config ? (config['source-packages'] || []) : null;
+  const explicitPackages = 'source-packages' in config ? config['source-packages'] || [] : null;
   const sourcePackages =
     detectedPackages !== null || explicitPackages !== null
       ? [...new Set([...(detectedPackages ?? []), ...(explicitPackages ?? [])])]
       : null;
   const customCssPath = config['custom-css'] || null;
   const globalsPathOverride = globalsPath || config['globals-path'] || null;
-  manageFontImports(resolvedOutputPath, sourcePackages, customCssPath, globalsPathOverride);
+  const globalsResult = manageFontImports(
+    resolvedOutputPath,
+    sourcePackages,
+    customCssPath,
+    globalsPathOverride,
+    { strict: Boolean(options.strict) }
+  );
 
   console.log(MESSAGES.SUCCESS);
+  return { globalsResult };
 }
 
 // スクリプトが直接実行された場合のみメイン処理を実行