sparkle-design-cli/lib/constants.js

Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール

/**
 * 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}`,
};