ksk-design-system 1.66.0 → 1.66.2

package/README.md

@@ -229,6 +229,22 @@ consumer が shadcn 既定の `src/components/ui/` に部品を置いても中
 （v1.63.x までは単一の `excludes` をパスと行内容の両方に OR で当てていたため、
 このディレクトリ名だけで 13 ルールが同時に黙っていました）。
 
+`excludeLines` の各値は **literal 文字列**として `line.includes(value)` で判定されます
+（正規表現ではありません）。`shadow-\[` のように正規表現エスケープした値を書くと、実ソースの
+`shadow-[var(--shadow-md)]` と一致せず除外が一度も効きません（issue #463）。
+`scripts/check-rules-contract.mjs`（`npm run check` に組み込み済み）が `excludeLines` /
+`excludePaths` / `excludeDsPaths` 内のバックスラッシュ混入を検出します。
+
+#### P029: テンプレートリテラル className の許容範囲（issue #464）
+
+`className={\`...\${...}...\`}` の補間部（`${...}`）が**文字列リテラルのみで構成される式**
+（単純三項 `cond ? "a" : "b"` / `&&` / ネスト三項）なら、Tailwind の静的クラス抽出を壊さないため
+P029 の対象外です。CLAUDE.md の実装前セルフチェックにある「クラス名は完全な文字列で書く。分岐は
+三項演算子か cva variant で」という方針と一致させています。
+
+識別子・関数呼び出し・メンバーアクセスの補間（`` `bg-${color}` `` 等）や、テンプレートリテラルの
+入れ子は静的抽出できないため引き続き検出します。`cn()` / `clsx()` / CVA を使ってください。
+
 ### Jest（CommonJS）でコンポーネントをテストする
 
 このパッケージは **ESM-only** です。CJS との dual build は配布せず、Jest

package/bin/lint.js

@@ -789,6 +789,7 @@ function lintFile(file, cwd, rules, options = {}) {
       if (matchesRuleExclude(rule, { file: rel, line: rawLine, isDsFile })) continue
       const maskedLine = maskedLines[index] ?? ""
       if (!regex.test(maskedLine)) continue
+      if (rule.id === "P029" && isP029TemplateLiteralExempt(rawLine)) continue
       if (ignores.suppresses(rule.id ?? "UNKNOWN", index + 1)) continue
       findings.push(toFinding(rule, rel, index + 1, platform))
     }
@@ -1119,6 +1120,188 @@ function maskTemplateLiterals(source) {
   return maskStrings(source, TEMPLATE_DELIMITER_ONLY)
 }
 
