sparkle-design-cli 1.2.2 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/constants.js +5 -0
  2. package/lib/font-manager.js +25 -6
  3. package/lib/generate-css.js +2 -1
  4. package/package.json +1 -1
  5. package/templates/sparkle-variables/sparkle-design.template.css +123 -1
package/lib/constants.js CHANGED
@@ -32,6 +32,10 @@ export const REGEX = {
32
32
  /\/\*\s*Sparkle Design[^*]*\*\/\s*\n?|@import\s+['"](\.\/)?sparkle-design\.css['"];?\s*\n?/g,
33
33
  TAILWIND_IMPORT: /@import\s+['"]tailwindcss['"];?/,
34
34
 
35
+ // @source ディレクティブ関連
36
+ SOURCE_DIRECTIVE: /@source\s+["'][^"']*["'];?\s*\n?/g,
37
+ SOURCE_COMMENT: /\/\*\s*npm パッケージのコンテンツスキャン[^*]*\*\/\s*\n?/g,
38
+
35
39
  // テンプレート関連
36
40
  COLOR_TOKENS_PLACEHOLDER: /\s*\/\* \{\{COLOR_TOKENS\}\} \*\/\s*/,
37
41
  RADIUS_SEMANTIC_PATTERN: (semanticName) =>
@@ -70,6 +74,7 @@ export const COMMENTS = {
70
74
  FONT_IMPORT: '/* フォントのインポート（CSSの仕様上、@importは最初に記述する必要がある） */',
71
75
  SPARKLE_IMPORT: '/* Sparkle Design のカスタム定義（Tailwindの後にインポート） */',
72
76
  TAILWIND_IMPORT: '/* Tailwindのインポート */',
77
+ SOURCE_DIRECTIVE: '/* npm パッケージのコンテンツスキャン（Tailwind がクラスを検出するために必要） */',
73
78
  };
74
79
 
75
80
  // インポート文のテンプレート
package/lib/font-manager.js CHANGED
@@ -35,12 +35,25 @@ function createFontImportBlock(fontImports) {
35
35
  return [COMMENTS.FONT_IMPORT, ...fontImports, ''].join('\n');
36
36
  }
37
37
 
38
+ /**
39
+ * @source ディレクティブブロックを生成する
40
+ * @param {Array<string>} sourcePackages 追加パッケージ名の配列
41
+ * @returns {string} @source ディレクティブブロック
42
+ */
43
+ function createSourceBlock(sourcePackages = []) {
44
+ const defaultPackage = '@goodpatch/sparkle-design';
45
+ const allPackages = [defaultPackage, ...sourcePackages.filter(p => p !== defaultPackage)];
46
+ const sourceLines = allPackages.map(pkg => `@source "../node_modules/${pkg}/dist";`);
47
+ return [COMMENTS.SOURCE_DIRECTIVE, ...sourceLines].join('\n');
48
+ }
49
+
38
50
  /**
39
51
  * sparkle-design.css importブロックを生成する
52
+ * @param {Array<string>} sourcePackages 追加パッケージ名の配列
40
53
  * @returns {string} sparkle-design.css importブロック
41
54
  */
42
- function createSparkleImportBlock() {
43
- return ['', COMMENTS.SPARKLE_IMPORT, IMPORTS.SPARKLE_DESIGN, ''].join('\n');
55
+ function createSparkleImportBlock(sourcePackages = []) {
56
+ return ['', createSourceBlock(sourcePackages), COMMENTS.SPARKLE_IMPORT, IMPORTS.SPARKLE_DESIGN, ''].join('\n');
44
57
  }
45
58
 
46
59
  /**
@@ -54,6 +67,10 @@ function removeExistingImports(globalsContent) {
54
67
  // 既存のフォントimportを削除
55
68
  cleaned = cleaned.replace(REGEX.EXISTING_FONT_IMPORT_BLOCK, '');
56
69
 
70
+ // 既存の @source ディレクティブを削除
71
+ cleaned = cleaned.replace(REGEX.SOURCE_DIRECTIVE, '');
72
+ cleaned = cleaned.replace(REGEX.SOURCE_COMMENT, '');
73
+
57
74
  // 既存のsparkle-design.css importを削除
58
75
  cleaned = cleaned.replace(REGEX.SPARKLE_IMPORT, '');
59
76
 
@@ -111,9 +128,10 @@ function reconstructGlobalsCss(globalsContent, fontImportBlock, sparkleImportBlo
111
128
  * - sparkle-design.css importをTailwindの後に配置
112
129
  * @param {Array<string>} fontImports フォントimport文の配列
113
130
  * @param {string} globalsPath globals.cssのパス
131
+ * @param {Array<string>} sourcePackages 追加パッケージ名の配列
114
132
  * @returns {boolean} globals.css の更新に成功した場合は true
115
133
  */
116
- export function updateGlobalsWithFonts(fontImports, globalsPath) {
134
+ export function updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages = []) {
117
135
  if (fontImports.length === 0) {
118
136
  return false;
119
137
  }
@@ -134,7 +152,7 @@ export function updateGlobalsWithFonts(fontImports, globalsPath) {
134
152
 
135
153
  // 4. importブロックを生成
136
154
  const fontImportBlock = createFontImportBlock(fontImports);
137
- const sparkleImportBlock = createSparkleImportBlock();
155
+ const sparkleImportBlock = createSparkleImportBlock(sourcePackages);
138
156
 
139
157
  // 5. globals.css を再構築
140
158
  const reconstructedContent = reconstructGlobalsCss(
@@ -159,8 +177,9 @@ export function updateGlobalsWithFonts(fontImports, globalsPath) {
159
177
  * フォント管理の自動処理を実行する
160
178
  * sparkle-design.css からフォントimportを抽出し、globals.css に移動する
161
179
  * @param {string} sparkleDesignPath sparkle-design.cssのパス
180
+ * @param {Array<string>} sourcePackages 追加パッケージ名の配列
162
181
  */
163
- export function manageFontImports(sparkleDesignPath) {
182
+ export function manageFontImports(sparkleDesignPath, sourcePackages = []) {
164
183
  try {
165
184
  // 1. globals.cssのパスを推定（sparkle-design.cssと同じディレクトリ）
166
185
  const globalsPath = path.join(path.dirname(sparkleDesignPath), 'globals.css');
@@ -183,7 +202,7 @@ export function manageFontImports(sparkleDesignPath) {
183
202
  console.log(MESSAGES.FONT_DETECTED(fontImports.length));
184
203
 
185
204
  // 4. globals.css にフォントimportを追加
186
- const globalsUpdated = updateGlobalsWithFonts(fontImports, globalsPath);
205
+ const globalsUpdated = updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages);
187
206
 
188
207
  if (!globalsUpdated) {
189
208
  console.log(MESSAGES.FONT_REMOVE_SKIPPED);
package/lib/generate-css.js CHANGED
@@ -137,7 +137,8 @@ export function generateCSS(configPath = null, outputPath = null) {
137
137
 
138
138
  // 6. フォント管理の自動処理を実行
139
139
  console.log(MESSAGES.FONT_MANAGEMENT_START);
140
- manageFontImports(resolvedOutputPath);
140
+ const sourcePackages = config['source-packages'] || [];
141
+ manageFontImports(resolvedOutputPath, sourcePackages);
141
142
 
142
143
  console.log(MESSAGES.SUCCESS);
143
144
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sparkle-design-cli",
3
- "version": "1.2.2",
3
+ "version": "1.3.0",
4
4
  "description": "Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール",
5
5
  "main": "lib/generate-css.js",
6
6
  "type": "module",
package/templates/sparkle-variables/sparkle-design.template.css CHANGED
@@ -75,7 +75,129 @@
75
75
  --shadow-lg: 0px 10px 15px -3px var(--color-black-alpha-100), 0px 4px 6px -4px var(--color-black-alpha-100);
76
76
  }
77
77
 
78
- /* セマンティクスのトークン定義 */
78
+ /* セマンティックトークン - CSS変数としてランタイムで利用可能にする */
79
+ :root {
80
+ /* セマンティクスカラー定義 */
81
+ --color-neutral-50: var(--color-gray-50);
82
+ --color-neutral-100: var(--color-gray-100);
83
+ --color-neutral-200: var(--color-gray-200);
84
+ --color-neutral-300: var(--color-gray-300);
85
+ --color-neutral-400: var(--color-gray-400);
86
+ --color-neutral-500: var(--color-gray-500);
87
+ --color-neutral-600: var(--color-gray-600);
88
+ --color-neutral-700: var(--color-gray-700);
89
+ --color-neutral-800: var(--color-gray-800);
90
+ --color-neutral-900: var(--color-gray-900);
91
+
92
+ /* プライマリカラーは設定可能 */
93
+ --color-primary-50: var(--color-{{PRIMARY}}-50);
94
+ --color-primary-100: var(--color-{{PRIMARY}}-100);
95
+ --color-primary-200: var(--color-{{PRIMARY}}-200);
96
+ --color-primary-300: var(--color-{{PRIMARY}}-300);
97
+ --color-primary-400: var(--color-{{PRIMARY}}-400);
98
+ --color-primary-500: var(--color-{{PRIMARY}}-500);
99
+ --color-primary-600: var(--color-{{PRIMARY}}-600);
100
+ --color-primary-700: var(--color-{{PRIMARY}}-700);
101
+ --color-primary-800: var(--color-{{PRIMARY}}-800);
102
+ --color-primary-900: var(--color-{{PRIMARY}}-900);
103
+
104
+ --color-secondary-50: var(--color-gray-50);
105
+ --color-secondary-100: var(--color-gray-100);
106
+ --color-secondary-200: var(--color-gray-200);
107
+ --color-secondary-300: var(--color-gray-300);
108
+ --color-secondary-400: var(--color-gray-400);
109
+ --color-secondary-500: var(--color-gray-500);
110
+ --color-secondary-600: var(--color-gray-600);
111
+ --color-secondary-700: var(--color-gray-700);
112
+ --color-secondary-800: var(--color-gray-800);
113
+ --color-secondary-900: var(--color-gray-900);
114
+
115
+ --color-info-50: var(--color-blue-50);
116
+ --color-info-100: var(--color-blue-100);
117
+ --color-info-200: var(--color-blue-200);
118
+ --color-info-300: var(--color-blue-300);
119
+ --color-info-400: var(--color-blue-400);
120
+ --color-info-500: var(--color-blue-500);
121
+ --color-info-600: var(--color-blue-600);
122
+ --color-info-700: var(--color-blue-700);
123
+ --color-info-800: var(--color-blue-800);
124
+ --color-info-900: var(--color-blue-900);
125
+
126
+ --color-success-50: var(--color-green-50);
127
+ --color-success-100: var(--color-green-100);
128
+ --color-success-200: var(--color-green-200);
129
+ --color-success-300: var(--color-green-300);
130
+ --color-success-400: var(--color-green-400);
131
+ --color-success-500: var(--color-green-500);
132
+ --color-success-600: var(--color-green-600);
133
+ --color-success-700: var(--color-green-700);
134
+ --color-success-800: var(--color-green-800);
135
+ --color-success-900: var(--color-green-900);
136
+
137
+ --color-warning-50: var(--color-yellow-50);
138
+ --color-warning-100: var(--color-yellow-100);
139
+ --color-warning-200: var(--color-yellow-200);
140
+ --color-warning-300: var(--color-yellow-300);
141
+ --color-warning-400: var(--color-yellow-400);
142
+ --color-warning-500: var(--color-yellow-500);
143
+ --color-warning-600: var(--color-yellow-600);
144
+ --color-warning-700: var(--color-yellow-700);
145
+ --color-warning-800: var(--color-yellow-800);
146
+ --color-warning-900: var(--color-yellow-900);
147
+
148
+ --color-negative-50: var(--color-red-50);
149
+ --color-negative-100: var(--color-red-100);
150
+ --color-negative-200: var(--color-red-200);
151
+ --color-negative-300: var(--color-red-300);
152
+ --color-negative-400: var(--color-red-400);
153
+ --color-negative-500: var(--color-red-500);
154
+ --color-negative-600: var(--color-red-600);
155
+ --color-negative-700: var(--color-red-700);
156
+ --color-negative-800: var(--color-red-800);
157
+ --color-negative-900: var(--color-red-900);
158
+
159
+ /* コンポーネントカラー定義 */
160
+ --color-divider-low: var(--color-neutral-100);
161
+ --color-divider-middle: var(--color-neutral-200);
162
+ --color-divider-high: var(--color-neutral-300);
163
+ --color-text-disabled: var(--color-neutral-300);
164
+ --color-text-placeholder: var(--color-neutral-500);
165
+ --color-text-low: var(--color-neutral-500);
166
+ --color-text-middle: var(--color-neutral-700);
167
+ --color-text-high: var(--color-neutral-900);
168
+ --color-skeleton-fill: var(--color-neutral-200);
169
+
170
+ /* ベースカラー（base） - gray と同等 */
171
+ --color-base-50: var(--color-gray-50);
172
+ --color-base-100: var(--color-gray-100);
173
+ --color-base-200: var(--color-gray-200);
174
+ --color-base-300: var(--color-gray-300);
175
+ --color-base-400: var(--color-gray-400);
176
+ --color-base-500: var(--color-gray-500);
177
+ --color-base-600: var(--color-gray-600);
178
+ --color-base-700: var(--color-gray-700);
179
+ --color-base-800: var(--color-gray-800);
180
+ --color-base-900: var(--color-gray-900);
181
+
182
+ /* 角丸 - デフォルト値は設定可能 */
183
+ --radius-divide: var(--radius-none);
184
+ --radius-minimum: var(--radius-xs);
185
+ --radius-notice: var(--radius-sm);
186
+ --radius-action: var(--radius-{{RADIUS}});
187
+ --radius-halfModal: var(--radius-lg);
188
+ --radius-modal: var(--radius-xl);
189
+ --radius-round: var(--radius-full);
190
+
191
+ /* シャドウ */
192
+ --shadow-base: var(--shadow-none);
193
+ --shadow-flat: var(--shadow-2xs);
194
+ --shadow-raise: var(--shadow-xs);
195
+ --shadow-stick: var(--shadow-sm);
196
+ --shadow-float: var(--shadow-md);
197
+ --shadow-popout: var(--shadow-lg);
198
+ }
199
+
200
+ /* セマンティクスのトークン定義（Tailwind ユーティリティ生成用） */
79
201
  @theme inline {
80
202
  /* セマンティクスカラー定義 */
81
203
  --color-neutral-50: var(--color-gray-50);