sparkle-design-cli 1.1.9 → 1.2.1

package/README.md

@@ -83,6 +83,40 @@ sparkle-design-cli -c ./config/custom.json -o ./dist/styles.css
 - カスタム出力先: `-o` オプションで指定可能
 - 実行場所を基準として相対パスで処理されます
 
+## 自動フォント管理
+
+**v1.2.0 以降の新機能**
+
+CLI は自動的にフォント管理を行います：
+
+1. **フォント検出**: `sparkle-design.css` から Google Fonts の `@import` 文を検出
+2. **globals.css への移動**: フォントの `@import` を `globals.css` の先頭に移動
+3. **sparkle-design.css から削除**: 元のファイルからフォント `@import` を削除
+
+### なぜこの処理が必要なのか？
+
+CSS の仕様では、`@import` 文は `@charset` と `@layer` 以外のすべてのルールより前に記述する必要があります。Tailwind CSS v4 と組み合わせた場合、この順序が正しくないとビルド時に警告が発生します。
+
+この機能により、以下の警告が自動的に解決されます：
+
+```text
+⚠️ @import rules must precede all rules aside from @charset and @layer statements
+```
+
+### 動作条件
+
+- `globals.css` が `sparkle-design.css` と同じディレクトリに存在する場合のみ実行されます
+- `globals.css` が存在しない場合は、フォント管理処理はスキップされます
+
+### 出力例
+
+```text
+📦 フォント管理処理を開始します...
+📝 3個のフォントimportを検出しました
+✅ globals.css にフォントimportを追加しました
+✅ sparkle-design.css からフォントimportを削除しました
+```
+
 ## 開発
 
 ### セットアップ

package/lib/color-utils.js

