sparkle-design-cli 1.2.2 → 1.3.1

package/README.md

@@ -76,6 +76,44 @@ sparkle-design-cli -c ./config/custom.json -o ./dist/styles.css
 - `font-pro`: プロポーショナルフォント（Google Fonts の名前）
 - `font-mono`: モノスペースフォント（Google Fonts の名前）
 - `radius`: 角丸設定（sm, md, lg など）
+- `source-packages`: （オプション）`@source` ディレクティブで追加スキャンする npm パッケージの配列
+
+### source-packages オプション
+
+`@goodpatch/sparkle-design` を npm パッケージとして利用するプロジェクトでは、TailwindCSS v4 がパッケージ内のユーティリティクラスを検出できるように `@source` ディレクティブが必要です。
+
+`source-packages` を設定すると、CLI が `globals.css` に `@source` ディレクティブを自動挿入します。`@goodpatch/sparkle-design` は常にデフォルトで含まれます。
+
+```json
+{
+  "primary": "blue",
+  "font-mono": "BIZ UDGothic",
+  "font-pro": "BIZ UDPGothic",
+  "radius": "md",
+  "source-packages": []
+}
+```
+
+追加の npm パッケージ（拡張リポジトリなど）をスキャン対象にする場合：
+
+```json
+{
+  "source-packages": ["@scope/my-extension-design"]
+}
+```
+
+生成される `globals.css`:
+
+```css
+@import "tailwindcss";
+/* npm パッケージのコンテンツスキャン（Tailwind がクラスを検出するために必要） */
+@source "../node_modules/@goodpatch/sparkle-design/dist";
+@source "../node_modules/@scope/my-extension-design/dist";
+/* Sparkle Design のカスタム定義（Tailwindの後にインポート） */
+@import "./sparkle-design.css";
+```
+
+> **注意**: `source-packages` を指定しない場合、`@source` ディレクティブは生成されません。
 
 ## 出力
 

package/lib/constants.js