+/**
+ * P029（テンプレートリテラル className 禁止）の例外判定（issue #464）。
+ *
+ * `className={\`base ${cond ? "a" : "b"}\`}` のように、補間部（`${...}`）が
+ * 「文字列リテラルのみで構成される式」（三項・&&・ネスト三項を含む）なら
+ * Tailwind の静的クラス抽出を壊さないため対象外にする。`${color}` のような
+ * 識別子・関数呼び出し・メンバーアクセスの補間は従来どおり検出する。
+ *
+ * 文字列一致ベースの簡易パーサーであり、TypeScript の完全な式パーサーではない。
+ * 判定に迷うケース（バッククォートのネスト等）は安全側＝「例外にしない」を返す。
+ */
+
+/** 文字列/括弧の深さを見ながら、depth 0 の `?` `:` `&&` `||` の位置を集める */
+function scanTopLevelOperatorTokens(expr) {
+  const tokens = []
+  let depth = 0
+  let quote = null
+  for (let i = 0; i < expr.length; i++) {
+    const ch = expr[i]
+    if (quote) {
+      if (ch === "\\") {
+        i += 1
+        continue
+      }
+      if (ch === quote) quote = null
+      continue
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch
+      continue
+    }
+    if (ch === "(" || ch === "[" || ch === "{") {
+      depth += 1
+      continue
+    }
+    if (ch === ")" || ch === "]" || ch === "}") {
+      depth -= 1
+      continue
+    }
+    if (depth !== 0) continue
+    if (ch === "?") tokens.push({ index: i, type: "?" })
+    else if (ch === ":") tokens.push({ index: i, type: ":" })
+    else if (ch === "&" && expr[i + 1] === "&") {
+      tokens.push({ index: i, type: "&&" })
+      i += 1
+    } else if (ch === "|" && expr[i + 1] === "|") {
+      tokens.push({ index: i, type: "||" })
+      i += 1
+    }
+  }
+  return tokens
+}
+
+/** `cond ? a : b` を depth 0 の `?`/`:` のバランスで分割する（ネスト三項対応） */
+function splitTopLevelTernary(expr) {
+  const tokens = scanTopLevelOperatorTokens(expr)
+  const questionIndex = tokens.findIndex((token) => token.type === "?")
+  if (questionIndex === -1) return null
+  let balance = 1
+  for (let i = questionIndex + 1; i < tokens.length; i++) {
+    if (tokens[i].type === "?") balance += 1
+    else if (tokens[i].type === ":") {
+      balance -= 1
+      if (balance === 0) {
+        const questionPos = tokens[questionIndex].index
+        const colonPos = tokens[i].index
+        return {
+          whenTrue: expr.slice(questionPos + 1, colonPos),
+          whenFalse: expr.slice(colonPos + 1),
+        }
+      }
+    }
+  }
+  return null
+}
+
+/** `lhs && rhs` / `lhs || rhs` を最初の depth 0 演算子で分割する */
+function splitTopLevelLogical(expr) {
+  const token = scanTopLevelOperatorTokens(expr).find(
+    (candidate) => candidate.type === "&&" || candidate.type === "||",
+  )
+  if (!token) return null
+  return { rhs: expr.slice(token.index + token.type.length) }
+}
+
+function isStringLiteralExpr(expr) {
+  const trimmed = expr.trim()
+  return /^"(?:[^"\\]|\\.)*"$/.test(trimmed) || /^'(?:[^'\\]|\\.)*'$/.test(trimmed)
+}
+
+/** `(expr)` のように括弧が式全体をちょうど一度だけ包んでいるか */
+function isFullyParenWrapped(expr) {
+  if (expr[0] !== "(" || expr[expr.length - 1] !== ")") return false
+  let depth = 0
+  for (let i = 0; i < expr.length; i++) {
+    if (expr[i] === "(") depth += 1
+    else if (expr[i] === ")") {
+      depth -= 1
+      if (depth === 0) return i === expr.length - 1
+    }
+  }
+  return false
+}
+
+/** 補間式が「文字列リテラルのみで構成される式」か（issue #464） */
+export function isLiteralOnlyInterpolation(expr) {
+  const trimmed = (expr ?? "").trim()
+  if (trimmed === "") return false
+  // ネストしたテンプレートリテラルは判定を諦めて安全側（=対象外にしない）に倒す
+  if (trimmed.includes("`")) return false
+  if (isStringLiteralExpr(trimmed)) return true
+  if (isFullyParenWrapped(trimmed)) return isLiteralOnlyInterpolation(trimmed.slice(1, -1))
+  const ternary = splitTopLevelTernary(trimmed)
+  if (ternary) {
+    return isLiteralOnlyInterpolation(ternary.whenTrue) && isLiteralOnlyInterpolation(ternary.whenFalse)
+  }
+  const logical = splitTopLevelLogical(trimmed)
+  if (logical) return isLiteralOnlyInterpolation(logical.rhs)
+  return false
+}
+
+/** テンプレートリテラル（バッククォート開始位置つき）の中身を取り出す。同一行内で閉じない場合は null */
+function extractTemplateLiteralBody(line, backtickIndex) {
+  let i = backtickIndex + 1
+  let braceDepth = 0
+  let content = ""
+  while (i < line.length) {
+    const ch = line[i]
+    if (ch === "\\") {
+      content += ch + (line[i + 1] ?? "")
+      i += 2
+      continue
+    }
+    if (braceDepth === 0 && ch === "`") return content
+    if (ch === "{") braceDepth += 1
+    else if (ch === "}" && braceDepth > 0) braceDepth -= 1
+    content += ch
+    i += 1
+  }
+  return null
+}
+
+/** テンプレートリテラルの中身から `${...}` の中身だけを depth バランスで取り出す */
+function extractInterpolationExprs(content) {
+  const exprs = []
+  let i = content.indexOf("${")
+  while (i !== -1) {
+    const start = i + 2
+    let depth = 1
+    let j = start
+    while (j < content.length && depth > 0) {
+      if (content[j] === "{") depth += 1
+      else if (content[j] === "}") depth -= 1
+      j += 1
+    }
+    if (depth === 0) {
+      exprs.push(content.slice(start, j - 1))
+      i = content.indexOf("${", j)
+    } else {
+      exprs.push(content.slice(start))
+      break
+    }
+  }
+  return exprs
+}
+
+/**
+ * P029 が fire した行が「className の template literal で、補間部が全て
+ * 文字列リテラルのみで構成される式」なら true（＝対象外にしてよい）を返す。
+ */
+export function isP029TemplateLiteralExempt(line) {
+  const classNameIndex = line.indexOf("className=")
+  if (classNameIndex === -1) return false
+  const backtickIndex = line.indexOf("`", classNameIndex)
+  if (backtickIndex === -1) return false
+  const content = extractTemplateLiteralBody(line, backtickIndex)
+  if (content === null) return false
+  const interpolations = extractInterpolationExprs(content)
+  if (interpolations.length === 0) return false
+  return interpolations.every((expr) => isLiteralOnlyInterpolation(expr))
+}
+
 function excludeList(value) {
   return Array.isArray(value) ? value : []
 }

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "1.66.0",
+    "version": "1.66.2",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 68,

