sparkle-design-cli 2.0.2 → 2.0.6

package/README.md

@@ -17,7 +17,7 @@ setup は次を自動で行います:
 3. 未作成の場合のみ初期ファイルを生成:
    - `sparkle.config.json`（デフォルトは blue / Inter / JetBrains Mono / md）
    - `postcss.config.mjs`
-   - `src/app/globals.css`（または `src/globals.css`）
+   - Tailwind エントリ CSS — Next.js App Router なら `src/app/globals.css`、Vite なら `src/index.css`、それ以外は `src/globals.css`（プロジェクト構成から自動判定）
 4. AI 指示ファイル（`CLAUDE.md` / `AGENTS.md` / Cursor rules）に Sparkle Design Guard ブロックを追加
 5. `sparkle-design-cli generate` を実行し、`sparkle-design.css` と `SparkleHead.tsx` を生成
 
@@ -131,6 +131,7 @@ sparkle-design-cli check --help
 - disabled を isDisabled の代わりに使わない
 - Button の prefixIcon に JSX を渡さない
 - Icon の children にテキストを渡さない
+- クリック可能な Card を `<button>` / `<a>` / `role="button"` でラップせず、`ClickableCard` を使う
 
 #### Manual Review Reminders
 
@@ -159,7 +160,7 @@ AI エージェントや CI からこの `lint:sparkle` を呼ぶ運用にする
 
 1. **パッケージマネージャーの検出**（pnpm / yarn / bun / npm）
 2. **パッケージのインストール** — `sparkle-design`（dependencies）、`tailwindcss` + `@tailwindcss/postcss`（devDependencies）
-3. **初期ファイルの生成** — `sparkle.config.json` / `postcss.config.mjs` / `globals.css` が無い場合のみ作成
+3. **初期ファイルの生成** — `sparkle.config.json` / `postcss.config.mjs` / Tailwind エントリ CSS（Next.js は `src/app/globals.css`、Vite は `src/index.css`）が無い場合のみ作成
 4. **AI ガード設定** — `CLAUDE.md` などに Sparkle Design Guard ブロックと `lint:sparkle` script を追加
 5. **`generate` の実行** — `sparkle-design.css` と `SparkleHead.tsx` を生成
 
@@ -178,7 +179,7 @@ npx --yes sparkle-design-cli setup --assistant claude --skip-install --skip-scaf
 ```
 
 既存ファイルは上書きされません:
-- `sparkle.config.json` / `postcss.config.*` / `globals.css` が存在する場合はそのまま保持
+- `sparkle.config.json` / `postcss.config.*` / Tailwind エントリ CSS が存在する場合はそのまま保持
 - 既に依存関係に入っているパッケージはインストールをスキップ
 - `package.json` の既存の `lint:sparkle*` 独自 script は保持（`--force-script-update` で上書き）
 
@@ -267,11 +268,11 @@ Figma プラグインが出力する基本4項目に加えて、プロジェク
 
 #### extend.source-packages
 
-`sparkle-design` を npm パッケージとして利用する場合に必須。`globals.css` に `@source` ディレクティブを自動挿入します。`sparkle-design` は常にデフォルトで含まれます。
+`sparkle-design` を npm パッケージとして利用する場合に必須。Tailwind エントリ CSS（自動検出）に `@source` ディレクティブを自動挿入します。`sparkle-design` は常にデフォルトで含まれます。
 
 #### extend.custom-css
 
-プロジェクト固有のカスタムトークンの CSS ファイルパス。`globals.css` に `@import` が自動挿入されます。`sparkle-design.css` に直接追加すると `generate` 実行時に上書きされるため、必ず別ファイルに分離してください。
+プロジェクト固有のカスタムトークンの CSS ファイルパス。Tailwind エントリ CSS に `@import` が自動挿入されます。`sparkle-design.css` に直接追加すると `generate` 実行時に上書きされるため、必ず別ファイルに分離してください。
 
 ## 出力
 
@@ -286,7 +287,7 @@ Figma プラグインが出力する基本4項目に加えて、プロジェク
 CLI は自動的にフォント管理を行います：
 
 1. **フォント検出**: `sparkle-design.css` から Google Fonts の `@import` 文を検出
-2. **globals.css への移動**: フォントの `@import` を `globals.css` の先頭に移動
+2. **エントリ CSS への移動**: フォントの `@import` を Tailwind エントリ CSS（`globals.css` / `index.css` 等、自動検出）の先頭に移動
 3. **sparkle-design.css から削除**: 元のファイルからフォント `@import` を削除
 
 ### なぜこの処理が必要なのか？
@@ -301,15 +302,15 @@ CSS の仕様では、`@import` 文は `@charset` と `@layer` 以外のすべ
 
 ### 動作条件
 
-- `globals.css` が `sparkle-design.css` と同じディレクトリに存在する場合のみ実行されます
-- `globals.css` が存在しない場合は、フォント管理処理はスキップされます
+- Tailwind エントリ CSS（`@import "tailwindcss"` を含む CSS ファイル）が `sparkle-design.css` と同じディレクトリに存在する場合のみ実行されます（ファイル名に依存しません）
+- エントリ CSS が存在しない場合は、フォント管理処理はスキップされます
 
 ### 出力例
 
 ```text
 📦 フォント管理処理を開始します...
 📝 3個のフォントimportを検出しました
