sparkle-design-cli 1.4.1 → 1.5.1

package/README.md

@@ -111,6 +111,14 @@ sparkle-design-cli check --help
 - children なしの Button に prefixIcon / suffixIcon を使わない
 - Material Symbols を className 直書きで使わない
 - shadcn/ui 既定 token を Sparkle Design 内へ持ち込まない
+- Tailwind デフォルト typography（text-sm, font-medium 等）を使わない
+- CardTitle に typography を上書きしない
+- CardControl に Button / IconButton 以外を入れない
+- CardHeader / CardContent の padding を上書きしない
+- asChild と prefixIcon / suffixIcon / isLoading を併用しない
+- disabled を isDisabled の代わりに使わない
+- Button の prefixIcon に JSX を渡さない
+- Icon の children にテキストを渡さない
 
 #### Manual Review Reminders
 
@@ -119,6 +127,7 @@ sparkle-design-cli check --help
 - Badge と Tag の意味的な使い分け
 - CardDescription の typography / color token 明示
 - Dialog と Modal の UX 上の使い分け
+- 手書き span が Tag で置き換え可能か
 
 #### 導入先での推奨設定
 
@@ -181,86 +190,59 @@ npx --yes sparkle-design-cli setup --assistant generic
 #### Core（プラグインが出力）
 
 - `primary`: プライマリカラー（blue, red, orange など）
-- `font-pro`: プロポーショナルフォント（文字列または配列。配列の場合はフォールバックチェーンになる）
-- `font-mono`: モノスペースフォント（文字列または配列）
+- `font-pro`: プロポーショナルフォント（[Google Fonts](https://fonts.google.com/) の名前）
+- `font-mono`: モノスペースフォント（[Google Fonts](https://fonts.google.com/) の名前）
 - `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
@@ -178,7 +186,15 @@ Check で検出する主なパターン:
   - DialogCancel / DialogAction を <Button> で二重ラップしている
   - children なしの Button に prefixIcon / suffixIcon を使っている
   - Material Symbols を className 直書きしている
-  - text-muted-foreground / bg-background / border-border を持ち込んでいる
+  - shadcn/ui 既定 token（text-muted-foreground 等）を持ち込んでいる
+  - Tailwind デフォルト typography（text-sm, font-medium 等）を使っている
+  - CardTitle に typography を上書きしている
+  - CardControl に Button / IconButton 以外を入れている
+  - CardHeader / CardContent の padding を上書きしている
+  - asChild と prefixIcon / suffixIcon / isLoading を併用している
+  - disabled を isDisabled の代わりに使っている
+  - Button の prefixIcon に JSX を渡している
+  - Icon の children にテキストを渡している
 
 JSON 出力では manualReviewReminders も返すため、AI から実行する場合は --format json を推奨
 `);

package/lib/anti-pattern-rules.js

@@ -40,6 +40,11 @@ const MANUAL_REVIEW_REMINDERS = [
     message:
       'Dialog が確認用途、Modal が入力・詳細表示用途になっているか確認してください。文脈判断が必要なケースは機械検出されません。',
   },
+  {
+    id: 'tag-vs-handwritten-span',
+    message:
+      'ステータスバッジ風の手書き span（bg-*-100 text-*-700 rounded-full 等）が Tag コンポーネントで置き換え可能か確認してください。',
+  },
 ];
 
 const ANTI_PATTERN_GROUPS = [
@@ -859,10 +864,220 @@ const ANTI_PATTERN_GROUPS = [
       },
     ],
   },
