sparkle-design-cli 1.4.1 → 1.5.0

package/README.md

@@ -185,82 +185,55 @@ npx --yes sparkle-design-cli setup --assistant generic
 - `font-mono`: モノスペースフォント（文字列または配列）
 - `radius`: 角丸設定（sm, md, lg など）
 
-#### Core Options
+### extend セクション（拡張設定）
 
-- `font-pro-weights`: （オプション）プロポーショナルフォントのウェイト配列（デフォルト: `[400, 700]`）
-- `font-mono-weights`: （オプション）モノスペースフォントのウェイト配列（デフォルト: `[400, 700]`）
-- `source-packages`: （オプション）`@source` ディレクティブで追加スキャンする npm パッケージの配列
-
-#### Custom Settings
-
-- `custom-css`: （オプション）プロジェクト固有のカスタムトークン CSS ファイルのパス。`globals.css` に `@import` が自動挿入される
-
-### フォントウェイトとフォールバック
-
-`font-pro-weights` / `font-mono-weights` でフォントウェイトをカスタマイズできます。未指定時は `[400, 700]` がデフォルトです。
-
-`font-pro` / `font-mono` に配列を指定すると、フォントフォールバックチェーンとして複数の Google Fonts import が生成されます。
+Figma プラグインが出力する基本4項目に加えて、プロジェクト固有の拡張を `extend` セクションにまとめます。`extend` はオブジェクト直書き（推奨）またはファイルパスを指定できます。
 
 ```json
 {
   "primary": "blue",
-  "font-pro": ["Montserrat", "Noto Sans JP"],
-  "font-pro-weights": [400, 500, 600, 700],
+  "font-pro": "Montserrat",
   "font-mono": "Roboto Mono",
-  "font-mono-weights": [400, 700],
-  "radius": "md"
+  "radius": "md",
+  "extend": {
+    "fonts": {
+      "pro": [
+        { "family": "Montserrat", "weights": [500, 600, 700] },
+        { "family": "Noto Sans JP", "weights": [400, 500, 600, 700] }
+      ],
+      "mono": [
+        { "family": "Roboto Mono", "weights": [400, 700] }
+      ]
+    },
+    "source-packages": ["@goodpatch/sparkle-design-internal"],
+    "custom-css": "./src/app/custom-tokens.css"
+  }
 }
 ```
 
-生成される CSS:
-
-```css
---font-family-pro: 'Montserrat', 'Noto Sans JP', sans-serif;
-```
-
-```css
-@import 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap';
-@import 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap';
-```
-
-### custom-css オプション
-
-プロジェクト固有のカスタムトークン（Display, Heading, Body 等のタイポグラフィトークン、追加のフォントウェイト、メディアクエリなど）を `sparkle-design.css` に直接追加するのは避けてください。`generate` 実行時に上書きされます。
-
-代わりに、カスタムトークンを別の CSS ファイルに定義し、`custom-css` で指定してください：
+ファイル参照も可能です：
 
 ```json
 {
-  "custom-css": "./src/app/custom-tokens.css"
+  "primary": "blue",
+  "font-pro": "Montserrat",
+  "font-mono": "Roboto Mono",
+  "radius": "md",
+  "extend": "./sparkle.extend.json"
 }
 ```
 
-CLI が `globals.css` に `@import` を自動挿入します。CLI はファイルの中身を一切触りません。
-
-```css
-/* globals.css に自動生成される構造 */
-/* フォントのインポート */
-@import '...google fonts...';
-@import "tailwindcss";
-/* Sparkle Design のカスタム定義 */
-@import "./sparkle-design.css";
-/* プロジェクト固有のカスタムトークン */
-@import "./custom-tokens.css";
-```
+#### extend.fonts
 
-### source-packages オプション
+フォントごとにウェイトを個別指定。`extend.fonts` がない場合は `font-pro` / `font-mono` + デフォルトウェイト `[400, 700]` が使われます。`extend.fonts` が存在しても `fonts.pro` / `fonts.mono` のどちらかが未指定なら、そのスロットのみ `font-pro` / `font-mono` にフォールバックします。同じフォントファミリーが `pro` と `mono` で重複する場合、ウェイトはマージされ import は 1 行に統合されます。
 
