sparkle-design-cli 2.0.7-beta.2 → 2.0.7-beta.5

package/README.md

@@ -15,7 +15,7 @@ setup は次を自動で行います:
 1. パッケージマネージャー（pnpm / npm / yarn / bun）を自動検出
 2. `sparkle-design` を dependencies、`tailwindcss` + `@tailwindcss/postcss` を devDependencies に追加
 3. 未作成の場合のみ初期ファイルを生成:
-   - `sparkle.config.json`（デフォルトは blue / Inter / JetBrains Mono / md）
+   - `sparkle.config.json`（デフォルトは blue / BIZ UDPGothic / BIZ UDGothic / md — sparkle-design 本体のデフォルトに合わせて統一）
    - `postcss.config.mjs`
    - 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 ブロックを追加
@@ -35,10 +35,10 @@ npm install -g sparkle-design-cli
 
 npm の dist-tag でチャネルを分離しています。通常は latest を使い、品質保証中の変更を試したい場合のみ beta を指定してください。
 
-| チャネル | dist-tag | 用途 | 指定方法 |
-|---------|---------|------|---------|
-| 安定版 | `latest` | 本番運用向け。`npx --yes sparkle-design-cli` は常にこれを取得 | （デフォルト） |
-| Beta | `beta` | 品質保証中の検証用 | `npx --yes sparkle-design-cli@beta` |
+| チャネル | dist-tag | 用途                                                          | 指定方法                            |
+| -------- | -------- | ------------------------------------------------------------- | ----------------------------------- |
+| 安定版   | `latest` | 本番運用向け。`npx --yes sparkle-design-cli` は常にこれを取得 | （デフォルト）                      |
+| Beta     | `beta`   | 品質保証中の検証用                                            | `npx --yes sparkle-design-cli@beta` |
 
 ```bash
 # beta で setup を試す
@@ -103,6 +103,12 @@ sparkle-design-cli generate --output ./styles/design.css
 
 # 設定ファイルと出力先を両方指定
 sparkle-design-cli generate -c ./config/custom.json -o ./dist/styles.css
+
+# Tailwind エントリ CSS を明示指定
+sparkle-design-cli generate --globals-path src/styles/app.css
+
+# CI 向け: @source 注入や Tailwind import 欠落などの失敗を exit 1 にする
+sparkle-design-cli generate --strict
 ```
 
 #### generate オプション一覧
@@ -110,6 +116,12 @@ sparkle-design-cli generate -c ./config/custom.json -o ./dist/styles.css
 - `-h, --help`: ヘルプメッセージを表示
 - `-c, --config <パス>`: 設定ファイルのパス（デフォルト: `./sparkle.config.json`）
 - `-o, --output <パス>`: 出力ファイルのパス（デフォルト: `./src/app/sparkle-design.css`）
+- `--globals-path <パス>`: Tailwind エントリポイント CSS のパス（デフォルト: 自動検出）。
+  **指定したパスが存在しない場合は `--strict` の有無に関わらず常に exit 1**（`sparkle.config.json` の `extend.globals-path` も同様）
+- `--strict`: 以下を warn ではなく **exit 1** に昇格させる（CI 向け。既定は warn + 継続で後方互換を維持）:
+  - デザインシステムパッケージが `package.json` に入っているのに Tailwind エントリ CSS が見つからない
+  - エントリ CSS はあるが `@import "tailwindcss";` が書かれていない（警告メッセージに追記すべき行まで actionable に表示）
+  - エントリ CSS への書き込みに失敗した
 
 ### check: アンチパターン検査
 
@@ -142,24 +154,15 @@ sparkle-design-cli check --help
 - children なしの Button に prefixIcon / suffixIcon を使わない
 - Material Symbols を className 直書きで使わない
 - shadcn/ui 既定 token を Sparkle Design 内へ持ち込まない
-- Tailwind デフォルト typography（text-sm, font-medium 等）を使わない
-- CardTitle に typography を上書きしない
+- Tailwind デフォルト typography を Sparkle Design コンポーネント内で使わない
+- CardTitle に typography 系クラスを付与しない
 - CardControl に Button / IconButton 以外を入れない
-- CardHeader / CardContent の padding を上書きしない
-- asChild と prefixIcon / suffixIcon / isLoading を併用しない
-- disabled を isDisabled の代わりに使わない
-- Button の prefixIcon に JSX を渡さない
+- Card 系コンポーネントのデフォルト padding を安易に上書きしない
+- asChild 使用時に prefixIcon / suffixIcon / isLoading を使わない
+- Sparkle Design コンポーネントでは isDisabled を使う
+- Button の prefixIcon / suffixIcon に JSX を渡さない
 - Icon の children にテキストを渡さない
