sparkle-design-cli 1.3.11 → 1.4.1

package/README.md

@@ -178,45 +178,86 @@ npx --yes sparkle-design-cli setup --assistant generic
 
 ### 設定オプション
 
+#### Core（プラグインが出力）
+
 - `primary`: プライマリカラー（blue, red, orange など）
-- `font-pro`: プロポーショナルフォント（Google Fonts の名前）
-- `font-mono`: モノスペースフォント（Google Fonts の名前）
+- `font-pro`: プロポーショナルフォント（文字列または配列。配列の場合はフォールバックチェーンになる）
+- `font-mono`: モノスペースフォント（文字列または配列）
 - `radius`: 角丸設定（sm, md, lg など）
+
+#### Core Options
+
+- `font-pro-weights`: （オプション）プロポーショナルフォントのウェイト配列（デフォルト: `[400, 700]`）
+- `font-mono-weights`: （オプション）モノスペースフォントのウェイト配列（デフォルト: `[400, 700]`）
 - `source-packages`: （オプション）`@source` ディレクティブで追加スキャンする npm パッケージの配列
 
-### source-packages オプション
+#### Custom Settings
 
-`@goodpatch/sparkle-design` を npm パッケージとして利用するプロジェクトでは、TailwindCSS v4 がパッケージ内のユーティリティクラスを検出できるように `@source` ディレクティブが必要です。
+- `custom-css`: （オプション）プロジェクト固有のカスタムトークン CSS ファイルのパス。`globals.css` に `@import` が自動挿入される
 
-`source-packages` を設定すると、CLI が `globals.css` に `@source` ディレクティブを自動挿入します。`@goodpatch/sparkle-design` は常にデフォルトで含まれます。
+### フォントウェイトとフォールバック
+
+`font-pro-weights` / `font-mono-weights` でフォントウェイトをカスタマイズできます。未指定時は `[400, 700]` がデフォルトです。
+
+`font-pro` / `font-mono` に配列を指定すると、フォントフォールバックチェーンとして複数の Google Fonts import が生成されます。
 
 ```json
 {
   "primary": "blue",
-  "font-mono": "BIZ UDGothic",
-  "font-pro": "BIZ UDPGothic",
-  "radius": "md",
-  "source-packages": []
+  "font-pro": ["Montserrat", "Noto Sans JP"],
+  "font-pro-weights": [400, 500, 600, 700],
+  "font-mono": "Roboto Mono",
+  "font-mono-weights": [400, 700],
+  "radius": "md"
 }
 ```
 
-追加の npm パッケージ（拡張リポジトリなど）をスキャン対象にする場合：
+生成される 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
 {
-  "source-packages": ["@scope/my-extension-design"]
+  "custom-css": "./src/app/custom-tokens.css"
 }
 ```
 
-生成される `globals.css`:
+CLI が `globals.css` に `@import` を自動挿入します。CLI はファイルの中身を一切触りません。
 
 ```css