-`@goodpatch/sparkle-design` を npm パッケージとして利用するプロジェクトでは、TailwindCSS v4 がパッケージ内のユーティリティクラスを検出できるように `@source` ディレクティブが必要です。
+#### extend.source-packages
 
-`source-packages` を設定すると、CLI が `globals.css` に `@source` ディレクティブを自動挿入します。`@goodpatch/sparkle-design` は常にデフォルトで含まれます。
+`@goodpatch/sparkle-design` を npm パッケージとして利用する場合に必須。`globals.css` に `@source` ディレクティブを自動挿入します。`@goodpatch/sparkle-design` は常にデフォルトで含まれます。
 
-```json
-{
-  "source-packages": ["@scope/my-extension-design"]
-}
-```
+#### extend.custom-css
 
-> **注意**: `source-packages` を指定しない場合、`@source` ディレクティブは生成されません。
+プロジェクト固有のカスタムトークンの CSS ファイルパス。`globals.css` に `@import` が自動挿入されます。`sparkle-design.css` に直接追加すると `generate` 実行時に上書きされるため、必ず別ファイルに分離してください。
 
 ## 出力
 

package/bin/sparkle-design.js

@@ -145,18 +145,26 @@ Generate options:
   -o, --output <path>        出力ファイルのパス (default: ./src/app/sparkle-design.css)
 
 sparkle.config.json の設定フィールド:
+
+  基本設定（Figma プラグインで出力可能）:
   primary                    プライマリカラー (blue, red, orange, green, purple, pink, yellow など)
   font-pro                   プロポーショナルフォント (Google Fonts の名前)
-                             配列を指定するとフォールバックチェーン
-                             例: ["Montserrat", "Noto Sans JP"]
-  font-mono                  モノスペースフォント (Google Fonts の名前、配列も可)
+  font-mono                  モノスペースフォント (Google Fonts の名前)
   radius                     角丸設定 (none, sm, md, lg, xl, full)
-  font-pro-weights           (任意) フォントウェイト配列 (default: [400, 700])
-                             例: [400, 500, 600, 700]
-  font-mono-weights          (任意) モノスペースフォントのウェイト配列 (default: [400, 700])
-  source-packages            (任意) @source で追加スキャンする npm パッケージ名の配列
-  custom-css                 (任意) プロジェクト固有のカスタムトークン CSS ファイルパス
-                             globals.css に @import が自動挿入される
+
+  拡張設定（extend セクション、任意）:
+  extend                     オブジェクト直書き、またはファイルパス（例: "./sparkle.extend.json"）
+  extend.fonts.pro           プロフォント定義。フォントごとにウェイトを指定可能
+                             文字列: "Inter"
+                             配列:   [{ "family": "Montserrat", "weights": [500, 600, 700] },
+                                      { "family": "Noto Sans JP", "weights": [400, 500, 600, 700] }]
+  extend.fonts.mono          モノスペースフォント定義（形式は fonts.pro と同じ）
+  extend.source-packages     @source で追加スキャンする npm パッケージ名の配列
+  extend.custom-css          プロジェクト固有のカスタムトークン CSS ファイルパス
+
+  extend.fonts がある場合、font-pro / font-mono より優先される。
+  ない場合は font-pro / font-mono + デフォルトウェイト [400, 700] が使われる。
+  同じフォントファミリーが pro と mono で重複する場合、ウェイトはマージされ import は 1 行になる。
 
   設定ファイルは Sparkle Design Theme Settings Figma プラグインから書き出せます:
   https://www.figma.com/community/plugin/1443500367756891364

package/lib/generate-css.js

@@ -23,6 +23,41 @@ import {
   updateGlobalsWithFonts,
 } from './font-manager.js';
 