-- クリック可能な Card を `<button>` / `<a>` / `role="button"` でラップせず、`ClickableCard` を使う
-
-#### Manual Review Reminders
-
-`--format json` では、機械検出できない観点も `manualReviewReminders` として返します。現在は次を含みます。
-
-- Badge と Tag の意味的な使い分け
-- CardDescription の typography / color token 明示
-- Dialog と Modal の UX 上の使い分け
-- 手書き span が Tag で置き換え可能か
+- クリック可能な Card は ClickableCard を使う（button / a / role="button" でラップしない）
 
 #### 導入先での推奨設定
 
@@ -198,6 +201,7 @@ npx --yes sparkle-design-cli setup --assistant claude --skip-install --skip-scaf
 ```
 
 既存ファイルは上書きされません:
+
 - `sparkle.config.json` / `postcss.config.*` / Tailwind エントリ CSS が存在する場合はそのまま保持
 - 既に依存関係に入っているパッケージはインストールをスキップ
 - `package.json` の既存の `lint:sparkle*` 独自 script は保持（`--force-script-update` で上書き）
@@ -205,6 +209,7 @@ npx --yes sparkle-design-cli setup --assistant claude --skip-install --skip-scaf
 `--target` を省略した場合、lint 対象は `src`, `src/components`, `src/features`, `app`, `components` の順で自動検出されます。
 
 利用できる assistant:
+
 - `claude`: `CLAUDE.md`
 - `codex`: `AGENTS.md`
 - `cursor`: `.cursor/rules/sparkle-design-guard.mdc`
@@ -220,6 +225,9 @@ npx --yes sparkle-design-cli setup --assistant claude --skip-install --skip-scaf
 - `--skip-generate`: `generate` 実行をスキップ
 - `--dry-run`: ファイルを変更せず結果だけ表示
 - `--force-script-update`: 既存の `lint:sparkle` 系 script も上書き
+- `--strict`: `generate` ステージの失敗を exit 1 に昇格（CI 向け）。
+  現状は `generate` の失敗のみ対象（install / scaffold / guard の失敗は従来どおり warn）。
+  `--skip-generate` / `--dry-run` と併用した場合は strict チェック対象が無くなるため警告を出します。
 
 `setup` は通常実行時も JSON サマリーを stdout に表示します。`--dry-run` を付けると、その JSON を表示したままファイル変更だけを抑止します。
 
@@ -259,9 +267,7 @@ Figma プラグインが出力する基本4項目に加えて、プロジェク
         { "family": "Montserrat", "weights": [500, 600, 700] },
         { "family": "Noto Sans JP", "weights": [400, 500, 600, 700] }
       ],
-      "mono": [
-        { "family": "Roboto Mono", "weights": [400, 700] }
-      ]
+      "mono": [{ "family": "Roboto Mono", "weights": [400, 700] }]
     },
     "source-packages": ["@goodpatch/sparkle-design-internal"],
     "custom-css": "./src/app/custom-tokens.css"

package/lib/anti-pattern-rules.js

@@ -971,21 +971,35 @@ const ANTI_PATTERN_GROUPS = [
       description: 'CardControl に Button / IconButton 以外を入れない',
       recommendation:
         'CardControl はアクションボタン用です。ステータス表示には CardDescription を使ってください。',
-      // 以前の regex は `[\s\S]*?` が `</CardControl>` を越えて貪欲に探索してしまい、
-      // 隣接する <CardContent> 等を非 Button 子要素として誤検知していた。
-      // 内部コンテンツが `</CardControl>` を越えないよう lazy 側に停止条件を入れ、
-      // 開始タグの直後から終了タグ直前までの範囲だけを検査する。
-      // 加えて (1) 開始タグ自体が自己閉じ `/>` で終わっていたら子要素は存在しない
-      // ので検査対象外とする（`[^>/]*[^>/]?`）、(2) ネストした `<CardControl>` も
-      // Button/IconButton 扱いのスキップリストに加えて誤発報を防ぐ。
-      // en: The previous pattern let `[\s\S]*?` leak past `</CardControl>`,
-      // flagging adjacent siblings (e.g. `<CardContent>`) as non-Button children.
-      // We now (a) constrain the lazy body so it cannot cross the closing tag,
-      // (b) skip self-closing tags `<CardControl />` entirely, and
-      // (c) treat a nested `<CardControl>` as an allowed child so we don't
-      // report the inner wrapper of a pathological nested structure.
-      pattern:
-        /<CardControl\b(?:[^>]*[^>/])?>(?:(?!<\/CardControl\b)[\s\S])*?<(?!Button\b|IconButton\b|CardControl\b|\/CardControl\b)[A-Za-z][\w.]*/g,
+      // 2-pass matcher。1 本の regex に入れ子 negative lookahead を押し込む代わりに、
+      // まず <CardControl>…</CardControl> ブロックを抽出し、次にブロック内部だけを
+      // スキャンして Button / IconButton / 入れ子 CardControl 以外の開始タグを見つける。
+      //   1. 入れ子 negative lookahead が無くなり読みやすい
+      //   2. 自己閉じ `<CardControl />` は 1st pass でそもそも拾わない（special case 不要）
+      //   3. O(総コンテンツ長) で評価が済むため、大規模 JSX でも backtracking で
+      //      処理時間が跳ねない
+      // en: Two-pass matcher. First pass extracts `<CardControl>…</CardControl>`
+      // blocks (self-closing variants are skipped because the opening-tag regex
+      // requires the previous char not to be `/`). Second pass scans the inner
+      // content for any element that is not Button / IconButton / nested
+      // CardControl. This replaces the nested tempered-lazy regex with a shape
+      // that is easier to reason about and stays linear in total content length.
+      match: (content) => {
+        const BLOCK_PATTERN = /<CardControl\b[^>]*(?<!\/)>([\s\S]*?)<\/CardControl\b[^>]*>/g;
+        const NON_BUTTON_CHILD = /<(?!Button\b|IconButton\b|CardControl\b)[A-Za-z][\w.]*/g;
+        const results = [];
+        for (const blockMatch of content.matchAll(BLOCK_PATTERN)) {
+          const openingEnd = blockMatch.index + blockMatch[0].indexOf('>') + 1;
+          const inner = blockMatch[1];
+          for (const childMatch of inner.matchAll(NON_BUTTON_CHILD)) {
+            results.push({
+              index: openingEnd + childMatch.index,
+              text: childMatch[0],
+            });
+          }
+        }
+        return results;
+      },
     },
     featureSection: lines([
       '### CardControl にはアクションボタンのみを入れる',

package/lib/check.js

@@ -12,7 +12,12 @@ const BASE_MANUAL_REVIEW_REMINDERS = getManualReviewReminders();
 
 const SPARKLE_HEAD_JSX_PATTERN = /<SparkleHead\s*\/?\s*>/;
 const CSP_PATTERN = /content-security-policy|contentSecurityPolicy|Content-Security-Policy/i;
-const NEXT_CONFIG_CANDIDATES = ['next.config.js', 'next.config.ts', 'next.config.mjs', 'next.config.cjs'];
+const NEXT_CONFIG_CANDIDATES = [
+  'next.config.js',
+  'next.config.ts',
+  'next.config.mjs',
+  'next.config.cjs',
+];
 
 function toRelativeReportPath(filePath) {
   return path.relative(process.cwd(), filePath).split(path.sep).join('/');
@@ -65,10 +70,30 @@ function formatMatch(match) {
   return match[0].replace(/\s+/g, ' ').trim().slice(0, 120);
 }
 
+function formatSnippet(text) {
+  return text.replace(/\s+/g, ' ').trim().slice(0, 120);
+}
+
 function collectFindings(filePath, content) {
   const findings = [];
 
   for (const rule of RULES) {
+    if (typeof rule.match === 'function') {
+      // rule.match(content) -> Array<{ index: number, text: string }>
+      // 複雑な照合が必要なルール向けの opt-in API。2-pass 方式などで regex 単体の
+      // backtracking リスクを回避したいときに使う。index は content 内の絶対オフセット。
+      for (const hit of rule.match(content)) {
+        findings.push({
+          filePath,
+          id: rule.id,
+          description: rule.description,
+          recommendation: rule.recommendation,
+          line: getLineNumber(content, hit.index ?? 0),
+          snippet: formatSnippet(hit.text ?? ''),
+        });
+      }
+      continue;
+    }
     for (const match of content.matchAll(rule.pattern)) {
       findings.push({
         filePath,
@@ -96,8 +121,10 @@ function collectFontImportFindings(cssFiles) {
       findings.push({
         filePath,
         id: 'font-import-in-css',
-        description: 'CSS にフォント @import が残っています。SparkleHead コンポーネントに移行してください。',
-        recommendation: 'sparkle-design-cli generate を再実行すると、フォント読み込みが SparkleHead.tsx に移行され、globals.css から @import が除去されます。',
+        description:
+          'CSS にフォント @import が残っています。SparkleHead コンポーネントに移行してください。',
+        recommendation:
+          'sparkle-design-cli generate を再実行すると、フォント読み込みが SparkleHead.tsx に移行され、globals.css から @import が除去されます。',
         line: getLineNumber(content, match.index ?? 0),
         snippet: match[0].slice(0, 120),
       });
@@ -140,12 +167,20 @@ function collectNextjsCspFindings(cwd) {
     if (!CSP_PATTERN.test(content)) continue;
 
     const missingDomains = [
-      { domain: 'fonts.googleapis.com', directive: 'style-src', pattern: new RegExp(FONT_DOMAINS.GOOGLEAPIS.replace('https://', '')) },
-      { domain: 'fonts.gstatic.com', directive: 'font-src', pattern: new RegExp(FONT_DOMAINS.GSTATIC.replace('https://', '')) },
+      {
+        domain: 'fonts.googleapis.com',
+        directive: 'style-src',
+        pattern: new RegExp(FONT_DOMAINS.GOOGLEAPIS.replace('https://', '')),
+      },
+      {
+        domain: 'fonts.gstatic.com',
+        directive: 'font-src',
+        pattern: new RegExp(FONT_DOMAINS.GSTATIC.replace('https://', '')),
+      },
     ].filter(({ pattern }) => !pattern.test(content));
 
     if (missingDomains.length > 0) {
-      const missing = missingDomains.map(d => `${d.domain} (${d.directive})`).join(', ');
+      const missing = missingDomains.map((d) => `${d.domain} (${d.directive})`).join(', ');
       findings.push({
         filePath: configPath,
         id: 'csp-font-block',
@@ -206,7 +241,8 @@ function createCheckReport(targets = []) {
   if (!hasSparkleHeadUsage(fileContents)) {
     manualReviewReminders.push({
       id: 'sparkle-head-missing',
-      message: 'SparkleHead がソースコード内に見つかりませんでした。ルートレイアウトの <head> 内に <SparkleHead /> を配置してフォントの早期読み込みを有効にしてください。',
+      message:
+        'SparkleHead がソースコード内に見つかりませんでした。ルートレイアウトの <head> 内に <SparkleHead /> を配置してフォントの早期読み込みを有効にしてください。',
     });
   }
 
@@ -277,4 +313,9 @@ export function checkProject(targets = [], options = {}) {
   return report.findings.length > 0;
 }
 
-export { RULES, collectFindings, createCheckReport, BASE_MANUAL_REVIEW_REMINDERS as MANUAL_REVIEW_REMINDERS };
+export {
+  RULES,
+  collectFindings,
+  createCheckReport,
+  BASE_MANUAL_REVIEW_REMINDERS as MANUAL_REVIEW_REMINDERS,
+};

package/lib/setup.js

@@ -183,13 +183,11 @@ function buildInstructionBlock(target, assistant) {
     BLOCK_START,
     heading,
     '',
-    '- **必ず読む**: Sparkle Design のコンポーネントを使う前に、インストール済みパッケージの型定義 `node_modules/<パッケージ名>/dist/components/ui/<コンポーネント名>/index.d.ts` を必ず読んでください。Prop 仕様・使用例・アンチパターンは JSDoc に書かれている（✅ / ❌ 例込み）ので、これが Source of Truth です。`node_modules/sparkle-design/dist/` や `node_modules/@goodpatch/sparkle-design-internal/dist/` を対象に、`index.d.ts` の JSDoc まで読み切ること。',
+    '- **Scope**: Sparkle Design is a UI component library. For capability areas it does not cover (charts, data visualization, maps, rich text editors, animation libraries, etc.), **feel free to adopt other libraries** (e.g. Recharts, D3, Chart.js) — do not try to solve everything inside Sparkle Design. Pass Sparkle Design CSS tokens (`--color-primary-*` etc.) into those libraries to keep visuals consistent.',
     "- **Required reading**: Before using any Sparkle Design component, read the installed package's type definitions at `node_modules/<package>/dist/components/ui/<component>/index.d.ts` — prop specs, usage, and anti-patterns (with ✅ / ❌ examples) live in the JSDoc and are the source of truth. Target the installed package(s), e.g. `sparkle-design` and/or `@goodpatch/sparkle-design-internal`, and read the full JSDoc, not just the type signature.",
-    '- **必ず実行**: UI コンポーネントを作成・変更した後は、終了前に `lint:sparkle` を実行してください。Sparkle Design のアンチパターンを検出します。',
     '- **Required**: After creating or modifying any UI component, run `lint:sparkle` before finishing. This catches Sparkle Design anti-patterns.',
     `- For AI review, prefer \`lint:sparkle:json\` or run \`npx --yes sparkle-design-cli check ${target} --format json\` directly.`,
-    '- JSON 出力の `findings` に加えて、**`manualReviewReminders` の内容も必ず 1 項目ずつ確認**してください。機械検出できない Badge/Tag の使い分けなどが含まれます。',
-    '- You must inspect every entry in both `findings` and `manualReviewReminders` — the reminders flag judgment calls (Badge vs Tag etc.) that the linter cannot detect.',
+    '- You must inspect every entry in both `findings` and `manualReviewReminders` — the reminders flag judgment calls (Badge vs Tag, etc.) that the linter cannot detect.',
     BLOCK_END,
   ].join('\n');
 }

package/package.json

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