-@import 'tailwindcss';
-/* npm パッケージのコンテンツスキャン（Tailwind がクラスを検出するために必要） */
-@source "../node_modules/@goodpatch/sparkle-design/dist";
-@source "../node_modules/@scope/my-extension-design/dist";
-/* Sparkle Design のカスタム定義（Tailwindの後にインポート） */
-@import './sparkle-design.css';
+/* globals.css に自動生成される構造 */
+/* フォントのインポート */
+@import '...google fonts...';
+@import "tailwindcss";
+/* Sparkle Design のカスタム定義 */
+@import "./sparkle-design.css";
+/* プロジェクト固有のカスタムトークン */
+@import "./custom-tokens.css";
+```
+
+### source-packages オプション
+
+`@goodpatch/sparkle-design` を npm パッケージとして利用するプロジェクトでは、TailwindCSS v4 がパッケージ内のユーティリティクラスを検出できるように `@source` ディレクティブが必要です。
+
+`source-packages` を設定すると、CLI が `globals.css` に `@source` ディレクティブを自動挿入します。`@goodpatch/sparkle-design` は常にデフォルトで含まれます。
+
+```json
+{
+  "source-packages": ["@scope/my-extension-design"]
+}
 ```
 
 > **注意**: `source-packages` を指定しない場合、`@source` ディレクティブは生成されません。

package/bin/sparkle-design.js

@@ -144,6 +144,23 @@ Generate options:
   -c, --config <path>        設定ファイルのパス (default: ./sparkle.config.json)
   -o, --output <path>        出力ファイルのパス (default: ./src/app/sparkle-design.css)
 
+sparkle.config.json の設定フィールド:
+  primary                    プライマリカラー (blue, red, orange, green, purple, pink, yellow など)
+  font-pro                   プロポーショナルフォント (Google Fonts の名前)
+                             配列を指定するとフォールバックチェーン
+                             例: ["Montserrat", "Noto Sans JP"]
+  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 が自動挿入される
+
+  設定ファイルは Sparkle Design Theme Settings Figma プラグインから書き出せます:
+  https://www.figma.com/community/plugin/1443500367756891364
+
 Check options:
   -h, --help                 このヘルプメッセージを表示
   --strict                   違反があれば exit code 1 で終了

package/lib/constants.js

@@ -37,8 +37,13 @@ export const REGEX = {
   SOURCE_DIRECTIVE: /@source\s+["'][^"']*["'];?\s*\n?/g,
   SOURCE_COMMENT: /\/\*\s*npm パッケージのコンテンツスキャン[^*]*\*\/\s*\n?/g,
 
+  // カスタムCSS関連
+  CUSTOM_CSS_IMPORT:
+    /\/\*\s*プロジェクト固有のカスタムトークン[^*]*\*\/\s*\n?|@import\s+['"][^"']*custom[^"']*['"];?\s*\n?/g,
+
   // テンプレート関連
   COLOR_TOKENS_PLACEHOLDER: /[ \t]*\/\* \{\{COLOR_TOKENS\}\} \*\/[ \t]*\n?/,
+  FONT_IMPORTS_PLACEHOLDER: /[ \t]*\/\* \{\{FONT_IMPORTS\}\} \*\/[ \t]*\n?/,
   RADIUS_SEMANTIC_PATTERN: (semanticName) =>
     new RegExp(`--radius-${semanticName}:\\s*var\\(--radius-[^)]+\\)`, 'g'),
 };
@@ -46,6 +51,20 @@ export const REGEX = {
 // テンプレートプレースホルダー
 export const PLACEHOLDERS = {
   COLOR_TOKENS: '{{COLOR_TOKENS}}',
+  FONT_IMPORTS: '{{FONT_IMPORTS}}',
+  FONT_FAMILY_PRO: '{{FONT_FAMILY_PRO}}',
+  FONT_FAMILY_MONO: '{{FONT_FAMILY_MONO}}',
+};
+
+// フォントのデフォルト設定
+export const FONT_DEFAULTS = {
+  WEIGHTS: [400, 700],
+  MATERIAL_SYMBOLS_IMPORT:
+    "@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0..200&display=block';",
+  GENERIC_FAMILY: {
+    pro: 'sans-serif',
+    mono: 'monospace',
+  },
 };
 
 // カラー変換精度
@@ -76,6 +95,7 @@ export const COMMENTS = {
   SPARKLE_IMPORT: '/* Sparkle Design のカスタム定義（Tailwindの後にインポート） */',
   TAILWIND_IMPORT: '/* Tailwindのインポート */',
   SOURCE_DIRECTIVE: '/* npm パッケージのコンテンツスキャン（Tailwind がクラスを検出するために必要） */',
+  CUSTOM_CSS: '/* プロジェクト固有のカスタムトークン */',
 };
 
 // インポート文のテンプレート

package/lib/font-manager.js

@@ -5,7 +5,7 @@
 
 import fs from 'fs';
 import path from 'path';
-import { REGEX, COMMENTS, IMPORTS, MESSAGES } from './constants.js';
+import { REGEX, COMMENTS, IMPORTS, MESSAGES, FONT_DEFAULTS } from './constants.js';
 
 /**
  * sparkle-design.css からフォントの@import文を抽出する
@@ -72,18 +72,56 @@ function createSourceBlock(sourcePackages = [], nodeModulesRel = '../node_module
   return [COMMENTS.SOURCE_DIRECTIVE, ...sourceLines].join('\n');
 }
 
+/**
+ * カスタムCSS importブロックを生成する
+ * @param {string} customCssPath custom-css ファイルの相対パス
+ * @param {string} globalsPath globals.css の絶対パス（相対パス計算用）
+ * @returns {string} カスタムCSS importブロック
+ */
+function createCustomCssImportBlock(customCssPath, globalsPath) {
+  if (!customCssPath) {
+    return '';
+  }
+
+  // custom-css パスは sparkle.config.json からの相対パス（= プロジェクトルートからの相対パス）
+  // globals.css からの相対パスに変換
+  const globalsDir = path.dirname(globalsPath);
+  const absoluteCustomPath = path.resolve(process.cwd(), customCssPath);
+  let relativePath = path.relative(globalsDir, absoluteCustomPath).split(path.sep).join('/');
+
+  // 相対パスが ./ で始まらない場合は付与
+  if (!relativePath.startsWith('.')) {
+    relativePath = `./${relativePath}`;
+  }
+
+  return [COMMENTS.CUSTOM_CSS, `@import "${relativePath}";`].join('\n');
+}
+
 /**
  * sparkle-design.css importブロックを生成する
  * @param {Array<string>} sourcePackages 追加パッケージ名の配列
  * @param {string} globalsPath globals.css の絶対パス（@source パス計算用）
+ * @param {string|null} customCssPath custom-css ファイルの相対パス
  * @returns {string} sparkle-design.css importブロック
  */
-function createSparkleImportBlock(sourcePackages = [], globalsPath = null) {
-  if (sourcePackages === null || sourcePackages === undefined) {
-    return ['', COMMENTS.SPARKLE_IMPORT, IMPORTS.SPARKLE_DESIGN, ''].join('\n');
+function createSparkleImportBlock(sourcePackages = [], globalsPath = null, customCssPath = 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 を sparkle-design.css の後に配置
+  const customBlock = createCustomCssImportBlock(customCssPath, globalsPath);
+  if (customBlock) {
+    parts.push(customBlock);
   }
-  const nodeModulesRel = globalsPath ? resolveNodeModulesRelPath(globalsPath) : '../node_modules';
-  return ['', createSourceBlock(sourcePackages, nodeModulesRel), COMMENTS.SPARKLE_IMPORT, IMPORTS.SPARKLE_DESIGN, ''].join('\n');
+
+  parts.push('');
+  return parts.join('\n');
 }
 
 /**
@@ -104,6 +142,9 @@ function removeExistingImports(globalsContent) {
   // 既存のsparkle-design.css importを削除
   cleaned = cleaned.replace(REGEX.SPARKLE_IMPORT, '');
 
+  // 既存のカスタムCSS importを削除
+  cleaned = cleaned.replace(REGEX.CUSTOM_CSS_IMPORT, '');
+
   return cleaned;
 }
 
@@ -159,9 +200,10 @@ function reconstructGlobalsCss(globalsContent, fontImportBlock, sparkleImportBlo
  * @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
  */
-export function updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages = null) {
+export function updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages = null, customCssPath = null) {
   if (fontImports.length === 0) {
     return false;
   }
@@ -182,7 +224,7 @@ export function updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages
 
     // 4. importブロックを生成
     const fontImportBlock = createFontImportBlock(fontImports);
-    const sparkleImportBlock = createSparkleImportBlock(sourcePackages, globalsPath);
+    const sparkleImportBlock = createSparkleImportBlock(sourcePackages, globalsPath, customCssPath);
 
     // 5. globals.css を再構築
     const reconstructedContent = reconstructGlobalsCss(
@@ -208,8 +250,9 @@ export function updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages
  * sparkle-design.css からフォントimportを抽出し、globals.css に移動する
  * @param {string} sparkleDesignPath sparkle-design.cssのパス
  * @param {Array<string>|null} sourcePackages 追加パッケージ名の配列（null の場合は @source を生成しない）
+ * @param {string|null} customCssPath custom-css ファイルの相対パス
  */
-export function manageFontImports(sparkleDesignPath, sourcePackages = null) {
+export function manageFontImports(sparkleDesignPath, sourcePackages = null, customCssPath = null) {
   try {
     // 1. globals.cssのパスを推定（sparkle-design.cssと同じディレクトリ）
     const globalsPath = path.join(path.dirname(sparkleDesignPath), 'globals.css');
@@ -232,7 +275,7 @@ export function manageFontImports(sparkleDesignPath, sourcePackages = null) {
     console.log(MESSAGES.FONT_DETECTED(fontImports.length));
 
     // 4. globals.css にフォントimportを追加
-    const globalsUpdated = updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages);
+    const globalsUpdated = updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages, customCssPath);
 
     if (!globalsUpdated) {
       console.log(MESSAGES.FONT_REMOVE_SKIPPED);

package/lib/generate-css.js

@@ -7,7 +7,7 @@
 
 import fs from 'fs';
 import path from 'path';
-import { REGEX, PATHS, MESSAGES } from './constants.js';
+import { REGEX, PATHS, MESSAGES, FONT_DEFAULTS } from './constants.js';
 import {
   loadConfig,
   loadTemplate,
@@ -48,6 +48,71 @@ function dedupeFontImports(cssContent) {
     .join('\n');
 }
 
+/**
+ * フォント設定を正規化する（文字列 → 配列）
+ * @param {string|string[]} fontValue フォント名（文字列または配列）
+ * @returns {string[]} フォント名の配列
+ */
+function normalizeFontConfig(fontValue) {
+  if (Array.isArray(fontValue)) {
+    return fontValue;
+  }
+  return [fontValue];
+}
+
+/**
+ * Google Fonts の @import 行を生成する
+ * @param {string[]} fonts フォント名の配列
+ * @param {number[]} weights ウェイトの配列
+ * @returns {string[]} @import 文の配列
+ */
+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';`;
+  });
+}
+
+/**
+ * フォントファミリーの CSS 値を生成する
+ * @param {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}'`);
+  return [...quoted, genericFamily].join(', ');
+}
+
+/**
+ * フォント import ブロック全体を生成する（Material Symbols + PRO + MONO）
+ * @param {Object} config 設定オブジェクト
+ * @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;
+
+  const imports = [
+    FONT_DEFAULTS.MATERIAL_SYMBOLS_IMPORT,
+    ...generateGoogleFontImports(proFonts, proWeights),
+    ...generateGoogleFontImports(monoFonts, monoWeights),
+  ];
+
+  // 重複排除（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');
+}
+
 /**
  * テンプレート変数を設定値で置換する
  * @param {string} template CSSテンプレート
@@ -65,8 +130,24 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
   // プレースホルダーを色のトークンで置換（改行を含む）
   processedCSS = processedCSS.replace(REGEX.COLOR_TOKENS_PLACEHOLDER, `${colorTokens}\n`);
 
-  // 2. 基本的な設定値による置換
+  // 2. フォント import ブロックを生成して置換
+  const fontImportsBlock = generateFontImportsBlock(config);
+  processedCSS = processedCSS.replace(REGEX.FONT_IMPORTS_PLACEHOLDER, `${fontImportsBlock}\n`);
+
+  // 3. フォントファミリー CSS 値を生成して置換
+  const proFonts = normalizeFontConfig(config['font-pro']);
+  const monoFonts = normalizeFontConfig(config['font-mono']);
+  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 の配列以外）
   Object.entries(config).forEach(([key, value]) => {
+    // 配列や font-*-weights はスキップ
+    if (Array.isArray(value) || key.endsWith('-weights') || key === 'custom-css') {
+      return;
+    }
     // 通常のプレースホルダー（CSS用 - スペースはそのまま）
     const placeholder = `{{${key.toUpperCase().replace('-', '_')}}}`;
     processedCSS = processedCSS.replace(new RegExp(placeholder, 'g'), value);
@@ -79,7 +160,7 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
     }
   });
 
-  // 3. Radiusの一括置換
+  // 6. Radiusの一括置換
   if (config.radius && radiusMapping[config.radius]) {
     const radiusValues = radiusMapping[config.radius];
 
@@ -165,7 +246,8 @@ export function generateCSS(configPath = null, outputPath = null) {
   // 6. フォント管理の自動処理を実行
   console.log(MESSAGES.FONT_MANAGEMENT_START);
   const sourcePackages = 'source-packages' in config ? (config['source-packages'] || []) : null;
-  manageFontImports(resolvedOutputPath, sourcePackages);
+  const customCssPath = config['custom-css'] || null;
+  manageFontImports(resolvedOutputPath, sourcePackages, customCssPath);
 
   console.log(MESSAGES.SUCCESS);
 }
@@ -191,6 +273,11 @@ export {
   hexToOklch,
   generateColorTokens,
   dedupeFontImports,
+  // フォント処理
+  normalizeFontConfig,
+  generateGoogleFontImports,
+  generateFontFamilyValue,
+  generateFontImportsBlock,
   // フォント管理
   extractFontImports,
   removeFontImportsFromCSS,

package/package.json

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

package/templates/sparkle-variables/sparkle-design.template.css

@@ -1,7 +1,5 @@
 /* フォントのインポート */
-@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0..200&display=block';
-@import 'https://fonts.googleapis.com/css2?family={{FONT_PRO_URL}}:wght@400;700&display=swap';
-@import 'https://fonts.googleapis.com/css2?family={{FONT_MONO_URL}}:wght@400;700&display=swap';
+/* {{FONT_IMPORTS}} */
 
 /* Primitive Tokens */
 :root {
@@ -21,8 +19,8 @@
 
   /* タイポグラフィ変数 */
   /* フォントファミリー */
-  --font-family-pro: '{{FONT_PRO}}', sans-serif;
-  --font-family-mono: '{{FONT_MONO}}', monospace;
+  --font-family-pro: {{FONT_FAMILY_PRO}};
+  --font-family-mono: {{FONT_FAMILY_MONO}};
   --font-family-icon: 'Material Symbols Rounded';
 
   /* フォントサイズ */