+/**
+ * config の extend セクションを解決する
+ * extend が文字列（ファイルパス）の場合は読み込んでマージ、オブジェクトならそのまま使用
+ * @param {Object} config 設定オブジェクト
+ * @param {string|null} configPath config ファイルのパス（extend ファイルの相対パス解決用）
+ * @returns {Object} extend が解決された config
+ */
+function resolveExtend(config, configPath = null) {
+  if (!config.extend) {
+    return config;
+  }
+
+  let extend = config.extend;
+
+  // 文字列の場合はファイルパスとして読み込む
+  if (typeof extend === 'string') {
+    const baseDir = configPath ? path.dirname(path.resolve(configPath)) : process.cwd();
+    const extendPath = path.resolve(baseDir, extend);
+
+    try {
+      const content = fs.readFileSync(extendPath, 'utf8');
+      extend = JSON.parse(content);
+      console.log(`✅ extend ファイルを読み込みました: ${extendPath}`);
+    } catch (error) {
+      console.error(`❌ extend ファイルの読み込みに失敗しました: ${extendPath} (${error.message})`);
+      const { extend: _, ...rest } = config;
+      return rest;
+    }
+  }
+
+  // extend の値を config にマージ（extend 内のフィールドが優先）
+  const { extend: _, ...rest } = config;
+  return { ...rest, ...extend };
+}
+
 /**
  * 同一のフォント @import を重複排除する
  * @param {string} cssContent CSS内容
@@ -49,68 +84,101 @@ function dedupeFontImports(cssContent) {
 }
 
 /**
- * フォント設定を正規化する（文字列 → 配列）
- * @param {string|string[]} fontValue フォント名（文字列または配列）
- * @returns {string[]} フォント名の配列
+ * fonts セクションのエントリを正規化する
+ * @param {string|Array<string|{family:string, weights?:number[]}>} entry
+ * @returns {{family:string, weights:number[]}[]}
  */
