sparkle-design-cli 1.3.2 → 1.3.4

package/lib/constants.js

@@ -37,7 +37,7 @@ export const REGEX = {
   SOURCE_COMMENT: /\/\*\s*npm パッケージのコンテンツスキャン[^*]*\*\/\s*\n?/g,
 
   // テンプレート関連
-  COLOR_TOKENS_PLACEHOLDER: /\s*\/\* \{\{COLOR_TOKENS\}\} \*\/\s*/,
+  COLOR_TOKENS_PLACEHOLDER: /[ \t]*\/\* \{\{COLOR_TOKENS\}\} \*\/[ \t]*\n?/,
   RADIUS_SEMANTIC_PATTERN: (semanticName) =>
     new RegExp(`--radius-${semanticName}:\\s*var\\(--radius-[^)]+\\)`, 'g'),
 };

package/lib/font-manager.js

@@ -35,28 +35,55 @@ function createFontImportBlock(fontImports) {
   return [COMMENTS.FONT_IMPORT, ...fontImports, ''].join('\n');
 }
 
+/**
+ * globals.css から node_modules への相対パスを計算する
+ * @param {string} globalsPath globals.css の絶対パス
+ * @returns {string} node_modules への相対パス（例: "../../node_modules"）
+ */
+function resolveNodeModulesRelPath(globalsPath) {
+  const globalsDir = path.dirname(globalsPath);
+  // globals.css と同じプロジェクトルートにある node_modules を探す
+  let dir = globalsDir;
+  while (dir !== path.dirname(dir)) {
+    const candidate = path.join(dir, 'node_modules');
+    if (fs.existsSync(candidate)) {
+      const rel = path.relative(globalsDir, candidate);
+      // POSIX パス区切りに変換
+      return rel.split(path.sep).join('/');
+    }
+    dir = path.dirname(dir);
+  }
+  // 見つからない場合はプロジェクトルート（cwd）からの相対パスを使用
+  const fallback = path.join(process.cwd(), 'node_modules');
+  const rel = path.relative(globalsDir, fallback);
+  return rel.split(path.sep).join('/');
+}
+
 /**
  * @source ディレクティブブロックを生成する
  * @param {Array<string>} sourcePackages 追加パッケージ名の配列
+ * @param {string} nodeModulesRel node_modules への相対パス
  * @returns {string} @source ディレクティブブロック
  */
-function createSourceBlock(sourcePackages = []) {
+function createSourceBlock(sourcePackages = [], nodeModulesRel = '../node_modules') {
   const defaultPackage = '@goodpatch/sparkle-design';
   const allPackages = [defaultPackage, ...sourcePackages.filter(p => p !== defaultPackage)];
-  const sourceLines = allPackages.map(pkg => `@source "../node_modules/${pkg}/dist";`);
+  const sourceLines = allPackages.map(pkg => `@source "${nodeModulesRel}/${pkg}/dist";`);
   return [COMMENTS.SOURCE_DIRECTIVE, ...sourceLines].join('\n');
 }
 
 /**
  * sparkle-design.css importブロックを生成する
  * @param {Array<string>} sourcePackages 追加パッケージ名の配列
+ * @param {string} globalsPath globals.css の絶対パス（@source パス計算用）
  * @returns {string} sparkle-design.css importブロック
  */
-function createSparkleImportBlock(sourcePackages = []) {
+function createSparkleImportBlock(sourcePackages = [], globalsPath = null) {
   if (sourcePackages === null || sourcePackages === undefined) {
     return ['', COMMENTS.SPARKLE_IMPORT, IMPORTS.SPARKLE_DESIGN, ''].join('\n');
   }
-  return ['', createSourceBlock(sourcePackages), COMMENTS.SPARKLE_IMPORT, IMPORTS.SPARKLE_DESIGN, ''].join('\n');
+  const nodeModulesRel = globalsPath ? resolveNodeModulesRelPath(globalsPath) : '../node_modules';
+  return ['', createSourceBlock(sourcePackages, nodeModulesRel), COMMENTS.SPARKLE_IMPORT, IMPORTS.SPARKLE_DESIGN, ''].join('\n');
 }
 
 /**
@@ -155,7 +182,7 @@ export function updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages
 
     // 4. importブロックを生成
     const fontImportBlock = createFontImportBlock(fontImports);
-    const sparkleImportBlock = createSparkleImportBlock(sourcePackages);
+    const sparkleImportBlock = createSparkleImportBlock(sourcePackages, globalsPath);
 
     // 5. globals.css を再構築
     const reconstructedContent = reconstructGlobalsCss(

package/lib/generate-css.js

@@ -38,7 +38,7 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
   // 1. 色のトークンを生成して置換
   const colorTokens = generateColorTokens(colors, grayMapping, config.primary);
   // プレースホルダーを色のトークンで置換（改行を含む）
-  processedCSS = processedCSS.replace(REGEX.COLOR_TOKENS_PLACEHOLDER, `\n${colorTokens}\n`);
+  processedCSS = processedCSS.replace(REGEX.COLOR_TOKENS_PLACEHOLDER, `${colorTokens}\n`);
 
   // 2. 基本的な設定値による置換
   Object.entries(config).forEach(([key, value]) => {

package/package.json

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

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

@@ -70,9 +70,15 @@
   --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);
+  --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);
 }
 
 /* セマンティックトークン - CSS変数としてランタイムで利用可能にする */