+  {
+    id: 'tailwind-typography',
+    check: {
+      description: 'Tailwind デフォルト typography を Sparkle Design コンポーネント内で使わない',
+      recommendation:
+        'text-sm / text-xs / text-base / font-medium / font-semibold / font-bold は character-* utility に置き換えてください。',
+      pattern: /\b(text-(?:xs|sm|base|lg|xl|2xl)|font-(?:medium|semibold|bold|normal|light))\b/g,
+    },
+    featureSection: lines([
+      '### Tailwind デフォルト typography を使わない',
+      '',
+      '```tsx',
+      '// ✅ Correct — character-* utility を使う',
+      '<span className="character-3-regular-pro">テキスト</span>',
+      '',
+      '// ❌ Wrong — Tailwind デフォルトの typography を使わない',
+      '<span className="text-sm font-medium">テキスト</span>',
+      '```',
+      '',
+      'Sparkle Design コンポーネント内では `character-*-pro` / `character-*-mono` を使用する。Tailwind の `text-sm` / `font-medium` 等は使わない。',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'card-title-typography',
+    check: {
+      description: 'CardTitle に typography 系クラスを付与しない',
+      recommendation:
+        'CardTitle は character-4-bold-pro を内蔵しています。className で typography を上書きしないでください。',
+      pattern: /<CardTitle\b[^>]*\bclassName\s*=\s*(?:"[^"]*\bcharacter-[^"]*"|'[^']*\bcharacter-[^']*'|\{[^}]*\bcharacter-[^}]*\})[^>]*>/g,
+    },
+    featureSection: lines([
+      '### CardTitle に typography を上書きしない',
+      '',
+      '```tsx',
+      '// ✅ Correct — CardTitle はデフォルトで character-4-bold-pro が適用される',
+      '<CardTitle>タイトル</CardTitle>',
+      '',
+      '// ❌ Wrong — typography を上書きしない',
+      '<CardTitle className="character-2-bold-pro">タイトル</CardTitle>',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'card-control-non-button',
+    check: {
+      description: 'CardControl に Button / IconButton 以外を入れない',
+      recommendation:
+        'CardControl はアクションボタン用です。ステータス表示には CardDescription を使ってください。',
+      pattern: /<CardControl\b[^>]*>[\s\S]*?<(?!Button\b|IconButton\b|\/CardControl)\w+/g,
+    },
+    featureSection: lines([
+      '### CardControl にはアクションボタンのみを入れる',
+      '',
+      '```tsx',
+      '// ✅ Correct — Button / IconButton を CardControl に入れる',
+      '<CardControl>',
+      '  <Button>保存</Button>',
+      '</CardControl>',
+      '',
+      '// ❌ Wrong — ステータス表示を CardControl に入れない（CardDescription を使う）',
+      '<CardControl>',
+      '  <Tag status="negative">警告</Tag>',
+      '</CardControl>',
+      '```',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/card/index.tsx',
+        targetName: 'CardControl',
+        section: {
+          bullets: [
+            {
+              ja: 'CardControl にはアクション用の Button / IconButton のみを入れてください。ステータス表示（Tag 等）は CardDescription に入れてください。',
+              en: 'CardControl is for action buttons (Button / IconButton) only. Place status displays (Tag, etc.) in CardDescription.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<CardControl>',
+            '  <Button theme="neutral" variant="outline">キャンセル</Button>',
+            '  <Button>保存</Button>',
+            '</CardControl>',
+            '',
+            '// ❌ Wrong - ステータス表示を CardControl に入れない',
+            '<CardControl>',
+            '  <Tag status="negative">警告</Tag>',
+            '</CardControl>',
+          ]),
+        },
+      },
+    ],
+  },
+  {
+    id: 'card-padding-override',
+    check: {
+      description: 'Card 系コンポーネントのデフォルト padding を安易に上書きしない',
+      recommendation:
+        'CardHeader / CardContent のデフォルト padding（px-6 py-2）をそのまま使ってください。上書きは本当に必要な場合のみ。',
+      pattern: /<Card(?:Header|Content)\b[^>]*\bclassName\s*=\s*(?:"[^"]*\b(?:p-|px-|py-|pt-|pb-|pl-|pr-)[^"]*"|'[^']*\b(?:p-|px-|py-|pt-|pb-|pl-|pr-)[^']*'|\{[^}]*\b(?:p-|px-|py-|pt-|pb-|pl-|pr-)[^}]*\})[^>]*>/g,
+    },
+    featureSection: lines([
+      '### Card 系コンポーネントの padding を上書きしない',
+      '',
+      '```tsx',
+      '// ✅ Correct — デフォルトの padding をそのまま使う',
+      '<CardHeader>',
+      '  <CardTitle>タイトル</CardTitle>',
+      '</CardHeader>',
+      '',
+      '// ❌ Wrong — padding を安易に上書きしない',
+      '<CardHeader className="p-4 pb-2">',
+      '  <CardTitle>タイトル</CardTitle>',
+      '</CardHeader>',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'aschild-with-icon-props',
+    check: {
+      description: 'asChild 使用時に prefixIcon / suffixIcon / isLoading を使わない',
+      recommendation:
+        'asChild モードでは prefixIcon / suffixIcon / isLoading は無視されます。アイコン付きの Link が必要なら asChild を外してください。',
+      pattern: /<Button\b(?=[^>]*\basChild\b)(?=[^>]*\b(?:prefixIcon|suffixIcon|isLoading)\b)[^>]*>/g,
+    },
+    featureSection: lines([
+      '### asChild と prefixIcon / suffixIcon / isLoading を併用しない',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<Button asChild>',
+      '  <Link href="/items/new">新規作成</Link>',
+      '</Button>',
+      '',
+      '// ❌ Wrong — asChild では prefixIcon は反映されない',
+      '<Button asChild prefixIcon="add">',
+      '  <Link href="/items/new">新規作成</Link>',
+      '</Button>',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'disabled-vs-is-disabled',
+    check: {
+      description: 'Sparkle Design コンポーネントでは isDisabled を使う',
+      recommendation:
+        'Button / Input / Checkbox / IconButton では disabled ではなく isDisabled を使ってください。',
+      pattern: /<(Button|Input|Checkbox|IconButton)\b[^>]*\sdisabled(?!=\s*\{)\b/g,
+    },
+    featureSection: lines([
+      '### disabled ではなく isDisabled を使う',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<Button isDisabled>確定</Button>',
+      '<Input isDisabled placeholder="無効状態" />',
+      '',
+      '// ❌ Wrong — disabled 属性を直接使わない',
+      '<Button disabled>確定</Button>',
+      '```',
+      '',
+      'HTML 標準の `disabled` も互換のため受け付けますが、Sparkle Design のコードでは `isDisabled` に統一します。',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'button-prefixicon-jsx',
+    check: {
+      description: 'Button の prefixIcon / suffixIcon に JSX を渡さない',
+      recommendation:
+        'prefixIcon / suffixIcon には Material Symbols のアイコン名（文字列）を渡してください。JSX（<Icon ... />）は渡さないでください。',
+      pattern: /<Button\b[^>]*\b(?:prefixIcon|suffixIcon)\s*=\s*\{[^}]*</g,
+    },
+    featureSection: lines([
+      '### Button の prefixIcon / suffixIcon に JSX を渡さない',
+      '',
+      '```tsx',
+      '// ✅ Correct — 文字列でアイコン名を渡す',
+      '<Button prefixIcon="bolt">アクション</Button>',
+      '',
+      '// ❌ Wrong — JSX を渡さない',
+      '<Button prefixIcon={<Icon icon="bolt" size={4} />}>アクション</Button>',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'icon-children-text',
+    check: {
+      description: 'Icon の children にテキストを渡さない',
+      recommendation:
+        'Icon には icon prop でアイコン名を渡してください。children にテキストを渡すのは旧 Material Icons の書き方です。',
+      pattern: /<Icon\b(?:[^>]|\/(?!>))*>[^<]+<\/Icon>/g,
+    },
+    featureSection: lines([
+      '### Icon の children にテキストを渡さない',
+      '',
+      '```tsx',
+      '// ✅ Correct — icon prop を使う',
+      '<Icon icon="chevron_left" size={4} />',
+      '',
+      '// ❌ Wrong — children にテキストを渡さない',
+      '<Icon size={4}>chevron_left</Icon>',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
 ];
 
 function getCheckRules() {
-  const order = ['dialog-form', 'dialog-button-wrap', 'button-icon-only', 'material-symbols-direct', 'shadcn-token'];
+  const order = ['dialog-form', 'dialog-button-wrap', 'button-icon-only', 'material-symbols-direct', 'shadcn-token', 'tailwind-typography', 'card-title-typography', 'card-control-non-button', 'card-padding-override', 'aschild-with-icon-props', 'disabled-vs-is-disabled', 'button-prefixicon-jsx', 'icon-children-text'];
 
   return ANTI_PATTERN_GROUPS.filter((group) => group.check)
     .map((group) => ({

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. 基本的な設定値による置換（オブジェクト・配列・拡張フィールドはスキップ）
   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.1",
   "description": "Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール",
   "main": "lib/generate-css.js",
   "type": "module",