@@ -32,6 +32,10 @@ export const REGEX = {
     /\/\*\s*Sparkle Design[^*]*\*\/\s*\n?|@import\s+['"](\.\/)?sparkle-design\.css['"];?\s*\n?/g,
   TAILWIND_IMPORT: /@import\s+['"]tailwindcss['"];?/,
 
+  // @source ディレクティブ関連
+  SOURCE_DIRECTIVE: /@source\s+["'][^"']*["'];?\s*\n?/g,
+  SOURCE_COMMENT: /\/\*\s*npm パッケージのコンテンツスキャン[^*]*\*\/\s*\n?/g,
+
   // テンプレート関連
   COLOR_TOKENS_PLACEHOLDER: /\s*\/\* \{\{COLOR_TOKENS\}\} \*\/\s*/,
   RADIUS_SEMANTIC_PATTERN: (semanticName) =>
@@ -70,6 +74,7 @@ export const COMMENTS = {
   FONT_IMPORT: '/* フォントのインポート（CSSの仕様上、@importは最初に記述する必要がある） */',
   SPARKLE_IMPORT: '/* Sparkle Design のカスタム定義（Tailwindの後にインポート） */',
   TAILWIND_IMPORT: '/* Tailwindのインポート */',
+  SOURCE_DIRECTIVE: '/* npm パッケージのコンテンツスキャン（Tailwind がクラスを検出するために必要） */',
 };
 
 // インポート文のテンプレート

package/lib/font-manager.js

@@ -35,12 +35,28 @@ function createFontImportBlock(fontImports) {
   return [COMMENTS.FONT_IMPORT, ...fontImports, ''].join('\n');
 }
 
+/**
+ * @source ディレクティブブロックを生成する
+ * @param {Array<string>} sourcePackages 追加パッケージ名の配列
+ * @returns {string} @source ディレクティブブロック
+ */
+function createSourceBlock(sourcePackages = []) {
+  const defaultPackage = '@goodpatch/sparkle-design';
+  const allPackages = [defaultPackage, ...sourcePackages.filter(p => p !== defaultPackage)];
+  const sourceLines = allPackages.map(pkg => `@source "../node_modules/${pkg}/dist";`);
+  return [COMMENTS.SOURCE_DIRECTIVE, ...sourceLines].join('\n');
+}
+
 /**
  * sparkle-design.css importブロックを生成する
+ * @param {Array<string>} sourcePackages 追加パッケージ名の配列
  * @returns {string} sparkle-design.css importブロック
  */
-function createSparkleImportBlock() {
-  return ['', COMMENTS.SPARKLE_IMPORT, IMPORTS.SPARKLE_DESIGN, ''].join('\n');
+function createSparkleImportBlock(sourcePackages = []) {
+  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');
 }
 
 /**
@@ -54,6 +70,10 @@ function removeExistingImports(globalsContent) {
   // 既存のフォントimportを削除
   cleaned = cleaned.replace(REGEX.EXISTING_FONT_IMPORT_BLOCK, '');
 
+  // 既存の @source ディレクティブを削除
+  cleaned = cleaned.replace(REGEX.SOURCE_DIRECTIVE, '');
+  cleaned = cleaned.replace(REGEX.SOURCE_COMMENT, '');
+
   // 既存のsparkle-design.css importを削除
   cleaned = cleaned.replace(REGEX.SPARKLE_IMPORT, '');
 
@@ -111,9 +131,10 @@ function reconstructGlobalsCss(globalsContent, fontImportBlock, sparkleImportBlo
  * - sparkle-design.css importをTailwindの後に配置
  * @param {Array<string>} fontImports フォントimport文の配列
  * @param {string} globalsPath globals.cssのパス
+ * @param {Array<string>|null} sourcePackages 追加パッケージ名の配列（null の場合は @source を生成しない）
  * @returns {boolean} globals.css の更新に成功した場合は true
  */
-export function updateGlobalsWithFonts(fontImports, globalsPath) {
+export function updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages = null) {
   if (fontImports.length === 0) {
     return false;
   }
@@ -134,7 +155,7 @@ export function updateGlobalsWithFonts(fontImports, globalsPath) {
 
     // 4. importブロックを生成
     const fontImportBlock = createFontImportBlock(fontImports);
-    const sparkleImportBlock = createSparkleImportBlock();
+    const sparkleImportBlock = createSparkleImportBlock(sourcePackages);
 
     // 5. globals.css を再構築
     const reconstructedContent = reconstructGlobalsCss(
@@ -159,8 +180,9 @@ export function updateGlobalsWithFonts(fontImports, globalsPath) {
  * フォント管理の自動処理を実行する
  * sparkle-design.css からフォントimportを抽出し、globals.css に移動する
  * @param {string} sparkleDesignPath sparkle-design.cssのパス
+ * @param {Array<string>|null} sourcePackages 追加パッケージ名の配列（null の場合は @source を生成しない）
  */
-export function manageFontImports(sparkleDesignPath) {
+export function manageFontImports(sparkleDesignPath, sourcePackages = null) {
   try {
     // 1. globals.cssのパスを推定（sparkle-design.cssと同じディレクトリ）
     const globalsPath = path.join(path.dirname(sparkleDesignPath), 'globals.css');
@@ -183,7 +205,7 @@ export function manageFontImports(sparkleDesignPath) {
     console.log(MESSAGES.FONT_DETECTED(fontImports.length));
 
     // 4. globals.css にフォントimportを追加
-    const globalsUpdated = updateGlobalsWithFonts(fontImports, globalsPath);
+    const globalsUpdated = updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages);
 
     if (!globalsUpdated) {
       console.log(MESSAGES.FONT_REMOVE_SKIPPED);

package/lib/generate-css.js

@@ -137,7 +137,8 @@ export function generateCSS(configPath = null, outputPath = null) {
 
   // 6. フォント管理の自動処理を実行
   console.log(MESSAGES.FONT_MANAGEMENT_START);
-  manageFontImports(resolvedOutputPath);
+  const sourcePackages = 'source-packages' in config ? (config['source-packages'] || []) : null;
+  manageFontImports(resolvedOutputPath, sourcePackages);
 
   console.log(MESSAGES.SUCCESS);
 }

package/package.json

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

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

@@ -75,7 +75,129 @@
   --shadow-lg: 0px 10px 15px -3px var(--color-black-alpha-100), 0px 4px 6px -4px var(--color-black-alpha-100);
 }
 
-/* セマンティクスのトークン定義 */
+/* セマンティックトークン - CSS変数としてランタイムで利用可能にする */
+:root {
+  /* セマンティクスカラー定義 */
+  --color-neutral-50: var(--color-gray-50);
+  --color-neutral-100: var(--color-gray-100);
+  --color-neutral-200: var(--color-gray-200);
+  --color-neutral-300: var(--color-gray-300);
+  --color-neutral-400: var(--color-gray-400);
+  --color-neutral-500: var(--color-gray-500);
+  --color-neutral-600: var(--color-gray-600);
+  --color-neutral-700: var(--color-gray-700);
+  --color-neutral-800: var(--color-gray-800);
+  --color-neutral-900: var(--color-gray-900);
+
+  /* プライマリカラーは設定可能 */
+  --color-primary-50: var(--color-{{PRIMARY}}-50);
+  --color-primary-100: var(--color-{{PRIMARY}}-100);
+  --color-primary-200: var(--color-{{PRIMARY}}-200);
+  --color-primary-300: var(--color-{{PRIMARY}}-300);
+  --color-primary-400: var(--color-{{PRIMARY}}-400);
+  --color-primary-500: var(--color-{{PRIMARY}}-500);
+  --color-primary-600: var(--color-{{PRIMARY}}-600);
+  --color-primary-700: var(--color-{{PRIMARY}}-700);
+  --color-primary-800: var(--color-{{PRIMARY}}-800);
+  --color-primary-900: var(--color-{{PRIMARY}}-900);
+
+  --color-secondary-50: var(--color-gray-50);
+  --color-secondary-100: var(--color-gray-100);
+  --color-secondary-200: var(--color-gray-200);
+  --color-secondary-300: var(--color-gray-300);
+  --color-secondary-400: var(--color-gray-400);
+  --color-secondary-500: var(--color-gray-500);
+  --color-secondary-600: var(--color-gray-600);
+  --color-secondary-700: var(--color-gray-700);
+  --color-secondary-800: var(--color-gray-800);
+  --color-secondary-900: var(--color-gray-900);
+
+  --color-info-50: var(--color-blue-50);
+  --color-info-100: var(--color-blue-100);
+  --color-info-200: var(--color-blue-200);
+  --color-info-300: var(--color-blue-300);
+  --color-info-400: var(--color-blue-400);
+  --color-info-500: var(--color-blue-500);
+  --color-info-600: var(--color-blue-600);
+  --color-info-700: var(--color-blue-700);
+  --color-info-800: var(--color-blue-800);
+  --color-info-900: var(--color-blue-900);
+
+  --color-success-50: var(--color-green-50);
+  --color-success-100: var(--color-green-100);
+  --color-success-200: var(--color-green-200);
+  --color-success-300: var(--color-green-300);
+  --color-success-400: var(--color-green-400);
+  --color-success-500: var(--color-green-500);
+  --color-success-600: var(--color-green-600);
+  --color-success-700: var(--color-green-700);
+  --color-success-800: var(--color-green-800);
+  --color-success-900: var(--color-green-900);
+
+  --color-warning-50: var(--color-yellow-50);
+  --color-warning-100: var(--color-yellow-100);
+  --color-warning-200: var(--color-yellow-200);
+  --color-warning-300: var(--color-yellow-300);
+  --color-warning-400: var(--color-yellow-400);
+  --color-warning-500: var(--color-yellow-500);
+  --color-warning-600: var(--color-yellow-600);
+  --color-warning-700: var(--color-yellow-700);
+  --color-warning-800: var(--color-yellow-800);
+  --color-warning-900: var(--color-yellow-900);
+
+  --color-negative-50: var(--color-red-50);
+  --color-negative-100: var(--color-red-100);
+  --color-negative-200: var(--color-red-200);
+  --color-negative-300: var(--color-red-300);
+  --color-negative-400: var(--color-red-400);
+  --color-negative-500: var(--color-red-500);
+  --color-negative-600: var(--color-red-600);
+  --color-negative-700: var(--color-red-700);
+  --color-negative-800: var(--color-red-800);
+  --color-negative-900: var(--color-red-900);
+
+  /* コンポーネントカラー定義 */
+  --color-divider-low: var(--color-neutral-100);
+  --color-divider-middle: var(--color-neutral-200);
+  --color-divider-high: var(--color-neutral-300);
+  --color-text-disabled: var(--color-neutral-300);
+  --color-text-placeholder: var(--color-neutral-500);
+  --color-text-low: var(--color-neutral-500);
+  --color-text-middle: var(--color-neutral-700);
+  --color-text-high: var(--color-neutral-900);
+  --color-skeleton-fill: var(--color-neutral-200);
+
+  /* ベースカラー（base） - gray と同等 */
+  --color-base-50: var(--color-gray-50);
+  --color-base-100: var(--color-gray-100);
+  --color-base-200: var(--color-gray-200);
+  --color-base-300: var(--color-gray-300);
+  --color-base-400: var(--color-gray-400);
+  --color-base-500: var(--color-gray-500);
+  --color-base-600: var(--color-gray-600);
+  --color-base-700: var(--color-gray-700);
+  --color-base-800: var(--color-gray-800);
+  --color-base-900: var(--color-gray-900);
+
+  /* 角丸 - デフォルト値は設定可能 */
+  --radius-divide: var(--radius-none);
+  --radius-minimum: var(--radius-xs);
+  --radius-notice: var(--radius-sm);
+  --radius-action: var(--radius-{{RADIUS}});
+  --radius-halfModal: var(--radius-lg);
+  --radius-modal: var(--radius-xl);
+  --radius-round: var(--radius-full);
+
+  /* シャドウ */
+  --shadow-base: var(--shadow-none);
+  --shadow-flat: var(--shadow-2xs);
+  --shadow-raise: var(--shadow-xs);
+  --shadow-stick: var(--shadow-sm);
+  --shadow-float: var(--shadow-md);
+  --shadow-popout: var(--shadow-lg);
+}
+
+/* セマンティクスのトークン定義（Tailwind ユーティリティ生成用） */
 @theme inline {
   /* セマンティクスカラー定義 */
   --color-neutral-50: var(--color-gray-50);