sparkle-design-cli 1.6.0 → 1.6.1

package/bin/sparkle-design.js

@@ -18,6 +18,7 @@ function parseGenerateOptions(args) {
   const options = {
     configPath: null,
     outputPath: null,
+    globalsPath: null,
     help: false,
   };
 
@@ -32,6 +33,9 @@ function parseGenerateOptions(args) {
     } else if (arg === '-o' || arg === '--output') {
       options.outputPath = requireOptionValue(args, i, '-o/--output');
       i += 1;
+    } else if (arg === '--globals-path') {
+      options.globalsPath = requireOptionValue(args, i, '--globals-path');
+      i += 1;
     } else {
       throw new Error(`Unknown option for generate: ${arg}`);
     }
@@ -148,6 +152,7 @@ Generate options:
   -h, --help                 このヘルプメッセージを表示
   -c, --config <path>        設定ファイルのパス (default: ./sparkle.config.json)
   -o, --output <path>        出力ファイルのパス (default: ./src/app/sparkle-design.css)
+  --globals-path <path>      Tailwind エントリポイント CSS のパス (default: 自動検出)
 
 sparkle.config.json の設定フィールド:
 
@@ -167,6 +172,10 @@ sparkle.config.json の設定フィールド:
   extend.source-packages     @source で追加スキャンする npm パッケージ名の配列
   extend.custom-css          プロジェクト固有のカスタムトークン CSS ファイルパス
 
+  その他:
+  globals-path               Tailwind エントリポイント CSS のパス（未指定時は自動検出）
+                             Vite の場合: "src/index.css" など
+
   extend.fonts がある場合、font-pro / font-mono より優先される。
   ない場合は font-pro / font-mono + デフォルトウェイト [400, 700] が使われる。
   同じフォントファミリーが pro と mono で重複する場合、ウェイトはマージされ import は 1 行になる。
@@ -242,7 +251,7 @@ function main() {
         process.exit(0);
       }
 
-      generateCSS(options.configPath, options.outputPath);
+      generateCSS(options.configPath, options.outputPath, options.globalsPath);
       return;
     }
 
@@ -285,7 +294,7 @@ function main() {
         process.exit(0);
       }
 
-      generateCSS(options.configPath, options.outputPath);
+      generateCSS(options.configPath, options.outputPath, options.globalsPath);
       return;
     }
 

package/lib/font-manager.js

@@ -242,24 +242,91 @@ export function updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages
   }
 }
 