package/contracts/rules.json

@@ -228,7 +228,7 @@
       "pattern": "shadow-md\\b|shadow-lg\\b|shadow-xl\\b|shadow-2xl\\b",
       "excludePaths": [".stories."],
       "excludeDsPaths": ["components/ui/", "components/patterns/"],
-      "excludeLines": ["shadow-\\["],
+      "excludeLines": ["shadow-["],
       "message": "DS 定義外のシャドウ禁止",
       "fix": "shadow-[var(--shadow-sm/md/lg/dialog/tooltip)]"
     },

package/contracts/token-hex-cache.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Semantic Token Hex Cache",
-    "version": "1.66.0",
+    "version": "1.66.2",
     "description": "semantic / semanticDark トークン（var(--Primitive-*) 参照）を実 hex に解決したサイドカー生成物。hex はデフォルト（Blue）テーマでの解決値であり、Brand 系（meta.themeDependentKeys に列挙）はテーマ差し替え（orange/green/violet 等）で実色が変わる。テーマ別の完全解決値は `ksk-design-system/native` エクスポート（バンドル済み native トークンモジュール）の themes を参照。tokens.json 本体のスキーマは変更せず、AI がこのファイルだけで実色を把握できるようにし、primitive 値の変更による semantic 実色のドリフトを --check で機械検出する。",
     "generatedBy": "scripts/generate-token-hex-cache.mjs",
     "theme": "default",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksk-design-system",
-  "version": "1.66.0",
+  "version": "1.66.2",
   "type": "module",
   "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
   "license": "MIT",
@@ -92,6 +92,10 @@
       "import": "./src/styles/categorical.css",
       "default": "./src/styles/categorical.css"
     },
+    "./tokens/product-theme": {
+      "import": "./src/styles/product-theme.css",
+      "default": "./src/styles/product-theme.css"
+    },
     "./glass": {
       "import": "./src/styles/glass.css",
       "default": "./src/styles/glass.css"

package/src/styles/product-theme.css

@@ -13,6 +13,11 @@
      @import "./themes/my-client.css";   … Brand 10行（色）
      @import "./product-theme.css";      … ここの変数（寸法・面）
 
+   preset を使わずトークン CSS を個別 import する消費側は、このファイルを
+   subpath export で直接読める（コピー同期は不要）:
+
+     @import "ksk-design-system/tokens/product-theme";
+
    機械可読な許可リストは contracts/product-theme-overrides.json が正本。
    **ここに無い変数は公開契約ではない**（内部実装なので予告なく変わる）。
    許可リスト外の上書きは `npx ksk-ds lint` の P049 が検出する。