sparkle-design-cli 1.3.0 → 1.3.2

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/font-manager.js

@@ -53,6 +53,9 @@ function createSourceBlock(sourcePackages = []) {
  * @returns {string} sparkle-design.css importブロック
  */
 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');
 }
 
@@ -128,10 +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>} sourcePackages 追加パッケージ名の配列
+ * @param {Array<string>|null} sourcePackages 追加パッケージ名の配列（null の場合は @source を生成しない）
  * @returns {boolean} globals.css の更新に成功した場合は true
  */
-export function updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages = []) {
+export function updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages = null) {
   if (fontImports.length === 0) {
     return false;
   }
@@ -177,9 +180,9 @@ export function updateGlobalsWithFonts(fontImports, globalsPath, sourcePackages
  * フォント管理の自動処理を実行する
  * sparkle-design.css からフォントimportを抽出し、globals.css に移動する
  * @param {string} sparkleDesignPath sparkle-design.cssのパス
- * @param {Array<string>} sourcePackages 追加パッケージ名の配列
+ * @param {Array<string>|null} sourcePackages 追加パッケージ名の配列（null の場合は @source を生成しない）
  */
-export function manageFontImports(sparkleDesignPath, sourcePackages = []) {
+export function manageFontImports(sparkleDesignPath, sourcePackages = null) {
   try {
     // 1. globals.cssのパスを推定（sparkle-design.cssと同じディレクトリ）
     const globalsPath = path.join(path.dirname(sparkleDesignPath), 'globals.css');

package/lib/generate-css.js

@@ -137,7 +137,7 @@ export function generateCSS(configPath = null, outputPath = null) {
 
   // 6. フォント管理の自動処理を実行
   console.log(MESSAGES.FONT_MANAGEMENT_START);
-  const sourcePackages = config['source-packages'] || [];
+  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.3.0",
+  "version": "1.3.2",
   "description": "Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール",
   "main": "lib/generate-css.js",
   "type": "module",

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

@@ -319,6 +319,14 @@
   --shadow-popout: var(--shadow-lg);
 }
 
+/* サブピクセルアンチエイリアス（Tailwind v4 デフォルトの antialiased を上書き） */
+@layer base {
+  *, ::before, ::after, ::backdrop {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+}
+
 /* Figmaのテキストスタイル定義 */
 /* NOTE: v4の記法ではないがv3環境で使われても反映できるようにこちらの記法で記述 */
 @layer utilities {