-function normalizeFontConfig(fontValue) {
-  if (Array.isArray(fontValue)) {
-    return fontValue;
+function normalizeFontsEntry(entry) {
+  if (!entry) {
+    return [];
+  }
+  if (typeof entry === 'string') {
+    return [{ family: entry, weights: FONT_DEFAULTS.WEIGHTS }];
+  }
+  if (Array.isArray(entry)) {
+    return entry.map(item => {
+      if (typeof item === 'string') {
+        return { family: item, weights: FONT_DEFAULTS.WEIGHTS };
+      }
+      return { family: item.family, weights: item.weights || FONT_DEFAULTS.WEIGHTS };
+    });
   }
-  return [fontValue];
+  return [{ family: entry.family, weights: entry.weights || FONT_DEFAULTS.WEIGHTS }];
 }
 
 /**
- * Google Fonts の @import 行を生成する
- * @param {string[]} fonts フォント名の配列
- * @param {number[]} weights ウェイトの配列
- * @returns {string[]} @import 文の配列
+ * config からフォント定義を解決する
+ * fonts セクションがあればそちらを優先、なければ font-pro / font-mono にフォールバック
+ * @param {Object} config 設定オブジェクト
+ * @returns {{ pro: {family:string, weights:number[]}[], mono: {family:string, weights:number[]}[] }}
  */
-function generateGoogleFontImports(fonts, weights) {
-  const weightsStr = weights.sort((a, b) => a - b).join(';');
-  return fonts.map(font => {
-    const urlName = font.replace(/\s+/g, '+');
-    return `@import 'https://fonts.googleapis.com/css2?family=${urlName}:wght@${weightsStr}&display=swap';`;
-  });
+function resolveFontConfig(config) {
+  if (config.fonts) {
+    return {
+      pro: normalizeFontsEntry(config.fonts.pro || config['font-pro']),
+      mono: normalizeFontsEntry(config.fonts.mono || config['font-mono']),
+    };
+  }
+  return {
+    pro: normalizeFontsEntry(config['font-pro']),
+    mono: normalizeFontsEntry(config['font-mono']),
+  };
 }
 
 /**
  * フォントファミリーの CSS 値を生成する
- * @param {string[]} fonts フォント名の配列
+ * @param {{family:string}[]} fonts フォント定義の配列
  * @param {string} genericFamily ジェネリックファミリー（sans-serif / monospace）
  * @returns {string} CSS font-family 値（例: 'Montserrat', 'Noto Sans JP', sans-serif）
  */
 function generateFontFamilyValue(fonts, genericFamily) {
-  const quoted = fonts.map(f => `'${f}'`);
+  const quoted = fonts.map(f => `'${f.family}'`);
   return [...quoted, genericFamily].join(', ');
 }
 
+/**
+ * フォント定義からウェイトをマージした import 行を生成する
+ * 同じフォントファミリーはウェイトを統合して1行にする
+ * @param {{family:string, weights:number[]}[]} allFonts 全フォント定義（pro + mono）
+ * @returns {string[]} @import 文の配列
+ */
+function generateMergedFontImports(allFonts) {
+  // 同じファミリーのウェイトをマージ
+  const familyWeightsMap = new Map();
+  for (const font of allFonts) {
+    const existing = familyWeightsMap.get(font.family);
+    if (existing) {
+      for (const w of font.weights) {
+        existing.add(w);
+      }
+    } else {
+      familyWeightsMap.set(font.family, new Set(font.weights));
+    }
+  }
+
+  return [...familyWeightsMap.entries()].map(([family, weightsSet]) => {
+    const weightsStr = [...weightsSet].sort((a, b) => a - b).join(';');
+    const urlName = family.replace(/\s+/g, '+');
+    return `@import 'https://fonts.googleapis.com/css2?family=${urlName}:wght@${weightsStr}&display=swap';`;
+  });
+}
+
 /**
  * フォント import ブロック全体を生成する（Material Symbols + PRO + MONO）
- * @param {Object} config 設定オブジェクト
+ * @param {Object} configOrResolved 設定オブジェクトまたは resolveFontConfig の結果
  * @returns {string} フォント import ブロック
  */
-function generateFontImportsBlock(config) {
-  const proFonts = normalizeFontConfig(config['font-pro']);
-  const monoFonts = normalizeFontConfig(config['font-mono']);
-  const proWeights = config['font-pro-weights'] || FONT_DEFAULTS.WEIGHTS;
-  const monoWeights = config['font-mono-weights'] || FONT_DEFAULTS.WEIGHTS;
+function generateFontImportsBlock(configOrResolved) {
+  const { pro, mono } = configOrResolved.pro && configOrResolved.mono
+    ? configOrResolved
+    : resolveFontConfig(configOrResolved);
 
   const imports = [
     FONT_DEFAULTS.MATERIAL_SYMBOLS_IMPORT,
-    ...generateGoogleFontImports(proFonts, proWeights),
-    ...generateGoogleFontImports(monoFonts, monoWeights),
+    ...generateMergedFontImports([...pro, ...mono]),
   ];
 
-  // 重複排除（font-pro と font-mono が同じフォントでウェイトも同じ場合）
-  const seen = new Set();
-  const deduped = imports.filter(line => {
-    if (seen.has(line)) return false;
-    seen.add(line);
-    return true;
-  });
-
-  return deduped.join('\n');
+  return imports.join('\n');
 }
 
 /**
@@ -130,22 +198,24 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
   // プレースホルダーを色のトークンで置換（改行を含む）
   processedCSS = processedCSS.replace(REGEX.COLOR_TOKENS_PLACEHOLDER, `${colorTokens}\n`);
 
-  // 2. フォント import ブロックを生成して置換
-  const fontImportsBlock = generateFontImportsBlock(config);
+  // 2. フォント設定を解決（一度だけ）
+  const resolvedFonts = resolveFontConfig(config);
+
+  // 3. フォント import ブロックを生成して置換
+  const fontImportsBlock = generateFontImportsBlock(resolvedFonts);
   processedCSS = processedCSS.replace(REGEX.FONT_IMPORTS_PLACEHOLDER, `${fontImportsBlock}\n`);
 
-  // 3. フォントファミリー CSS 値を生成して置換
-  const proFonts = normalizeFontConfig(config['font-pro']);
-  const monoFonts = normalizeFontConfig(config['font-mono']);
+  // 4. フォントファミリー CSS 値を生成して置換
+  const { pro: proFonts, mono: monoFonts } = resolvedFonts;
   const proFamilyValue = generateFontFamilyValue(proFonts, FONT_DEFAULTS.GENERIC_FAMILY.pro);
   const monoFamilyValue = generateFontFamilyValue(monoFonts, FONT_DEFAULTS.GENERIC_FAMILY.mono);
   processedCSS = processedCSS.replace(/\{\{FONT_FAMILY_PRO\}\}/g, proFamilyValue);
   processedCSS = processedCSS.replace(/\{\{FONT_FAMILY_MONO\}\}/g, monoFamilyValue);
 
-  // 4. 基本的な設定値による置換（font-pro / font-mono の配列以外）
+  // 5. 基本的な設定値による置換（font-pro / font-mono の配列以外）
   Object.entries(config).forEach(([key, value]) => {
-    // 配列や font-*-weights はスキップ
-    if (Array.isArray(value) || key.endsWith('-weights') || key === 'custom-css') {
+    // 配列・オブジェクト・拡張フィールドはスキップ
+    if (Array.isArray(value) || (typeof value === 'object' && value !== null) || key === 'custom-css' || key === 'fonts' || key === 'extend' || key === 'source-packages') {
       return;
     }
     // 通常のプレースホルダー（CSS用 - スペースはそのまま）
@@ -221,20 +291,23 @@ export function generateCSS(configPath = null, outputPath = null) {
   console.log(MESSAGES.START);
 
   // 1. 設定ファイルを読み込み
-  const config = loadConfig(configPath);
+  const rawConfig = loadConfig(configPath);
+
+  // 2. extend セクションを解決
+  const config = resolveExtend(rawConfig, configPath);
 
-  // 2. テンプレートを読み込み
+  // 3. テンプレートを読み込み
   const template = loadTemplate();
 
-  // 3. colors.json、gray.json、radius.csvを読み込み
+  // 4. colors.json、gray.json、radius.csvを読み込み
   const colors = loadColors();
   const grayMapping = loadGrayMapping();
   const radiusMapping = loadRadiusMapping();
 
-  // 4. テンプレートを設定値で処理
+  // 5. テンプレートを設定値で処理
   const processedCSS = processTemplate(template, config, grayMapping, radiusMapping, colors);
 
-  // 5. CSSファイルを書き出し
+  // 6. CSSファイルを書き出し
   const defaultOutputPath = path.resolve(
     process.cwd(),
     ...PATHS.DEFAULT_OUTPUT_DIR,
@@ -243,7 +316,7 @@ export function generateCSS(configPath = null, outputPath = null) {
   const resolvedOutputPath = outputPath ? path.resolve(outputPath) : defaultOutputPath;
   writeCSS(processedCSS, outputPath);
 
-  // 6. フォント管理の自動処理を実行
+  // 7. フォント管理の自動処理を実行
   console.log(MESSAGES.FONT_MANAGEMENT_START);
   const sourcePackages = 'source-packages' in config ? (config['source-packages'] || []) : null;
   const customCssPath = config['custom-css'] || null;
@@ -273,10 +346,13 @@ export {
   hexToOklch,
   generateColorTokens,
   dedupeFontImports,
+  // 設定解決
+  resolveExtend,
   // フォント処理
-  normalizeFontConfig,
-  generateGoogleFontImports,
+  normalizeFontsEntry,
+  resolveFontConfig,
   generateFontFamilyValue,
+  generateMergedFontImports,
   generateFontImportsBlock,
   // フォント管理
   extractFontImports,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design-cli",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール",
   "main": "lib/generate-css.js",
   "type": "module",