sparkle-design-cli 1.1.8 → 1.2.0

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 と組み合わせた場合、この順序が正しくないとビルド時に警告が発生します。
+
+この機能により、以下の警告が自動的に解決されます：
+
+```
+⚠️ @import rules must precede all rules aside from @charset and @layer statements
+```
+
+### 動作条件
+
+- `globals.css` が `sparkle-design.css` と同じディレクトリに存在する場合のみ実行されます
+- `globals.css` が存在しない場合は、フォント管理処理はスキップされます
+
+### 出力例
+
+```
+📦 フォント管理処理を開始します...
+📝 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,121 @@
+/**
+ * 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を検出しました`,
+
+  // 警告メッセージ
+  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,147 @@
+/**
+ * ファイル読み込み機能
+ * 設定ファイル、テンプレート、カラー定義などの読み込み処理を統一
+ */
+
+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} errorMessage エラー時のメッセージ
+ * @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) {
+    console.error(errorMessage);
+    if (additionalErrorHandler) {
+      additionalErrorHandler(filePath, error);
+    }
+    process.exit(1);
+  }
+}
+
+/**
+ * JSONファイルを読み込む共通関数
+ * @param {string} filePath ファイルパス
+ * @param {string} successMessage 成功時のメッセージ
+ * @param {string} errorMessage エラー時のメッセージ
+ * @param {Function} additionalErrorHandler 追加のエラーハンドラ（オプション）
+ * @returns {Object} パース済みのJSONオブジェクト
+ */
+function readJsonFile(filePath, successMessage, errorMessage, additionalErrorHandler = null) {
+  const content = readFile(filePath, successMessage, errorMessage, additionalErrorHandler);
+  return JSON.parse(content);
+}
+
+/**
+ * テンプレートディレクトリのパスを取得する
+ * @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),
+    MESSAGES.CONFIG_LOAD_FAILED(''),
+    (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,
+    MESSAGES.TEMPLATE_LOAD_FAILED(''),
+    (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, MESSAGES.COLORS_LOAD_FAILED(''));
+}
+
+/**
+ * gray.jsonを読み込む
+ * @returns {Object} グレーマッピングオブジェクト
+ */
+export function loadGrayMapping() {
+  const grayJsonPath = path.join(getTemplateDir(), FILE_NAMES.GRAY);
+
+  return readJsonFile(grayJsonPath, MESSAGES.GRAY_LOADED, MESSAGES.GRAY_LOAD_FAILED(''));
+}
+
+/**
+ * radius.csvを読み込む
+ * @returns {Object} Radiusマッピングオブジェクト
+ */
+export function loadRadiusMapping() {
+  const radiusCsvPath = path.join(getTemplateDir(), FILE_NAMES.RADIUS);
+
+  const csvContent = readFile(
+    radiusCsvPath,
+    MESSAGES.RADIUS_LOADED,
+    MESSAGES.RADIUS_LOAD_FAILED('')
+  );
+
+  // 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,193 @@
+/**
+ * フォント管理機能
+ * 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のパス
+ */
+export function updateGlobalsWithFonts(fontImports, globalsPath) {
+  if (fontImports.length === 0) {
+    return;
+  }
+
+  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;
+    }
+
+    // 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));
+  } catch (error) {
+    console.error(MESSAGES.GLOBALS_UPDATE_FAILED(error.message));
+    // globals.cssの更新は必須ではないので、エラーでも処理を続行
+  }
+}
+
+/**
+ * フォント管理の自動処理を実行する
+ * 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を追加
+    updateGlobalsWithFonts(fontImports, globalsPath);
+
+    // 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));
+    // フォント管理は必須ではないので、エラーでも処理を続行
+  }
+}