sparkle-design-cli 1.2.0 → 1.2.2

package/README.md

@@ -99,7 +99,7 @@ CSS の仕様では、`@import` 文は `@charset` と `@layer` 以外のすべ
 
 この機能により、以下の警告が自動的に解決されます：
 
-```
+```text
 ⚠️ @import rules must precede all rules aside from @charset and @layer statements
 ```
 
@@ -110,7 +110,7 @@ CSS の仕様では、`@import` 文は `@charset` と `@layer` 以外のすべ
 
 ### 出力例
 
-```
+```text
 📦 フォント管理処理を開始します...
 📝 3個のフォントimportを検出しました
 ✅ globals.css にフォントimportを追加しました

package/lib/constants.js

@@ -102,6 +102,9 @@ export const MESSAGES = {
   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}`,

package/lib/file-loader.js

@@ -15,7 +15,7 @@ const __dirname = path.dirname(__filename);
  * ファイルを読み込む共通関数
  * @param {string} filePath ファイルパス
  * @param {string} successMessage 成功時のメッセージ
- * @param {string} errorMessage エラー時のメッセージ
+ * @param {string|Function} errorMessage エラー時のメッセージ（文字列 or (error) => string）
  * @param {Function} additionalErrorHandler 追加のエラーハンドラ（オプション）
  * @returns {string} ファイル内容
  */
@@ -25,7 +25,12 @@ function readFile(filePath, successMessage, errorMessage, additionalErrorHandler
     console.log(successMessage);
     return content;
   } catch (error) {
-    console.error(errorMessage);
+    const message =
+      typeof errorMessage === 'function'
+        ? errorMessage(error)
+        : errorMessage || `❌ ファイルの読み込みに失敗しました: ${error.message}`;
+
+    console.error(message);
     if (additionalErrorHandler) {
       additionalErrorHandler(filePath, error);
     }
@@ -37,13 +42,27 @@ function readFile(filePath, successMessage, errorMessage, additionalErrorHandler
  * JSONファイルを読み込む共通関数
  * @param {string} filePath ファイルパス
  * @param {string} successMessage 成功時のメッセージ
- * @param {string} errorMessage エラー時のメッセージ
+ * @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);
-  return JSON.parse(content);
+
+  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);
+  }
 }
 
 /**
@@ -67,7 +86,7 @@ export function loadConfig(configPath = null) {
   const config = readJsonFile(
     resolvedConfigPath,
     MESSAGES.CONFIG_LOADED(resolvedConfigPath),
-    MESSAGES.CONFIG_LOAD_FAILED(''),
+    (error) => MESSAGES.CONFIG_LOAD_FAILED(error.message),
     (filePath, _error) => {
       console.error(MESSAGES.CONFIG_PATH_INFO(filePath));
       console.error(MESSAGES.CONFIG_HELP);
@@ -88,7 +107,7 @@ export function loadTemplate() {
   return readFile(
     templatePath,
     MESSAGES.TEMPLATE_LOADED,
-    MESSAGES.TEMPLATE_LOAD_FAILED(''),
+    (error) => MESSAGES.TEMPLATE_LOAD_FAILED(error.message),
     (filePath) => {
       console.error(MESSAGES.TEMPLATE_PATH_INFO(filePath));
     }
@@ -102,7 +121,9 @@ export function loadTemplate() {
 export function loadColors() {
   const colorsPath = path.join(getTemplateDir(), FILE_NAMES.COLORS);
 
-  return readJsonFile(colorsPath, MESSAGES.COLORS_LOADED, MESSAGES.COLORS_LOAD_FAILED(''));
+  return readJsonFile(colorsPath, MESSAGES.COLORS_LOADED, (error) =>
+    MESSAGES.COLORS_LOAD_FAILED(error.message)
+  );
 }
 
 /**
@@ -112,7 +133,9 @@ export function loadColors() {
 export function loadGrayMapping() {
   const grayJsonPath = path.join(getTemplateDir(), FILE_NAMES.GRAY);
 
-  return readJsonFile(grayJsonPath, MESSAGES.GRAY_LOADED, MESSAGES.GRAY_LOAD_FAILED(''));
+  return readJsonFile(grayJsonPath, MESSAGES.GRAY_LOADED, (error) =>
+    MESSAGES.GRAY_LOAD_FAILED(error.message)
+  );
 }
 
 /**
@@ -122,10 +145,8 @@ export function loadGrayMapping() {
 export function loadRadiusMapping() {
   const radiusCsvPath = path.join(getTemplateDir(), FILE_NAMES.RADIUS);
 
-  const csvContent = readFile(
-    radiusCsvPath,
-    MESSAGES.RADIUS_LOADED,
-    MESSAGES.RADIUS_LOAD_FAILED('')
+  const csvContent = readFile(radiusCsvPath, MESSAGES.RADIUS_LOADED, (error) =>
+    MESSAGES.RADIUS_LOAD_FAILED(error.message)
   );
 
   // CSVをパース

package/lib/font-manager.js

@@ -111,10 +111,11 @@ function reconstructGlobalsCss(globalsContent, fontImportBlock, sparkleImportBlo
  * - 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;
+    return false;
   }
 
   try {
@@ -128,7 +129,7 @@ export function updateGlobalsWithFonts(fontImports, globalsPath) {
     const tailwindInfo = findTailwindImport(globalsContent);
     if (!tailwindInfo) {
       console.warn(MESSAGES.TAILWIND_NOT_FOUND);
-      return;
+      return false;
     }
 
     // 4. importブロックを生成
@@ -146,9 +147,11 @@ export function updateGlobalsWithFonts(fontImports, globalsPath) {
     // 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;
   }
 }
 
@@ -180,7 +183,12 @@ export function manageFontImports(sparkleDesignPath) {
     console.log(MESSAGES.FONT_DETECTED(fontImports.length));
 
     // 4. globals.css にフォントimportを追加
-    updateGlobalsWithFonts(fontImports, globalsPath);
+    const globalsUpdated = updateGlobalsWithFonts(fontImports, globalsPath);
+
+    if (!globalsUpdated) {
+      console.log(MESSAGES.FONT_REMOVE_SKIPPED);
+      return;
+    }
 
     // 5. sparkle-design.css からフォントimportを削除
     const cleanedSparkleContent = removeFontImportsFromCSS(sparkleContent);

package/package.json

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

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

@@ -67,12 +67,12 @@
 
   /* シャドウ */
   /* Primitive */
-  --shadow-none: 0px 0px 0px 0px #000;
-  --shadow-2xs: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-  --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-none: 0px 0px 0px 0px var(--color-black);
+  --shadow-2xs: 0px 1px 0px 0px var(--color-black-alpha-50);
+  --shadow-xs: 0px 1px 2px 0px var(--color-black-alpha-50);
+  --shadow-sm: 0px 1px 3px 0px var(--color-black-alpha-100), 0px 1px 2px -1px var(--color-black-alpha-100);
+  --shadow-md: 0px 4px 6px -1px var(--color-black-alpha-100), 0px 2px 4px -2px var(--color-black-alpha-100);
+  --shadow-lg: 0px 10px 15px -3px var(--color-black-alpha-100), 0px 4px 6px -4px var(--color-black-alpha-100);
 }
 
 /* セマンティクスのトークン定義 */