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

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 };
 }
 
 // スクリプトが直接実行された場合のみメイン処理を実行