@@ -0,0 +1,110 @@
+/**
+ * カラー変換ユーティリティ
+ */
+
+import { oklch } from 'culori';
+import { COLOR_PRECISION, GRAY_LEVEL_MAP, MESSAGES } from './constants.js';
+
+/**
+ * 16進数カラーをrgba形式に変換
+ * @param {string} hex 16進数のカラーコード（#付きまたは無し）
+ * @returns {string} rgba形式の文字列
+ */
+export function hexToRgba(hex) {
+  // #を削除
+  let cleanHex = hex.replace('#', '');
+
+  // 3桁の場合は6桁に拡張
+  if (cleanHex.length === 3) {
+    cleanHex = cleanHex
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+
+  const r = parseInt(cleanHex.substring(0, 2), 16);
+  const g = parseInt(cleanHex.substring(2, 4), 16);
+  const b = parseInt(cleanHex.substring(4, 6), 16);
+
+  return `rgba(${r}, ${g}, ${b}, 1)`;
+}
+
+/**
+ * 16進数カラーをOKLCH形式に変換
+ * @param {string} hex 16進数のカラーコード（#付きまたは無し）
+ * @returns {string} OKLCH形式の文字列
+ */
+export function hexToOklch(hex) {
+  // #を削除
+  const cleanHex = hex.replace('#', '');
+
+  // 3桁の場合は6桁に、4桁の場合は8桁に拡張
+  let fullHex = cleanHex;
+  if (cleanHex.length === 3 || cleanHex.length === 4) {
+    fullHex = cleanHex
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+
+  // culoriを使用してHEXからOKLCHに変換
+  const oklchColor = oklch(`#${fullHex}`);
+
+  if (!oklchColor) {
+    console.warn(MESSAGES.COLOR_CONVERSION_FAILED(hex));
+    return `oklch(0 0 0)`;
+  }
+
+  // 精度を調整して出力
+  const l = Math.round((oklchColor.l || 0) * COLOR_PRECISION.OKLCH_L) / COLOR_PRECISION.OKLCH_L;
+  const c = Math.round((oklchColor.c || 0) * COLOR_PRECISION.OKLCH_C) / COLOR_PRECISION.OKLCH_C;
+  const h = oklchColor.h
+    ? Math.round(oklchColor.h * COLOR_PRECISION.OKLCH_H) / COLOR_PRECISION.OKLCH_H
+    : 0;
+
+  // アルファ値がある場合（1未満の場合のみ出力に追加）
+  if (oklchColor.alpha !== undefined && oklchColor.alpha < 1) {
+    const a =
+      Math.round(oklchColor.alpha * COLOR_PRECISION.OKLCH_ALPHA) / COLOR_PRECISION.OKLCH_ALPHA;
+    return `oklch(${l} ${c} ${h} / ${a})`;
+  }
+
+  return `oklch(${l} ${c} ${h})`;
+}
+
+/**
+ * 色のトークンを生成する
+ * @param {Object} colors colors.jsonから読み込んだ色の定義
+ * @param {Object} grayMapping gray.jsonから読み込んだグレーの定義
+ * @param {string} primaryColor プライマリカラーの名前
+ * @returns {string} 色のトークンのCSS文字列
+ */
+export function generateColorTokens(colors, grayMapping, primaryColor) {
+  const colorTokens = [];
+
+  // 通常の色トークンを生成
+  Object.entries(colors).forEach(([colorName, colorValues]) => {
+    if (typeof colorValues === 'object' && colorValues !== null) {
+      Object.entries(colorValues).forEach(([level, hexValue]) => {
+        const oklchValue = hexToOklch(hexValue);
+        colorTokens.push(`  --color-${colorName}-${level}: ${oklchValue};`);
+      });
+    } else if (typeof colorValues === 'string') {
+      // black, white, web-focusなどの単色
+      const oklchValue = hexToOklch(colorValues);
+      colorTokens.push(`  --color-${colorName}: ${oklchValue};`);
+    }
+  });
+
+  // グレーの色トークンを生成（プライマリカラーに基づく）
+  if (primaryColor && grayMapping[primaryColor]) {
+    const grayColors = grayMapping[primaryColor];
+    Object.entries(grayColors).forEach(([key, hexValue]) => {
+      const grayLevel = GRAY_LEVEL_MAP[key] || key;
+      const oklchValue = hexToOklch(hexValue);
+      colorTokens.push(`  --color-gray-${grayLevel}: ${oklchValue};`);
+    });
+  }
+
+  return colorTokens.join('\n');
+}

package/lib/constants.js

@@ -0,0 +1,124 @@
+/**
+ * sparkle-design-cli で使用する定数定義
+ */
+
+// ファイルパス関連
+export const FILE_NAMES = {
+  CONFIG: 'sparkle.config.json',
+  OUTPUT: 'sparkle-design.css',
+  GLOBALS: 'globals.css',
+  TEMPLATE: 'sparkle-design.template.css',
+  COLORS: 'colors.json',
+  GRAY: 'gray.json',
+  RADIUS: 'radius.csv',
+};
+
+export const PATHS = {
+  DEFAULT_OUTPUT_DIR: ['src', 'app'],
+  TEMPLATE_DIR: ['templates', 'sparkle-variables'],
+};
+
+// 正規表現パターン
+export const REGEX = {
+  // フォント関連
+  FONT_IMPORT: /@import\s+url\([^)]+fonts\.googleapis\.com[^)]+\);?/g,
+  FONT_IMPORT_WITH_COMMENT:
+    /\/\*\s*フォントのインポート\s*\*\/\s*\n?|@import\s+url\([^)]+fonts\.googleapis\.com[^)]+\);?\s*\n?/g,
+  EXISTING_FONT_IMPORT_BLOCK:
+    /\/\*\s*フォントのインポート[^*]*\*\/\s*\n?(?:@import\s+url\([^)]+fonts\.googleapis\.com[^)]+\);?\s*\n?)*\n?/g,
+
+  // Sparkle Design関連
+  SPARKLE_IMPORT:
+    /\/\*\s*Sparkle Design[^*]*\*\/\s*\n?|@import\s+['"](\.\/)?sparkle-design\.css['"];?\s*\n?/g,
+  TAILWIND_IMPORT: /@import\s+['"]tailwindcss['"];?/,
+
+  // テンプレート関連
+  COLOR_TOKENS_PLACEHOLDER: /\s*\/\* \{\{COLOR_TOKENS\}\} \*\/\s*/,
+  RADIUS_SEMANTIC_PATTERN: (semanticName) =>
+    new RegExp(`--radius-${semanticName}:\\s*var\\(--radius-[^)]+\\)`, 'g'),
+};
+
+// テンプレートプレースホルダー
+export const PLACEHOLDERS = {
+  COLOR_TOKENS: '{{COLOR_TOKENS}}',
+};
+
+// カラー変換精度
+export const COLOR_PRECISION = {
+  OKLCH_L: 10000,
+  OKLCH_C: 10000,
+  OKLCH_H: 10,
+  OKLCH_ALPHA: 10000,
+};
+
+// グレーレベルのマッピング
+export const GRAY_LEVEL_MAP = {
+  0: '50',
+  1: '100',
+  2: '200',
+  3: '300',
+  4: '400',
+  5: '500',
+  6: '600',
+  7: '700',
+  8: '800',
+  9: '900',
+};
+
+// コメントテンプレート
+export const COMMENTS = {
+  FONT_IMPORT: '/* フォントのインポート（CSSの仕様上、@importは最初に記述する必要がある） */',
+  SPARKLE_IMPORT: '/* Sparkle Design のカスタム定義（Tailwindの後にインポート） */',
+  TAILWIND_IMPORT: '/* Tailwindのインポート */',
+};
+
+// インポート文のテンプレート
+export const IMPORTS = {
+  SPARKLE_DESIGN: '@import "./sparkle-design.css";',
+  TAILWIND: '@import "tailwindcss";',
+};
+
+// ログメッセージ
+export const MESSAGES = {
+  START: '🚀 Sparkle Design CSS Generator を開始します...\n',
+  SUCCESS: '\n🎉 CSS生成が完了しました！',
+  FONT_MANAGEMENT_START: '\n📦 フォント管理処理を開始します...',
+
+  // 成功メッセージ
+  CONFIG_LOADED: (path) => `✅ sparkle.config.json を読み込みました: ${path}`,
+  TEMPLATE_LOADED: '✅ CSSテンプレートを読み込みました',
+  COLORS_LOADED: '✅ colors.json を読み込みました',
+  GRAY_LOADED: '✅ gray.json を読み込みました',
+  RADIUS_LOADED: '✅ radius.csv を読み込みました',
+  TEMPLATE_PROCESSED: '✅ テンプレートを設定値で処理しました',
+  CSS_GENERATED: (path) => `✅ sparkle-design.css を生成しました: ${path}`,
+  RADIUS_APPLIED: (radius) => `✅ ${radius}に対応するradius設定を適用しました`,
+  GLOBALS_UPDATED: (path) =>
+    `✅ globals.css にフォントimportとsparkle-design.css importを追加しました: ${path}`,
+  FONT_REMOVED: '✅ sparkle-design.css からフォントimportを削除しました',
+
+  // 情報メッセージ
+  GLOBALS_NOT_FOUND: 'ℹ️  globals.css が見つかりません。フォント処理をスキップします。',
+  NO_FONT_IMPORTS: 'ℹ️  sparkle-design.css にフォントimportが見つかりません。',
+  FONT_DETECTED: (count) => `📝 ${count}個のフォントimportを検出しました`,
+
+  // スキップメッセージ
+  FONT_REMOVE_SKIPPED: 'ℹ️  globals.css の更新に失敗したため、フォントimport削除をスキップします。',
+
+  // 警告メッセージ
+  TAILWIND_NOT_FOUND: '⚠️  globals.css に Tailwind import が見つかりません。',
+  GLOBALS_UPDATE_FAILED: (error) => `⚠️  globals.css の更新に失敗しました: ${error}`,
+  FONT_MANAGEMENT_ERROR: (error) => `⚠️  フォント管理処理でエラーが発生しました: ${error}`,
+  COLOR_CONVERSION_FAILED: (hex) => `⚠️ 色の変換に失敗しました: ${hex}`,
+
+  // エラーメッセージ
+  CONFIG_LOAD_FAILED: (error) => `❌ sparkle.config.json の読み込みに失敗しました: ${error}`,
+  CONFIG_PATH_INFO: (path) => `設定ファイルパス: ${path}`,
+  CONFIG_HELP: '設定ファイルは専用プラグインから生成するか、手動で作成してください',
+  TEMPLATE_LOAD_FAILED: (error) => `❌ CSSテンプレートの読み込みに失敗しました: ${error}`,
+  TEMPLATE_PATH_INFO: (path) => `テンプレートファイルが存在することを確認してください: ${path}`,
+  COLORS_LOAD_FAILED: (error) => `❌ colors.json の読み込みに失敗しました: ${error}`,
+  GRAY_LOAD_FAILED: (error) => `❌ gray.json の読み込みに失敗しました: ${error}`,
+  RADIUS_LOAD_FAILED: (error) => `❌ radius.csv の読み込みに失敗しました: ${error}`,
+  CSS_WRITE_FAILED: (error) => `❌ CSSファイルの書き出しに失敗しました: ${error}`,
+};

package/lib/file-loader.js

@@ -0,0 +1,168 @@
+/**
+ * ファイル読み込み機能
+ * 設定ファイル、テンプレート、カラー定義などの読み込み処理を統一
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { FILE_NAMES, PATHS, MESSAGES } from './constants.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * ファイルを読み込む共通関数
+ * @param {string} filePath ファイルパス
+ * @param {string} successMessage 成功時のメッセージ
+ * @param {string|Function} errorMessage エラー時のメッセージ（文字列 or (error) => string）
+ * @param {Function} additionalErrorHandler 追加のエラーハンドラ（オプション）
+ * @returns {string} ファイル内容
+ */
+function readFile(filePath, successMessage, errorMessage, additionalErrorHandler = null) {
+  try {
+    const content = fs.readFileSync(filePath, 'utf8');
+    console.log(successMessage);
+    return content;
+  } catch (error) {
+    const message =
+      typeof errorMessage === 'function'
+        ? errorMessage(error)
+        : errorMessage || `❌ ファイルの読み込みに失敗しました: ${error.message}`;
+
+    console.error(message);
+    if (additionalErrorHandler) {
+      additionalErrorHandler(filePath, error);
+    }
+    process.exit(1);
+  }
+}
+
+/**
+ * JSONファイルを読み込む共通関数
+ * @param {string} filePath ファイルパス
+ * @param {string} successMessage 成功時のメッセージ
+ * @param {string|Function} errorMessage エラー時のメッセージ（文字列 or (error) => string）
+ * @param {Function} additionalErrorHandler 追加のエラーハンドラ（オプション）
+ * @returns {Object} パース済みのJSONオブジェクト
+ */
+function readJsonFile(filePath, successMessage, errorMessage, additionalErrorHandler = null) {
+  const content = readFile(filePath, successMessage, errorMessage, additionalErrorHandler);
+
+  try {
+    return JSON.parse(content);
+  } catch (error) {
+    const message =
+      typeof errorMessage === 'function'
+        ? errorMessage(error)
+        : errorMessage || `❌ JSONのパースに失敗しました: ${error.message}`;
+
+    console.error(message);
+    if (additionalErrorHandler) {
+      additionalErrorHandler(filePath, error);
+    }
+    process.exit(1);
+  }
+}
+
+/**
+ * テンプレートディレクトリのパスを取得する
+ * @returns {string} テンプレートディレクトリのパス
+ */
+function getTemplateDir() {
+  return path.join(__dirname, '..', ...PATHS.TEMPLATE_DIR);
+}
+
+/**
+ * sparkle.config.jsonを読み込む
+ * @param {string|null} configPath カスタム設定ファイルのパス（オプション）
+ * @returns {Object} 設定オブジェクト
+ */
+export function loadConfig(configPath = null) {
+  // カスタムパスが指定されていない場合は実行場所のsparkle.config.jsonを探す
+  const defaultConfigPath = path.resolve(process.cwd(), FILE_NAMES.CONFIG);
+  const resolvedConfigPath = configPath ? path.resolve(configPath) : defaultConfigPath;
+
+  const config = readJsonFile(
+    resolvedConfigPath,
+    MESSAGES.CONFIG_LOADED(resolvedConfigPath),
+    (error) => MESSAGES.CONFIG_LOAD_FAILED(error.message),
+    (filePath, _error) => {
+      console.error(MESSAGES.CONFIG_PATH_INFO(filePath));
+      console.error(MESSAGES.CONFIG_HELP);
+    }
+  );
+
+  console.log('   設定内容:', config);
+  return config;
+}
+
+/**
+ * CSSテンプレートを読み込む
+ * @returns {string} テンプレート内容
+ */
+export function loadTemplate() {
+  const templatePath = path.join(getTemplateDir(), FILE_NAMES.TEMPLATE);
+
+  return readFile(
+    templatePath,
+    MESSAGES.TEMPLATE_LOADED,
+    (error) => MESSAGES.TEMPLATE_LOAD_FAILED(error.message),
+    (filePath) => {
+      console.error(MESSAGES.TEMPLATE_PATH_INFO(filePath));
+    }
+  );
+}
+
+/**
+ * 色定義（colors.json）を読み込む
+ * @returns {Object} 色定義オブジェクト
+ */
+export function loadColors() {
+  const colorsPath = path.join(getTemplateDir(), FILE_NAMES.COLORS);
+
+  return readJsonFile(colorsPath, MESSAGES.COLORS_LOADED, (error) =>
+    MESSAGES.COLORS_LOAD_FAILED(error.message)
+  );
+}
+
+/**
+ * gray.jsonを読み込む
+ * @returns {Object} グレーマッピングオブジェクト
+ */
+export function loadGrayMapping() {
+  const grayJsonPath = path.join(getTemplateDir(), FILE_NAMES.GRAY);
+
+  return readJsonFile(grayJsonPath, MESSAGES.GRAY_LOADED, (error) =>
+    MESSAGES.GRAY_LOAD_FAILED(error.message)
+  );
+}
+
+/**
+ * radius.csvを読み込む
+ * @returns {Object} Radiusマッピングオブジェクト
+ */
+export function loadRadiusMapping() {
+  const radiusCsvPath = path.join(getTemplateDir(), FILE_NAMES.RADIUS);
+
+  const csvContent = readFile(radiusCsvPath, MESSAGES.RADIUS_LOADED, (error) =>
+    MESSAGES.RADIUS_LOAD_FAILED(error.message)
+  );
+
+  // CSVをパース
+  const lines = csvContent.trim().split('\n');
+  const headers = lines[0].split(',');
+  const radiusMapping = {};
+
+  for (let i = 1; i < lines.length; i++) {
+    const values = lines[i].split(',');
+    const name = values[0];
+    radiusMapping[name] = {};
+
+    for (let j = 1; j < headers.length; j++) {
+      radiusMapping[name][headers[j]] = values[j];
+    }
+  }
+
+  return radiusMapping;
+}

package/lib/font-manager.js

@@ -0,0 +1,201 @@
+/**
+ * フォント管理機能
+ * sparkle-design.css からフォントimportを抽出し、globals.css に移動する
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { REGEX, COMMENTS, IMPORTS, MESSAGES } from './constants.js';
+
+/**
+ * sparkle-design.css からフォントの@import文を抽出する
+ * @param {string} cssContent CSS内容
+ * @returns {Array<string>} フォントimport文の配列
+ */
+export function extractFontImports(cssContent) {
+  const matches = cssContent.match(REGEX.FONT_IMPORT);
+  return matches || [];
+}
+
+/**
+ * sparkle-design.css からフォントの@import文を削除する
+ * @param {string} cssContent CSS内容
+ * @returns {string} フォントimportを削除したCSS
+ */
+export function removeFontImportsFromCSS(cssContent) {
+  return cssContent.replace(REGEX.FONT_IMPORT_WITH_COMMENT, '');
+}
+
+/**
+ * フォントimportブロックを生成する
+ * @param {Array<string>} fontImports フォントimport文の配列
+ * @returns {string} フォントimportブロック
+ */
+function createFontImportBlock(fontImports) {
+  return [COMMENTS.FONT_IMPORT, ...fontImports, ''].join('\n');
+}
+
+/**
+ * sparkle-design.css importブロックを生成する
+ * @returns {string} sparkle-design.css importブロック
+ */
+function createSparkleImportBlock() {
+  return ['', COMMENTS.SPARKLE_IMPORT, IMPORTS.SPARKLE_DESIGN, ''].join('\n');
+}
+
+/**
+ * globals.css の既存のimportを削除する
+ * @param {string} globalsContent globals.cssの内容
+ * @returns {string} 既存importを削除したglobals.css
+ */
+function removeExistingImports(globalsContent) {
+  let cleaned = globalsContent;
+
+  // 既存のフォントimportを削除
+  cleaned = cleaned.replace(REGEX.EXISTING_FONT_IMPORT_BLOCK, '');
+
+  // 既存のsparkle-design.css importを削除
+  cleaned = cleaned.replace(REGEX.SPARKLE_IMPORT, '');
+
+  return cleaned;
+}
+
+/**
+ * Tailwind import の位置を見つける
+ * @param {string} globalsContent globals.cssの内容
+ * @returns {{match: string, index: number, afterIndex: number} | null} Tailwind importの情報
+ */
+function findTailwindImport(globalsContent) {
+  const tailwindMatch = globalsContent.match(REGEX.TAILWIND_IMPORT);
+
+  if (!tailwindMatch) {
+    return null;
+  }
+
+  const tailwindIndex = globalsContent.indexOf(tailwindMatch[0]);
+  const afterTailwindIndex = tailwindIndex + tailwindMatch[0].length;
+
+  return {
+    match: tailwindMatch[0],
+    index: tailwindIndex,
+    afterIndex: afterTailwindIndex,
+  };
+}
+
+/**
+ * globals.css を再構築する
+ * @param {string} globalsContent 元のglobals.cssの内容
+ * @param {string} fontImportBlock フォントimportブロック
+ * @param {string} sparkleImportBlock sparkle-design.css importブロック
+ * @param {Object} tailwindInfo Tailwind importの情報
+ * @returns {string} 再構築されたglobals.css
+ */
+function reconstructGlobalsCss(globalsContent, fontImportBlock, sparkleImportBlock, tailwindInfo) {
+  const beforeTailwind = globalsContent.substring(0, tailwindInfo.index);
+  const afterTailwind = globalsContent.substring(tailwindInfo.afterIndex);
+
+  // フォントimport + Tailwind + sparkle-design.css + 残りのコンテンツ
+  return (
+    fontImportBlock +
+    beforeTailwind +
+    tailwindInfo.match +
+    sparkleImportBlock +
+    afterTailwind.trimStart()
+  );
+}
+
+/**
+ * globals.css を構造化して管理する
+ * - フォントimportを先頭に配置
+ * - Tailwind importを確保
+ * - sparkle-design.css importをTailwindの後に配置
+ * @param {Array<string>} fontImports フォントimport文の配列
+ * @param {string} globalsPath globals.cssのパス
+ * @returns {boolean} globals.css の更新に成功した場合は true
+ */
+export function updateGlobalsWithFonts(fontImports, globalsPath) {
+  if (fontImports.length === 0) {
+    return false;
+  }
+
+  try {
+    // 1. globals.css を読み込む
+    let globalsContent = fs.readFileSync(globalsPath, 'utf8');
+
+    // 2. 既存のimportを削除
+    globalsContent = removeExistingImports(globalsContent);
+
+    // 3. Tailwind import の位置を見つける
+    const tailwindInfo = findTailwindImport(globalsContent);
+    if (!tailwindInfo) {
+      console.warn(MESSAGES.TAILWIND_NOT_FOUND);
+      return false;
+    }
+
+    // 4. importブロックを生成
+    const fontImportBlock = createFontImportBlock(fontImports);
+    const sparkleImportBlock = createSparkleImportBlock();
+
+    // 5. globals.css を再構築
+    const reconstructedContent = reconstructGlobalsCss(
+      globalsContent,
+      fontImportBlock,
+      sparkleImportBlock,
+      tailwindInfo
+    );
+
+    // 6. 更新したglobals.cssを書き込む
+    fs.writeFileSync(globalsPath, reconstructedContent, 'utf8');
+    console.log(MESSAGES.GLOBALS_UPDATED(globalsPath));
+    return true;
+  } catch (error) {
+    console.error(MESSAGES.GLOBALS_UPDATE_FAILED(error.message));
+    // globals.cssの更新は必須ではないので、エラーでも処理を続行
+    return false;
+  }
+}
+
+/**
+ * フォント管理の自動処理を実行する
+ * sparkle-design.css からフォントimportを抽出し、globals.css に移動する
+ * @param {string} sparkleDesignPath sparkle-design.cssのパス
+ */
+export function manageFontImports(sparkleDesignPath) {
+  try {
+    // 1. globals.cssのパスを推定（sparkle-design.cssと同じディレクトリ）
+    const globalsPath = path.join(path.dirname(sparkleDesignPath), 'globals.css');
+
+    // 2. globals.cssが存在しない場合はスキップ
+    if (!fs.existsSync(globalsPath)) {
+      console.log(MESSAGES.GLOBALS_NOT_FOUND);
+      return;
+    }
+
+    // 3. sparkle-design.css からフォントimportを抽出
+    const sparkleContent = fs.readFileSync(sparkleDesignPath, 'utf8');
+    const fontImports = extractFontImports(sparkleContent);
+
+    if (fontImports.length === 0) {
+      console.log(MESSAGES.NO_FONT_IMPORTS);
+      return;
+    }
+
+    console.log(MESSAGES.FONT_DETECTED(fontImports.length));
+
+    // 4. globals.css にフォントimportを追加
+    const globalsUpdated = updateGlobalsWithFonts(fontImports, globalsPath);
+
+    if (!globalsUpdated) {
+      console.log(MESSAGES.FONT_REMOVE_SKIPPED);
+      return;
+    }
+
+    // 5. sparkle-design.css からフォントimportを削除
+    const cleanedSparkleContent = removeFontImportsFromCSS(sparkleContent);
+    fs.writeFileSync(sparkleDesignPath, cleanedSparkleContent, 'utf8');
+    console.log(MESSAGES.FONT_REMOVED);
+  } catch (error) {
+    console.error(MESSAGES.FONT_MANAGEMENT_ERROR(error.message));
+    // フォント管理は必須ではないので、エラーでも処理を続行
+  }
+}

package/lib/generate-css.js

@@ -1,124 +1,36 @@
 #!/usr/bin/env node
 
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { oklch } from 'culori';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-/**
- * sparkle.config.jsonを読み込む
- */
-function loadConfig(configPath = null) {
-  // カスタムパスが指定されていない場合は実行場所のsparkle.config.jsonを探す
-  const defaultConfigPath = path.resolve(process.cwd(), 'sparkle.config.json');
-  const resolvedConfigPath = configPath ? path.resolve(configPath) : defaultConfigPath;
-
-  try {
-    const configContent = fs.readFileSync(resolvedConfigPath, 'utf8');
-    const config = JSON.parse(configContent);
-    console.log('✅ sparkle.config.json を読み込みました:', resolvedConfigPath);
-    console.log('   設定内容:', config);
-    return config;
-  } catch (error) {
-    console.error('❌ sparkle.config.json の読み込みに失敗しました:', error.message);
-    console.error('設定ファイルパス:', resolvedConfigPath);
-    console.error('設定ファイルは専用プラグインから生成するか、手動で作成してください');
-    process.exit(1);
-  }
-}
-
-/**
- * CSSテンプレートを読み込む
- */
-function loadTemplate() {
-  const templatePath = path.join(
-    __dirname,
-    '..',
-    'templates',
-    'sparkle-variables',
-    'sparkle-design.template.css'
-  );
-
-  try {
-    const templateContent = fs.readFileSync(templatePath, 'utf8');
-    console.log('✅ CSSテンプレートを読み込みました');
-    return templateContent;
-  } catch (error) {
-    console.error('❌ CSSテンプレートの読み込みに失敗しました:', error.message);
-    console.error('テンプレートファイルが存在することを確認してください:', templatePath);
-    process.exit(1);
-  }
-}
-
-/**
- * 色定義（colors.json）を読み込む
- */
-function loadColors() {
-  const colorsPath = path.join(__dirname, '..', 'templates', 'sparkle-variables', 'colors.json');
-
-  try {
-    const colorsContent = fs.readFileSync(colorsPath, 'utf8');
-    const colors = JSON.parse(colorsContent);
-    console.log('✅ colors.json を読み込みました');
-    return colors;
-  } catch (error) {
-    console.error('❌ colors.json の読み込みに失敗しました:', error.message);
-    process.exit(1);
-  }
-}
-
 /**
- * gray.jsonを読み込む
+ * Sparkle Design CSS Generator
+ * メインの CSS 生成処理
  */
-function loadGrayMapping() {
-  const grayJsonPath = path.join(__dirname, '..', 'templates', 'sparkle-variables', 'gray.json');
-
-  try {
-    const grayContent = fs.readFileSync(grayJsonPath, 'utf8');
-    const grayMapping = JSON.parse(grayContent);
-    console.log('✅ gray.json を読み込みました');
-    return grayMapping;
-  } catch (error) {
-    console.error('❌ gray.json の読み込みに失敗しました:', error.message);
-    process.exit(1);
-  }
-}
 
-/**
- * radius.csvを読み込む
- */
-function loadRadiusMapping() {
-  const radiusCsvPath = path.join(__dirname, '..', 'templates', 'sparkle-variables', 'radius.csv');
-
-  try {
-    const csvContent = fs.readFileSync(radiusCsvPath, 'utf8');
-    const lines = csvContent.trim().split('\n');
-    const headers = lines[0].split(',');
-    const radiusMapping = {};
-
-    for (let i = 1; i < lines.length; i++) {
-      const values = lines[i].split(',');
-      const name = values[0];
-      radiusMapping[name] = {};
-
-      for (let j = 1; j < headers.length; j++) {
-        radiusMapping[name][headers[j]] = values[j];
-      }
-    }
-
-    console.log('✅ radius.csv を読み込みました');
-    return radiusMapping;
-  } catch (error) {
-    console.error('❌ radius.csv の読み込みに失敗しました:', error.message);
-    process.exit(1);
-  }
-}
+import fs from 'fs';
+import path from 'path';
+import { REGEX, PATHS, MESSAGES } from './constants.js';
+import {
+  loadConfig,
+  loadTemplate,
+  loadColors,
+  loadGrayMapping,
+  loadRadiusMapping,
+} from './file-loader.js';
+import { generateColorTokens, hexToRgba, hexToOklch } from './color-utils.js';
+import {
+  manageFontImports,
+  extractFontImports,
+  removeFontImportsFromCSS,
+  updateGlobalsWithFonts,
+} from './font-manager.js';
 
 /**
  * テンプレート変数を設定値で置換する
+ * @param {string} template CSSテンプレート
+ * @param {Object} config 設定オブジェクト
+ * @param {Object} grayMapping グレーマッピング
+ * @param {Object} radiusMapping Radiusマッピング
+ * @param {Object} colors 色定義
+ * @returns {string} 処理済みのCSS
  */
 function processTemplate(template, config, grayMapping, radiusMapping, colors) {
   let processedCSS = template;
@@ -126,7 +38,7 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
   // 1. 色のトークンを生成して置換
   const colorTokens = generateColorTokens(colors, grayMapping, config.primary);
   // プレースホルダーを色のトークンで置換（改行を含む）
-  processedCSS = processedCSS.replace(/\s*\/\* \{\{COLOR_TOKENS\}\} \*\/\s*/, `\n${colorTokens}\n`);
+  processedCSS = processedCSS.replace(REGEX.COLOR_TOKENS_PLACEHOLDER, `\n${colorTokens}\n`);
 
   // 2. 基本的な設定値による置換
   Object.entries(config).forEach(([key, value]) => {
@@ -149,150 +61,32 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
     Object.entries(radiusValues).forEach(([semanticName, radiusValue]) => {
       if (semanticName === 'round') return; // roundは特別扱い
 
-      const semanticPattern = new RegExp(
-        `--radius-${semanticName}:\\s*var\\(--radius-[^)]+\\)`,
-        'g'
-      );
+      const semanticPattern = REGEX.RADIUS_SEMANTIC_PATTERN(semanticName);
       processedCSS = processedCSS.replace(
         semanticPattern,
         `--radius-${semanticName}: var(--radius-${radiusValue})`
       );
     });
 
-    console.log(`✅ ${config.radius}に対応するradius設定を適用しました`);
+    console.log(MESSAGES.RADIUS_APPLIED(config.radius));
   }
 
-  console.log('✅ テンプレートを設定値で処理しました');
+  console.log(MESSAGES.TEMPLATE_PROCESSED);
   return processedCSS;
 }
 
-/**
- * 16進数カラーをrgba形式に変換
- */
-function hexToRgba(hex) {
-  // #を削除
-  hex = hex.replace('#', '');
-
-  // 3桁の場合は6桁に拡張
-  if (hex.length === 3) {
-    hex = hex
-      .split('')
-      .map((char) => char + char)
-      .join('');
-  }
-
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-
-  return `rgba(${r}, ${g}, ${b}, 1)`;
-}
-
-/**
- * 16進数カラーをOKLCH形式に変換
- * @param {string} hex 16進数のカラーコード（#付きまたは無し）
- * @returns {string} OKLCH形式の文字列
- */
-function hexToOklch(hex) {
-  // #を削除
-  const cleanHex = hex.replace('#', '');
-
-  // 3桁の場合は6桁に、4桁の場合は8桁に拡張
-  let fullHex = cleanHex;
-  if (cleanHex.length === 3 || cleanHex.length === 4) {
-    fullHex = cleanHex
-      .split('')
-      .map((char) => char + char)
-      .join('');
-  }
-
-  // culoriを使用してHEXからOKLCHに変換
-  const oklchColor = oklch(`#${fullHex}`);
-
-  if (!oklchColor) {
-    console.warn(`⚠️ 色の変換に失敗しました: ${hex}`);
-    return `oklch(0 0 0)`;
-  }
-
-  // 精度を調整して出力
-  const l = Math.round((oklchColor.l || 0) * 10000) / 10000;
-  const c = Math.round((oklchColor.c || 0) * 10000) / 10000;
-  const h = oklchColor.h ? Math.round(oklchColor.h * 10) / 10 : 0;
-
-  // アルファ値がある場合（1未満の場合のみ出力に追加）
-  if (oklchColor.alpha !== undefined && oklchColor.alpha < 1) {
-    const a = Math.round(oklchColor.alpha * 10000) / 10000;
-    return `oklch(${l} ${c} ${h} / ${a})`;
-  }
-
-  return `oklch(${l} ${c} ${h})`;
-}
-
-/**
- * 色のトークンを生成する
- * @param {Object} colors colors.jsonから読み込んだ色の定義
- * @param {Object} grayMapping gray.jsonから読み込んだグレーの定義
- * @param {string} primaryColor プライマリカラーの名前
- * @returns {string} 色のトークンのCSS文字列
- */
-function generateColorTokens(colors, grayMapping, primaryColor) {
-  const colorTokens = [];
-
-  // 通常の色トークンを生成
-  Object.entries(colors).forEach(([colorName, colorValues]) => {
-    if (typeof colorValues === 'object' && colorValues !== null) {
-      Object.entries(colorValues).forEach(([level, hexValue]) => {
-        const oklchValue = hexToOklch(hexValue);
-        colorTokens.push(`  --color-${colorName}-${level}: ${oklchValue};`);
-      });
-    } else if (typeof colorValues === 'string') {
-      // black, white, web-focusなどの単色
-      const oklchValue = hexToOklch(colorValues);
-      colorTokens.push(`  --color-${colorName}: ${oklchValue};`);
-    }
-  });
-
-  // グレーの色トークンを生成（プライマリカラーに基づく）
-  if (primaryColor && grayMapping[primaryColor]) {
-    const grayColors = grayMapping[primaryColor];
-    Object.entries(grayColors).forEach(([key, hexValue]) => {
-      const grayLevel =
-        key === '0'
-          ? '50'
-          : key === '1'
-            ? '100'
-            : key === '2'
-              ? '200'
-              : key === '3'
-                ? '300'
-                : key === '4'
-                  ? '400'
-                  : key === '5'
-                    ? '500'
-                    : key === '6'
-                      ? '600'
-                      : key === '7'
-                        ? '700'
-                        : key === '8'
-                          ? '800'
-                          : key === '9'
-                            ? '900'
-                            : key;
-
-      const oklchValue = hexToOklch(hexValue);
-      colorTokens.push(`  --color-gray-${grayLevel}: ${oklchValue};`);
-    });
-  }
-
-  return colorTokens.join('\n');
-}
-
 /**
  * 生成されたCSSをファイルに書き出す
+ * @param {string} cssContent CSS内容
+ * @param {string|null} outputPath カスタム出力パス（オプション）
  */
 function writeCSS(cssContent, outputPath = null) {
   // カスタムパスが指定されていない場合は実行場所からsrc/appディレクトリに出力
-  const defaultOutputPath = path.resolve(process.cwd(), 'src', 'app', 'sparkle-design.css');
+  const defaultOutputPath = path.resolve(
+    process.cwd(),
+    ...PATHS.DEFAULT_OUTPUT_DIR,
+    'sparkle-design.css'
+  );
   const resolvedOutputPath = outputPath ? path.resolve(outputPath) : defaultOutputPath;
 
   try {
@@ -303,18 +97,20 @@ function writeCSS(cssContent, outputPath = null) {
     }
 
     fs.writeFileSync(resolvedOutputPath, cssContent, 'utf8');
-    console.log('✅ sparkle-design.css を生成しました:', resolvedOutputPath);
+    console.log(MESSAGES.CSS_GENERATED(resolvedOutputPath));
   } catch (error) {
-    console.error('❌ CSSファイルの書き出しに失敗しました:', error.message);
+    console.error(MESSAGES.CSS_WRITE_FAILED(error.message));
     process.exit(1);
   }
 }
 
 /**
  * メイン処理
+ * @param {string|null} configPath カスタム設定ファイルのパス（オプション）
+ * @param {string|null} outputPath カスタム出力パス（オプション）
  */
 export function generateCSS(configPath = null, outputPath = null) {
-  console.log('🚀 Sparkle Design CSS Generator を開始します...\n');
+  console.log(MESSAGES.START);
 
   // 1. 設定ファイルを読み込み
   const config = loadConfig(configPath);
@@ -331,9 +127,19 @@ export function generateCSS(configPath = null, outputPath = null) {
   const processedCSS = processTemplate(template, config, grayMapping, radiusMapping, colors);
 
   // 5. CSSファイルを書き出し
+  const defaultOutputPath = path.resolve(
+    process.cwd(),
+    ...PATHS.DEFAULT_OUTPUT_DIR,
+    'sparkle-design.css'
+  );
+  const resolvedOutputPath = outputPath ? path.resolve(outputPath) : defaultOutputPath;
   writeCSS(processedCSS, outputPath);
 
-  console.log('\n🎉 CSS生成が完了しました！');
+  // 6. フォント管理の自動処理を実行
+  console.log(MESSAGES.FONT_MANAGEMENT_START);
+  manageFontImports(resolvedOutputPath);
+
+  console.log(MESSAGES.SUCCESS);
 }
 
 // スクリプトが直接実行された場合のみメイン処理を実行
@@ -341,15 +147,24 @@ if (import.meta.url === `file://${process.argv[1]}`) {
   generateCSS();
 }
 
+// テスト用エクスポート
 export {
+  // メイン関数
+  processTemplate,
+  writeCSS,
+  // ファイル読み込み
   loadConfig,
   loadTemplate,
   loadColors,
   loadGrayMapping,
   loadRadiusMapping,
-  processTemplate,
-  writeCSS,
+  // カラー変換
   hexToRgba,
   hexToOklch,
   generateColorTokens,
+  // フォント管理
+  extractFontImports,
+  removeFontImportsFromCSS,
+  updateGlobalsWithFonts,
+  manageFontImports,
 };

package/package.json

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