+/**
+ * sparkle-design.css と同じディレクトリで Tailwind のエントリポイント CSS を自動検出する
+ * @param {string} dir 検索対象ディレクトリ
+ * @returns {string|null} 検出されたファイルの絶対パス、見つからなければ null
+ */
+function detectTailwindEntrypoint(dir) {
+  let entries;
+  try {
+    entries = fs.readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return null;
+  }
+
+  for (const entry of entries) {
+    if (!entry.isFile() || path.extname(entry.name) !== '.css') continue;
+    if (entry.name === 'sparkle-design.css') continue;
+
+    const filePath = path.join(dir, entry.name);
+    const content = fs.readFileSync(filePath, 'utf8');
+    if (REGEX.TAILWIND_IMPORT.test(content)) {
+      return filePath;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * globals パスを解決する
+ * 優先順位: 明示的指定 > 自動検出 > デフォルト（globals.css）
+ * @param {string} sparkleDesignPath sparkle-design.css のパス
+ * @param {string|null} explicitGlobalsPath 明示的に指定された globals パス
+ * @returns {{ path: string, source: 'explicit' | 'detected' | 'default' } | null}
+ */
+function resolveGlobalsPath(sparkleDesignPath, explicitGlobalsPath = null) {
+  const dir = path.dirname(sparkleDesignPath);
+
+  if (explicitGlobalsPath) {
+    const resolved = path.resolve(process.cwd(), explicitGlobalsPath);
+    if (fs.existsSync(resolved)) {
+      return { path: resolved, source: 'explicit' };
+    }
+    console.warn(`⚠️  指定された globals パスが見つかりません: ${explicitGlobalsPath}`);
+    return null;
+  }
+
+  // 自動検出: @import "tailwindcss" を含む CSS ファイルを探す
+  const detected = detectTailwindEntrypoint(dir);
+  if (detected) {
+    const basename = path.basename(detected);
+    if (basename !== 'globals.css') {
+      console.log(`📝 Tailwind エントリポイントを自動検出しました: ${basename}`);
+    }
+    return { path: detected, source: 'detected' };
+  }
+
+  // デフォルト: globals.css
+  const defaultPath = path.join(dir, 'globals.css');
+  if (fs.existsSync(defaultPath)) {
+    return { path: defaultPath, source: 'default' };
+  }
+
+  return null;
+}
+
 /**
  * フォント管理の自動処理を実行する
- * sparkle-design.css からフォントimportを抽出し、globals.css に移動する
+ * sparkle-design.css からフォントimportを抽出し、Tailwind エントリポイント CSS に @source 等を挿入する
  * @param {string} sparkleDesignPath sparkle-design.cssのパス
  * @param {Array<string>|null} sourcePackages 追加パッケージ名の配列（null の場合は @source を生成しない）
  * @param {string|null} customCssPath custom-css ファイルの相対パス
+ * @param {string|null} globalsPathOverride 明示的に指定された globals パス
  */
-export function manageFontImports(sparkleDesignPath, sourcePackages = null, customCssPath = null) {
+export function manageFontImports(sparkleDesignPath, sourcePackages = null, customCssPath = null, globalsPathOverride = null) {
   try {
-    // 1. globals.cssのパスを推定（sparkle-design.cssと同じディレクトリ）
-    const globalsPath = path.join(path.dirname(sparkleDesignPath), 'globals.css');
+    // 1. globals パスを解決
+    const resolved = resolveGlobalsPath(sparkleDesignPath, globalsPathOverride);
 
-    // 2. globals.cssが存在しない場合はスキップ
-    if (!fs.existsSync(globalsPath)) {
+    if (!resolved) {
       console.log(MESSAGES.GLOBALS_NOT_FOUND);
       return;
     }
 
+    const globalsPath = resolved.path;
+
     // 3. sparkle-design.css からフォントimportを抽出
     const sparkleContent = fs.readFileSync(sparkleDesignPath, 'utf8');
     const fontImports = extractFontImports(sparkleContent);

package/lib/generate-css.js

@@ -289,7 +289,7 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
   // 5. 基本的な設定値による置換（オブジェクト・配列・拡張フィールドはスキップ）
   Object.entries(config).forEach(([key, value]) => {
     // 配列・オブジェクト・拡張フィールドはスキップ
-    if (Array.isArray(value) || (typeof value === 'object' && value !== null) || key === 'custom-css' || key === 'fonts' || key === 'extend' || key === 'source-packages') {
+    if (Array.isArray(value) || (typeof value === 'object' && value !== null) || key === 'custom-css' || key === 'fonts' || key === 'extend' || key === 'source-packages' || key === 'globals-path') {
       return;
     }
     // 通常のプレースホルダー（CSS用 - スペースはそのまま）
@@ -361,7 +361,7 @@ function writeCSS(cssContent, outputPath = null) {
  * @param {string|null} configPath カスタム設定ファイルのパス（オプション）
  * @param {string|null} outputPath カスタム出力パス（オプション）
  */
-export function generateCSS(configPath = null, outputPath = null) {
+export function generateCSS(configPath = null, outputPath = null, globalsPath = null) {
   console.log(MESSAGES.START);
 
   // 1. 設定ファイルを読み込み
@@ -398,7 +398,8 @@ export function generateCSS(configPath = null, outputPath = null) {
   console.log(MESSAGES.FONT_MANAGEMENT_START);
   const sourcePackages = 'source-packages' in config ? (config['source-packages'] || []) : null;
   const customCssPath = config['custom-css'] || null;
-  manageFontImports(resolvedOutputPath, sourcePackages, customCssPath);
+  const globalsPathOverride = globalsPath || config['globals-path'] || null;
+  manageFontImports(resolvedOutputPath, sourcePackages, customCssPath, globalsPathOverride);
 
   console.log(MESSAGES.SUCCESS);
 }

package/package.json

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