sparkle-design-cli 2.4.0 → 2.4.2

package/README.md

@@ -648,9 +648,9 @@ npx sparkle-design-cli generate -c ./config/sparkle.admin.json \
 
 ```css
 /* entry CSS: 両方を同時に import してよい */
-@import "tailwindcss";
-@import "./sparkle-employee.css"; /* @theme inline を含む通常の generate 出力（ベース） */
-@import "./sparkle-admin-scope.css"; /* --scope の出力。@theme inline は含まない */
+@import 'tailwindcss';
+@import './sparkle-employee.css'; /* @theme inline を含む通常の generate 出力（ベース） */
+@import './sparkle-admin-scope.css'; /* --scope の出力。@theme inline は含まない */
 ```
 
 ```html
@@ -666,6 +666,7 @@ npx sparkle-design-cli generate -c ./config/sparkle.admin.json \
 - フォント import・`@source`・SparkleHead.tsx・globals.css パッチ等、ドキュメント全体に関わる**出力**は行いません。これらはベース側の通常 `generate` が既に担っているため、バリアントごとに重複させる必要はありません。ただし `font-pro` / `font-mono` 等の **validation 自体**は通常の `generate` と同様に適用されます（出力しないだけで、config の妥当性チェックは変わりません）。
 - `-o/--output` の指定が必須です（既定の `sparkle-design.css` を誤って上書きしないため）。`--strict` / `--globals-path` とは併用できません（`--scope` はグローバル CSS のパッチを行わないため）。
 - 現状 `primary` は 7 色パレットからの選択のみ対応しています。7 色にないカスタムブランドカラーを `--scope` の変数だけで表現したい場合は、`extend.custom-css` の要領で手動でセレクタ配下に `--color-primary-*` を定義してください（`--scope` の出力とマージして使えます）。
+- **v2.4.1 以降**: ベース側 `generate` が出す `@theme inline` の各宣言は、プリミティブへの直接参照ではなく同名のセマンティック変数への自己参照（例: `--color-primary-500: var(--color-primary-500)`）になっています。Tailwind v4 は `@theme inline` の宣言右辺をそのまま compiled utility class にインライン展開する仕様のため、これが無いと `.bg-primary-500` 等の compiled utility は最初からプリミティブ変数だけを参照し、`--scope` がセマンティック変数だけを上書きしても utility class には一切反映されません（v2.4.0 はこの自己参照が無く、`--scope` の上書きが compiled utility に効かない状態でした）。v2.4.1 以降を使ってください。
 
 このパターンは、次の「非推奨: 属性スコープでの Tailwind クラス上書き」が抱えていた脆さも同時に解消します。`--scope` が上書きするのは Sparkle が公開しているトークン契約（`--color-primary-*` 等の CSS 変数）だけであり、ユーティリティクラス名やコンポーネント内部の specificity には一切依存しません。そのため、Sparkle 側のコンポーネント実装（クラス名の付け方や compound attribute selector 等）が変わっても、`--scope` の出力が壊れることはありません。
 

package/lib/constants.js

@@ -49,6 +49,17 @@ export const VITE_CONFIG_FILES = [
 ];
 
 // 正規表現パターン
+// `semanticName` のような key 由来の文字列を `new RegExp(...)` に埋め込む箇所で
+// 使う。値は radius.csv の固定ヘッダー行由来で現状メタ文字を含まないが、
+// 将来 radius.csv にメタ文字を含む列が追加された場合に正規表現が壊れる/意図しない
+// マッチをするのを防ぐため、生成前に必ずエスケープする（lib/check.js の
+// 同種ヘルパーと同じ方針）。
+// en: Escape regex metacharacters before interpolating a key-derived string
+// into `new RegExp(...)`. semanticName values come from radius.csv's fixed
+// header row today, but escaping guards against a future column containing
+// a metacharacter breaking or silently mismatching the pattern.
+const escapeRegExpLiteral = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
 export const REGEX = {
   // フォント関連
   FONT_IMPORT:
@@ -116,8 +127,20 @@ export const REGEX = {
   // テンプレート関連
   COLOR_TOKENS_PLACEHOLDER: /[ \t]*\/\* \{\{COLOR_TOKENS\}\} \*\/[ \t]*\n?/,
   FONT_IMPORTS_PLACEHOLDER: /[ \t]*\/\* \{\{FONT_IMPORTS\}\} \*\/[ \t]*\n?/,
-  RADIUS_SEMANTIC_PATTERN: (semanticName) =>
-    new RegExp(`--radius-${semanticName}:\\s*var\\(--radius-[^)]+\\)`, 'g'),
+  // negative lookahead で `var(--radius-<semanticName>)`（テンプレートの
+  // `@theme inline` が issue #229 対応で持つ自己参照）を除外する。self-reference
+  // はランタイムでの scope 上書き（generate --scope）を compiled utility に
+  // 効かせるための意図的な構造なので、この一括置換で primitive 参照に
+  // 巻き戻してはいけない。プレーンな `:root`（セマンティックブロック）側の
+  // `var(--radius-{{RADIUS}})` 由来の occurrence だけを引き続き解決対象にする。
+  // en: Exclude the self-referencing `var(--radius-<semanticName>)` occurrence
+  // (the @theme inline indirection added for issue #229) via negative
+  // lookahead, so this bulk substitution only resolves the plain semantic
+  // `:root` block's primitive-referencing occurrence.
+  RADIUS_SEMANTIC_PATTERN: (semanticName) => {
+    const escaped = escapeRegExpLiteral(semanticName);
+    return new RegExp(`--radius-${escaped}:\\s*var\\(--radius-(?!${escaped}\\b)[^)]+\\)`, 'g');
+  },
 };
 
 // テンプレートプレースホルダー

package/lib/file-loader.js

@@ -162,7 +162,13 @@ export function loadRadiusMapping() {
   );
 
   // CSVをパース
-  const lines = csvContent.trim().split('\n');
+  // `radius.csv` は CRLF 改行のため、単純な `split('\n')` だと各行末尾に `\r` が
+  // 残る（末尾カラムの値・ヘッダー名に紛れ込む: 例 `round` -> `"round\r"`）。
+  // `\r?\n` で split して LF/CRLF どちらでも正しく行分割する。
+  // en: radius.csv uses CRLF line endings; a plain `split('\n')` leaves a
+  // trailing `\r` on each line's last field (e.g. the `round` header becomes
+  // `"round\r"`). Split on `\r?\n` to handle both LF and CRLF correctly.
+  const lines = csvContent.trim().split(/\r?\n/);
   const headers = lines[0].split(',');
   const radiusMapping = {};
 

package/lib/generate-css.js

@@ -562,6 +562,23 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
   });
 
   // 6. Radiusの一括置換
+  //
+  // この置換は processedCSS 全体（プレーンな :root ブロックと @theme inline
+  // ブロックの両方）を対象にした一括正規表現なので、REGEX.RADIUS_SEMANTIC_PATTERN
+  // の negative lookahead が「@theme inline 側の自己参照 var(--radius-<semanticName>)
+  // には決してマッチしない」という前提の上に成り立っている（issue #229
+  // フォローアップ）。この前提は「radius.csv のどのプリセット値も、7つの
+  // セマンティックキー名（divide/minimum/notice/action/halfModal/modal/round）
+  // のいずれとも文字列衝突しない」という不変条件に依存する。radius.csv に
+  // プリセット値としてこれらの名前と同じ列挙値を追加すると壊れるため注意
+  // （generate-css.test.js の「全 radius プリセット × 全セマンティックキー」
+  // テストが実際の radius.csv に対してこの不変条件を継続的に検証している）。
+  // en: This bulk substitution runs over the entire processedCSS (both the
+  // plain :root block and @theme inline), so REGEX.RADIUS_SEMANTIC_PATTERN's
+  // negative lookahead relies on the invariant that no radius.csv preset
+  // value ever collides with one of the 7 semantic key names. The
+  // "all radius presets x all semantic keys" test in generate-css.test.js
+  // continuously checks this invariant against the real radius.csv.
   if (config.radius && radiusMapping[config.radius]) {
     const radiusValues = radiusMapping[config.radius];
 
@@ -805,6 +822,18 @@ const SEMANTIC_ROOT_MARKER =
  * `assertSafeFontWeights` 等）自体は通常の `generate` と同様に適用される。
  * 出力しないだけで、config の妥当性チェックは変わらず全項目に効く。
  *
+ * 重要な前提（issue #229 フォローアップ）: この関数がセマンティックトークンだけを
+ * 上書きして compiled utility class（`.bg-primary-500` 等）に実際に反映されるのは、
+ * ベース側の `generate` が出す `@theme inline` の各宣言（`sparkle-variables` の
+ * テンプレート側）が、プリミティブへの直接参照ではなく同名のセマンティック変数への
+ * 自己参照（例: `--color-primary-500: var(--color-primary-500)`）になっているから。
+ * Tailwind v4 は `@theme inline` の宣言右辺をそのまま compiled utility に埋め込む
+ * ため、もしここがプリミティブ直接参照のままだと、compiled utility は最初から
+ * セマンティック変数を一切参照せず、この関数の出力（セマンティック変数の上書き）は
+ * 死んだコードになる（v2.4.0 で実際に踏んだ回帰。詳細は generate-css.test.js の
+ * `integration: compiled Tailwind utility classes ...` テストと sparkle-variables
+ * リポジトリの該当コミットを参照）。
+ *
  * en: A `generate` variant for runtime theme switching within a single bundle
  * (issue #229). Never touches `@theme inline` (which Tailwind v4 requires to
  * stay top-level and un-nestable) — instead flattens only the semantic color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design-cli",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "Sparkle Design CLI — プロジェクトセットアップ、CSS・フォント生成、アンチパターン検査、AI エージェント（Claude Code / Cursor / Codex）向けのガードと hook 設定まで一括で行う sparkle-design 公式 CLI。",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -45,9 +45,11 @@
   "license": "MIT",
   "devDependencies": {
     "@eslint/js": "^8.57.0",
+    "@tailwindcss/cli": "^4.3.2",
     "eslint": "^8.57.0",
     "power-assert": "^1.6.1",
-    "prettier": "^3.2.5"
+    "prettier": "^3.2.5",
+    "tailwindcss": "^4.3.2"
   },
   "files": [
     "bin/",

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

@@ -210,125 +210,131 @@
 }
 
 /* セマンティクスのトークン定義（Tailwind ユーティリティ生成用） */
+/* NOTE: 各宣言は上の「セマンティックトークン」:root ブロックにある同名変数を
+   自己参照している（例: --color-primary-500: var(--color-primary-500)）。
+   プリミティブへの直接参照にしない意図的な設計。Tailwind v4 は @theme inline
+   の宣言右辺を compiled utility class にそのまま埋め込むため、直接参照だと
+   セマンティック変数が一切参照されなくなり、別セレクタでのランタイム上書きが
+   compiled utility に効かなくなる。 */
 @theme inline {
   /* セマンティクスカラー定義 */
-  --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-neutral-50: var(--color-neutral-50);
+  --color-neutral-100: var(--color-neutral-100);
+  --color-neutral-200: var(--color-neutral-200);
+  --color-neutral-300: var(--color-neutral-300);
+  --color-neutral-400: var(--color-neutral-400);
+  --color-neutral-500: var(--color-neutral-500);
+  --color-neutral-600: var(--color-neutral-600);
+  --color-neutral-700: var(--color-neutral-700);
+  --color-neutral-800: var(--color-neutral-800);
+  --color-neutral-900: var(--color-neutral-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-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-secondary-50);
+  --color-secondary-100: var(--color-secondary-100);
+  --color-secondary-200: var(--color-secondary-200);
+  --color-secondary-300: var(--color-secondary-300);
+  --color-secondary-400: var(--color-secondary-400);
+  --color-secondary-500: var(--color-secondary-500);
+  --color-secondary-600: var(--color-secondary-600);
+  --color-secondary-700: var(--color-secondary-700);
+  --color-secondary-800: var(--color-secondary-800);
+  --color-secondary-900: var(--color-secondary-900);
+
+  --color-info-50: var(--color-info-50);
+  --color-info-100: var(--color-info-100);
+  --color-info-200: var(--color-info-200);
+  --color-info-300: var(--color-info-300);
+  --color-info-400: var(--color-info-400);
+  --color-info-500: var(--color-info-500);
+  --color-info-600: var(--color-info-600);
+  --color-info-700: var(--color-info-700);
+  --color-info-800: var(--color-info-800);
+  --color-info-900: var(--color-info-900);
+
+  --color-success-50: var(--color-success-50);
+  --color-success-100: var(--color-success-100);
+  --color-success-200: var(--color-success-200);
+  --color-success-300: var(--color-success-300);
+  --color-success-400: var(--color-success-400);
+  --color-success-500: var(--color-success-500);
+  --color-success-600: var(--color-success-600);
+  --color-success-700: var(--color-success-700);
+  --color-success-800: var(--color-success-800);
+  --color-success-900: var(--color-success-900);
+
+  --color-warning-50: var(--color-warning-50);
+  --color-warning-100: var(--color-warning-100);
+  --color-warning-200: var(--color-warning-200);
+  --color-warning-300: var(--color-warning-300);
+  --color-warning-400: var(--color-warning-400);
+  --color-warning-500: var(--color-warning-500);
+  --color-warning-600: var(--color-warning-600);
+  --color-warning-700: var(--color-warning-700);
+  --color-warning-800: var(--color-warning-800);
+  --color-warning-900: var(--color-warning-900);
+
+  --color-negative-50: var(--color-negative-50);
+  --color-negative-100: var(--color-negative-100);
+  --color-negative-200: var(--color-negative-200);
+  --color-negative-300: var(--color-negative-300);
+  --color-negative-400: var(--color-negative-400);
+  --color-negative-500: var(--color-negative-500);
+  --color-negative-600: var(--color-negative-600);
+  --color-negative-700: var(--color-negative-700);
+  --color-negative-800: var(--color-negative-800);
+  --color-negative-900: var(--color-negative-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);
+  --color-divider-low: var(--color-divider-low);
+  --color-divider-middle: var(--color-divider-middle);
+  --color-divider-high: var(--color-divider-high);
+  --color-text-disabled: var(--color-text-disabled);
+  --color-text-placeholder: var(--color-text-placeholder);
+  --color-text-low: var(--color-text-low);
+  --color-text-middle: var(--color-text-middle);
+  --color-text-high: var(--color-text-high);
+  --color-skeleton-fill: var(--color-skeleton-fill);
 
   /* ベースカラー（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);
+  --color-base-50: var(--color-base-50);
+  --color-base-100: var(--color-base-100);
+  --color-base-200: var(--color-base-200);
+  --color-base-300: var(--color-base-300);
+  --color-base-400: var(--color-base-400);
+  --color-base-500: var(--color-base-500);
+  --color-base-600: var(--color-base-600);
+  --color-base-700: var(--color-base-700);
+  --color-base-800: var(--color-base-800);
+  --color-base-900: var(--color-base-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);
+  --radius-divide: var(--radius-divide);
+  --radius-minimum: var(--radius-minimum);
+  --radius-notice: var(--radius-notice);
+  --radius-action: var(--radius-action);
+  --radius-halfModal: var(--radius-halfModal);
+  --radius-modal: var(--radius-modal);
+  --radius-round: var(--radius-round);
 
   /* シャドウ */
-  --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);
+  --shadow-base: var(--shadow-base);
+  --shadow-flat: var(--shadow-flat);
+  --shadow-raise: var(--shadow-raise);
+  --shadow-stick: var(--shadow-stick);
+  --shadow-float: var(--shadow-float);
+  --shadow-popout: var(--shadow-popout);
 }
 
 /* フォントレンダリング */