-✅ globals.css にフォントimportを追加しました
+✅ エントリ CSS にフォントimportを追加しました
 ✅ sparkle-design.css からフォントimportを削除しました
 ```
 

package/bin/sparkle-design.js

@@ -202,13 +202,14 @@ Setup options:
   --instructions-path <path> AI 指示ファイルの出力先パス (default: アシスタント別のデフォルト)
   --force-script-update      既存の lint:sparkle 系 script も上書きする
   --skip-install             パッケージインストール（sparkle-design, tailwindcss）をスキップ
-  --skip-scaffold            初期ファイル（sparkle.config.json, postcss.config, globals.css）生成をスキップ
+  --skip-scaffold            初期ファイル（sparkle.config.json, postcss.config, エントリ CSS）生成をスキップ
   --skip-generate            generate 実行をスキップ
 
 Setup の動作:
   1. パッケージマネージャー検出（pnpm / npm / yarn / bun）
   2. sparkle-design を dependencies に追加、tailwindcss + @tailwindcss/postcss を devDependencies に追加
-  3. sparkle.config.json / postcss.config.mjs / globals.css が無ければ初期ファイルを生成
+  3. sparkle.config.json / postcss.config.mjs / Tailwind エントリ CSS（Next.js は
+     src/app/globals.css、Vite は src/index.css 等）が無ければ初期ファイルを生成
   4. AI アシスタントのガードブロックを指定ファイルに挿入（存在しなければ新規作成）
   5. sparkle-design-cli generate を実行し、sparkle-design.css と SparkleHead.tsx を生成
 
@@ -226,7 +227,8 @@ Check で検出する主なパターン:
   - disabled を isDisabled の代わりに使っている
   - Button の prefixIcon に JSX を渡している
   - Icon の children にテキストを渡している
-  - globals.css にフォント @import が残っている（SparkleHead への移行が必要）
+  - <Card> を <button> / <a> / role="button" でラップしている（ClickableCard を使う）
+  - エントリ CSS にフォント @import が残っている（SparkleHead への移行が必要）
   - CSP ヘッダーで Google Fonts がブロックされている可能性
 
 JSON 出力では manualReviewReminders も返すため、AI から実行する場合は --format json を推奨

package/lib/anti-pattern-rules.js

@@ -489,6 +489,62 @@ const ANTI_PATTERN_GROUPS = [
       },
     ],
   },
+  {
+    id: 'card-clickable-wrap',
+    check: {
+      description: 'クリック可能な Card は ClickableCard を使う（button / a / role="button" でラップしない）',
+      recommendation:
+        '`<Card>` を `<button>` / `<a>` / `role="button"` を持つ要素で包まず、`ClickableCard` を使ってください。`ClickableCard` が適切な role / keyboard 対応 / focus ring を担保します。',
+      // <button> / <a> / role="button" が直接 <Card> を子に持つケース
+      // en: <button> / <a> / role="button" wrapping a <Card> directly
+      pattern:
+        /<(?:button\b|a\b|[A-Za-z][A-Za-z0-9]*\b[^>]*\brole\s*=\s*["']button["'])[^>]*>\s*<Card\b/g,
+    },
+    featureSection: lines([
+      '### クリック可能な Card: ClickableCard を使う',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<ClickableCard onClick={handle}>',
+      '  <CardHeader><CardTitle>タイトル</CardTitle></CardHeader>',
+      '</ClickableCard>',
+      '',
+      '// ❌ Wrong - <button> / <a> で Card を包まない',
+      '<button type="button" onClick={handle}>',
+      '  <Card>',
+      '    <CardHeader><CardTitle>タイトル</CardTitle></CardHeader>',
+      '  </Card>',
+      '</button>',
+      '```',
+      '',
+      '`ClickableCard` はクリック可能な Card のパターンとして必要な `role` / キーボード操作 / focus ring を提供する。`<button>` / `<a>` / `role="button"` でラップすると、ボタンの内側に対話型要素（リンクやフォーム要素）を置いたときにネストされた interactive 要素になりアクセシビリティ違反になる。',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/card/index.tsx',
+        targetName: 'Card',
+        section: {
+          bullets: [
+            {
+              ja: '`<Card>` を `<button>` / `<a>` / `role="button"` で包まないでください。クリック可能な Card には専用の `ClickableCard` を使ってください。',
+              en: 'Do not wrap `<Card>` with `<button>` / `<a>` / `role="button"`. Use the dedicated `ClickableCard` component for clickable cards.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<ClickableCard onClick={handle}>',
+            '  <CardHeader><CardTitle>タイトル</CardTitle></CardHeader>',
+            '</ClickableCard>',
+            '',
+            '// ❌ Wrong',
+            '<button type="button" onClick={handle}>',
+            '  <Card>...</Card>',
+            '</button>',
+          ]),
+        },
+      },
+    ],
+  },
   {
     id: 'icon-scale',
     featureSection: lines([

package/lib/generate-css.js

@@ -332,6 +332,40 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
  * @param {string} cssContent CSS内容
  * @param {string|null} outputPath カスタム出力パス（オプション）
  */
+// 自動検出対象の既知デザインシステムパッケージ。
+// `sparkle-design` は CLI 側のデフォルトパッケージなのでリストには加えず「存在判定」にだけ使う。
+// en: Known design-system packages to auto-detect. `sparkle-design` is the CLI's
+//     default source package, so it only acts as an "enables @source" signal.
+const KNOWN_DESIGN_SYSTEM_PACKAGES = [
+  '@goodpatch/sparkle-design-internal',
+];
+
+/**
+ * package.json の dependencies / devDependencies から既知のデザインシステムパッケージを検出する。
+ * - `sparkle-design` が入っていれば（CLI のデフォルトで @source に含まれるため）空配列を返し、@source 挿入を有効化
+ * - `@goodpatch/sparkle-design-internal` など追加の既知パッケージが入っていればリストに含める
+ * - いずれも見つからなければ null（従来通り @source を生成しない）
+ * en: Scan package.json and surface source-packages when a design-system package is present.
+ */
+function detectSourcePackagesFromPackageJson(cwd = process.cwd()) {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(cwd, 'package.json'), 'utf8'));
+    const deps = { ...(pkg.dependencies ?? {}), ...(pkg.devDependencies ?? {}) };
+
+    const hasDefault = Object.prototype.hasOwnProperty.call(deps, 'sparkle-design');
+    const extras = KNOWN_DESIGN_SYSTEM_PACKAGES.filter((name) =>
+      Object.prototype.hasOwnProperty.call(deps, name)
+    );
+
+    if (hasDefault || extras.length > 0) {
+      return extras;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
 function writeCSS(cssContent, outputPath = null) {
   // カスタムパスが指定されていない場合は実行場所からsrc/appディレクトリに出力
   const defaultOutputPath = path.resolve(
@@ -395,8 +429,19 @@ export function generateCSS(configPath = null, outputPath = null, globalsPath =
   writeSparkleHead(sparkleHeadContent, resolvedOutputPath);
 
   // 8. フォント管理の自動処理を実行（globals.css にはフォント @import を差し込まない）
+  // source-packages は以下の合成で決まる:
+  //   1. package.json から既知のデザインシステムパッケージを自動検出（baseline）
+  //   2. config の extend.source-packages（ユーザー追記分、例: クライアント固有パッケージ）
+  // 両方空なら null（@source を生成しない）。
+  // en: source-packages are resolved by merging auto-detection (from package.json)
+  //     with explicit config entries. If neither surfaces anything, @source is skipped.
   console.log(MESSAGES.FONT_MANAGEMENT_START);
-  const sourcePackages = 'source-packages' in config ? (config['source-packages'] || []) : null;
+  const detectedPackages = detectSourcePackagesFromPackageJson();
+  const explicitPackages = 'source-packages' in config ? (config['source-packages'] || []) : null;
+  const sourcePackages =
+    detectedPackages !== null || explicitPackages !== null
+      ? [...new Set([...(detectedPackages ?? []), ...(explicitPackages ?? [])])]
+      : null;
   const customCssPath = config['custom-css'] || null;
   const globalsPathOverride = globalsPath || config['globals-path'] || null;
   manageFontImports(resolvedOutputPath, sourcePackages, customCssPath, globalsPathOverride);
@@ -414,6 +459,7 @@ export {
   // メイン関数
   processTemplate,
   writeCSS,
+  detectSourcePackagesFromPackageJson,
   // ファイル読み込み
   loadConfig,
   loadTemplate,

package/lib/setup.js

@@ -5,6 +5,10 @@ import { generateCSS } from './generate-css.js';
 
 // デフォルトの sparkle.config.json テンプレート
 // en: Default sparkle.config.json template
+// @source ディレクティブの生成は generate 側が package.json から既知のデザインシステム
+// パッケージ（sparkle-design / @goodpatch/sparkle-design-internal 等）を自動検出して
+// 行うため、ここで extend.source-packages を指定する必要はない。独自パッケージを
+// 追加する場合のみユーザーが extend.source-packages に追記する。
 const DEFAULT_SPARKLE_CONFIG = {
   primary: 'blue',
   'font-pro': 'Inter',
@@ -309,12 +313,33 @@ function ensurePackagesInstalled(cwd, packageManager, candidates, { dev = false,
   return { ran: true, reason: 'installed', packages: missing, packageManager, dev };
 }
 
+// Vite の設定ファイル候補（プロジェクト種別の判定に使う）
+// en: Vite config files used to detect a Vite project
+const VITE_CONFIG_FILES = [
+  'vite.config.ts',
+  'vite.config.js',
+  'vite.config.mjs',
+  'vite.config.cjs',
+  'vite.config.mts',
+  'vite.config.cts',
+];
+
+function isViteProject(cwd) {
+  return VITE_CONFIG_FILES.some((name) => fs.existsSync(path.join(cwd, name)));
+}
+
 /**
- * src/app → src/app/globals.css、src 直下があれば src/globals.css を優先
- * en: Prefer src/app/globals.css when src/app exists, otherwise src/globals.css
+ * エントリポイント CSS の新規作成先を決定する。
+ * - Next.js App Router (src/app あり) → src/app/globals.css
+ * - Vite プロジェクト → src/index.css（Vite の慣習に合わせる）
+ * - それ以外で src/ がある → src/globals.css
+ * - フォールバック → src/app/globals.css
+ * en: Pick the scaffold target for the entry CSS. Vite projects get src/index.css
+ *     to match the common convention, Next.js App Router gets src/app/globals.css.
  */
 function defaultGlobalsCssTarget(cwd) {
   if (fs.existsSync(path.join(cwd, 'src/app'))) return 'src/app/globals.css';
+  if (isViteProject(cwd)) return 'src/index.css';
   if (fs.existsSync(path.join(cwd, 'src'))) return 'src/globals.css';
   return 'src/app/globals.css';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design-cli",
-  "version": "2.0.2",
+  "version": "2.0.6",
   "description": "Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",