@qilitt-mickey/vue3-temp-skill 1.2.2 → 1.2.4

package/scripts/generate-css.mjs

@@ -0,0 +1,405 @@
+#!/usr/bin/env node
+
+/**
+ * generate-css.mjs —— 契约 → 三份 CSS 的确定性生成器
+ *
+ * 用法:
+ *   node generate-css.mjs --project <项目根> [--adapter vue-element-plus] [--out src/styles]
+ *
+ * 职责（design-apply 第 3/4/5 步的机器执行版，消灭手抄）:
+ *   1. ui-tokens.css  : tokens 族.名 → --族-名 实值 + adapter.roleSupplementVars + adapter.variableBridges
+ *   2. ui-roles.css   : roles 逐条翻译 host/inner/states/variants + adapter.extraRules 原样追加
+ *   3. ui-layout.css  : layout.regions 按 adapter.layoutBridge 的挂载类与 skipGeometry 翻译
+ *
+ * 原则: 契约是唯一事实源；本脚本不做任何视觉判断；同一输入必得同一输出（可复现）。
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const SKILL_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+
+// ────────────────────────────── 参数
+
+function parseArgs(argv) {
+  const out = { project: process.cwd(), adapter: null, out: null };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--project" || a === "-p") out.project = path.resolve(argv[++i]);
+    else if (a === "--adapter") out.adapter = argv[++i];
+    else if (a === "--out") out.out = argv[++i];
+  }
+  return out;
+}
+
+// ────────────────────────────── 名称转换（与 check-landing.mjs 的 expectedClassName 完全一致）
+
+function expectedClassName(roleName) {
+  return (
+    "role-" +
+    roleName
+      .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+      .replace(/\./g, "-")
+      .replace(/_/g, "-")
+      .toLowerCase()
+  );
+}
+
+function variantClassName(variantName) {
+  return variantName
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/_/g, "-")
+    .toLowerCase();
+}
+
+function tokenVar(tokenRef) {
+  // "color.brand" → "--color-brand"；"space.6" → "--space-6"
+  return "--" + tokenRef.replace(/\./g, "-").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+/** 展开值中的 {族.名} 令牌引用 → var(--族-名)；字面量原样（色值统一小写，过 prettier 且保证确定性输出） */
+function expandValue(value, tokenIndex) {
+  return String(value)
+    .replace(/\{([a-zA-Z0-9.]+)\}/g, (m, ref) => {
+      const v = tokenVar(ref);
+      if (!tokenIndex.has(ref)) {
+        // 引用未定义令牌：仍生成 var() 引用（浏览器解析为空时可见），但记入警告
+        warnings.push(`令牌引用未在 tokens 定义: {${ref}} → ${v}（请检查契约或补 roleSupplementVars）`);
+      }
+      return `var(${v})`;
+    })
+    .replace(/#[0-9a-fA-F]{3,8}\b/g, (c) => c.toLowerCase());
+}
+
+/** camelCase 键 → kebab CSS 属性 */
+function cssProp(key) {
+  if (key.includes("-")) return key;
+  return key.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+const warnings = [];
+
+// ────────────────────────────── 读取
+
+function loadInputs(args) {
+  const designDir = path.join(args.project, ".design");
+  const names = fs.readdirSync(designDir).filter((n) => /^visual-contract.*\.json$/.test(n));
+  if (!names.length) throw new Error(".design/ 下没有 visual-contract-*.json");
+  const contractPath = path.join(designDir, names[0]);
+  const contract = JSON.parse(fs.readFileSync(contractPath, "utf-8"));
+
+  let adapterName = args.adapter;
+  if (!adapterName) {
+    // 从 mapping/<scene>.json 读取
+    const mapPath = path.join(SKILL_DIR, "mapping", `${contract.meta.scene}.json`);
+    if (fs.existsSync(mapPath)) {
+      adapterName = JSON.parse(fs.readFileSync(mapPath, "utf-8")).adapter;
+    }
+  }
+  if (!adapterName) throw new Error("无法确定 adapter（契约场景无 mapping 且未传 --adapter）");
+
+  const adapterPath = path.join(SKILL_DIR, "adapters", `${adapterName}.json`);
+  if (!fs.existsSync(adapterPath)) throw new Error(`adapter JSON 不存在: ${adapterPath}`);
+  const adapter = JSON.parse(fs.readFileSync(adapterPath, "utf-8"));
+
+  return { contract, adapter, contractPath, adapterName };
+}
+
+// ────────────────────────────── ui-tokens.css
+
+function genTokens(contract, adapter) {
+  const L = [];
+  L.push("/**");
+  L.push(" * ui-tokens.css —— 视觉契约令牌层（由 generate-css.mjs 生成，禁止手改）");
+  L.push(` * 事实源: .design/visual-contract 令牌 + adapter(${adapter.adapter}) 桥接段`);
+  L.push(" */");
+  L.push("");
+  L.push(":root {");
+
+  const tokenIndex = new Set();
+  for (const [family, names] of Object.entries(contract.tokens || {})) {
+    L.push(`  /* ===== ${family} 族 ===== */`);
+    for (const [name, def] of Object.entries(names)) {
+      const v = tokenVar(`${family}.${name}`);
+      tokenIndex.add(`${family}.${name}`);
+      L.push(`  ${v}: ${String(def.value).replace(/#[0-9a-fA-F]{3,8}\b/g, (c) => c.toLowerCase())};`);
+    }
+    L.push("");
+  }
+
+  // 辅助变量（契约 role 声明用到但 tokens 未定义的）
+  if (adapter.roleSupplementVars) {
+    L.push("  /* ===== 辅助变量（adapter.roleSupplementVars） ===== */");
+    for (const [k, v] of Object.entries(adapter.roleSupplementVars)) {
+      if (k.startsWith("$")) continue;
+      tokenIndex.add(k.replace(/^--/, "").replace(/-/g, ".")); // 宽松
+      L.push(`  ${k}: ${String(v).replace(/#[0-9a-fA-F]{3,8}\b/g, (c) => c.toLowerCase())};`);
+    }
+    L.push("");
+  }
+
+  // 桥接段
+  L.push("  /* ==========================================================");
+  L.push("   * 桥接段（adapter.variableBridges）：契约值 → 项目既有变量消费链");
+  L.push("   * ========================================================== */");
+  const regions = (contract.layout && contract.layout.regions) || {};
+  const bridge = adapter.variableBridges || {};
+  for (const group of Object.keys(bridge)) {
+    if (group.startsWith("$")) continue;
+    L.push("");
+    L.push(`  /* -- ${group} -- */`);
+    for (const b of bridge[group]) {
+      let value;
+      if (b.from && b.from.startsWith("layout:")) {
+        // "layout:header.height" → regions.header.height（展开令牌引用）
+        const [region, key] = b.from.slice(7).split(".");
+        const raw = regions[region] && regions[region][key];
+        if (raw == null) {
+          warnings.push(`桥接 layout:${region}.${key} 在契约 layout.regions 中不存在，跳过`);
+          continue;
+        }
+        value = expandValue(raw, tokenIndex);
+      } else if (b.from && b.from.startsWith("--")) {
+        value = `var(${b.from})`;
+      } else {
+        value = expandValue(b.value, tokenIndex);
+      }
+      L.push(`  ${b.var}: ${value}${b.important ? " !important" : ""};`);
+    }
+  }
+
+  L.push("}");
+  L.push("");
+  return { css: L.join("\n"), tokenIndex };
+}
+
+// ────────────────────────────── ui-roles.css
+
+function declBlock(decls, indent, tokenIndex) {
+  const out = [];
+  for (const d of decls) {
+    out.push(`${indent}${cssProp(d.prop)}: ${expandValue(d.value, tokenIndex)};`);
+  }
+  return out;
+}
+
+function genRoles(contract, adapter, tokenIndex) {
+  const L = [];
+  L.push("/**");
+  L.push(" * ui-roles.css —— 视觉契约角色层（由 generate-css.mjs 生成，禁止手改）");
+  L.push(` * 事实源: .design/visual-contract roles + adapter(${adapter.adapter}) 结构等价转换`);
+  L.push(" * 全局文件：禁止 :deep()；inner 穿透用普通后代选择器（adapter.innerTargets）");
+  L.push(" */");
+  L.push("");
+
+  const roles = contract.roles || {};
+  const innerTargets = adapter.innerTargets || {};
+  const stateChannels = adapter.stateChannels || {};
+  const extraRules = adapter.extraRules || {};
+
+  // adapter 映射表的键 = 类名去掉 role- 前缀
+  const bare = (roleName) => expectedClassName(roleName).replace(/^role-/, "");
+  const innerTargetOf = (roleName) => innerTargets[bare(roleName)] || "default";
+
+  for (const [roleName, role] of Object.entries(roles)) {
+    if (roleName.startsWith("$")) continue;
+    const cls = "." + expectedClassName(roleName);
+    L.push(`/* ===== 角色 ${roleName}${role.label ? " · " + role.label : ""} ===== */`);
+
+    // host
+    if (Array.isArray(role.host) && role.host.length) {
+      L.push(`${cls} {`);
+      L.push(...declBlock(role.host, "  ", tokenIndex));
+      L.push("}");
+    }
+
+    // inner
+    if (Array.isArray(role.inner) && role.inner.length) {
+      const target = innerTargetOf(roleName);
+      const sel = target === "default" ? cls : `${cls} ${target}`;
+      L.push(`${sel} {`);
+      L.push(...declBlock(role.inner, "  ", tokenIndex));
+      L.push("}");
+    }
+
+    // 结构键 box/flow/align/span/sticky
+    const structDecls = [];
+    if (role.box) for (const [k, v] of Object.entries(role.box)) structDecls.push({ prop: k, value: v });
+    if (role.flow) for (const [k, v] of Object.entries(role.flow)) structDecls.push({ prop: k, value: v });
+    if (role.align) for (const [k, v] of Object.entries(role.align)) structDecls.push({ prop: k, value: v });
+    if (role.span) for (const [k, v] of Object.entries(role.span)) structDecls.push({ prop: k, value: v });
+    if (role.sticky && role.sticky.position) {
+      structDecls.push({ prop: "position", value: role.sticky.position });
+      if (role.sticky.side) structDecls.push({ prop: role.sticky.side, value: "0" });
+    }
+    if (structDecls.length) {
+      L.push(`${cls} {`);
+      L.push(...declBlock(structDecls, "  ", tokenIndex));
+      L.push("}");
+    }
+
+    // states
+    if (role.states) {
+      for (const [state, decl] of Object.entries(role.states)) {
+        const channel = stateChannels[state] || `:${state}`;
+        // 多通道（逗号分隔）：作为选择器附加段整体展开（如 ".is-disabled, :disabled"）
+        for (const ch of channel.split(",").map((c) => c.trim())) {
+          const hostSel = ch.startsWith(":") ? `${cls}${ch}` : `${cls}${ch}`;
+          if (Array.isArray(decl.host) && decl.host.length) {
+            L.push(`${hostSel} {`);
+            L.push(...declBlock(decl.host, "  ", tokenIndex));
+            L.push("}");
+          }
+          if (Array.isArray(decl.inner) && decl.inner.length) {
+            const target = innerTargetOf(roleName);
+            const innerSel = target === "default" ? hostSel : `${hostSel} ${target}`;
+            L.push(`${innerSel} {`);
+            L.push(...declBlock(decl.inner, "  ", tokenIndex));
+            L.push("}");
+          }
+        }
+      }
+    }
+
+    // variants（整份替换：variant host 覆盖基础 host，inner 同理）
+    if (Array.isArray(role.variants)) {
+      for (const v of role.variants) {
+        const vcls = `${cls}--${variantClassName(v.name)}`;
+        const vhost = [];
+        if (Array.isArray(role.host)) for (const d of role.host) vhost.push(d);
+        if (Array.isArray(v.host)) {
+          for (const d of v.host) {
+            const i = vhost.findIndex((x) => cssProp(x.prop) === cssProp(d.prop));
+            if (i >= 0) vhost[i] = d;
+            else vhost.push(d);
+          }
+        }
+        if (vhost.length) {
+          L.push(`${vcls} {`);
+          L.push(...declBlock(vhost, "  ", tokenIndex));
+          L.push("}");
+        }
+        if (Array.isArray(v.inner) && v.inner.length) {
+          const target = innerTargetOf(roleName);
+          const sel = target === "default" ? vcls : `${vcls} ${target}`;
+          L.push(`${sel} {`);
+          L.push(...declBlock(v.inner, "  ", tokenIndex));
+          L.push("}");
+        }
+      }
+    }
+
+    // extraRules（adapter 的结构等价转换 / 提权段，原样追加——后置覆盖基础翻译）
+    const extras = extraRules[bare(roleName)] || extraRules[expectedClassName(roleName)];
+    if (extras) {
+      L.push(`/* -- adapter 结构等价转换（${adapter.adapter}） -- */`);
+      for (const r of extras) {
+        const emits = Array.isArray(r.emit) ? r.emit : [r.emit];
+        for (const e of emits) L.push(e.trim());
+      }
+    }
+    L.push("");
+  }
+
+  return L.join("\n");
+}
+
+// ────────────────────────────── ui-layout.css
+
+function genLayout(contract, adapter, tokenIndex) {
+  const L = [];
+  L.push("/**");
+  L.push(" * ui-layout.css —— 视觉契约布局层（由 generate-css.mjs 生成，禁止手改）");
+  L.push(` * 事实源: .design/visual-contract layout.regions + adapter(${adapter.adapter}) layoutBridge`);
+  L.push(" */");
+  L.push("");
+
+  const bridge = adapter.layoutBridge || {};
+  const regions = (contract.layout && contract.layout.regions) || {};
+  const areas = new Set((contract.layout?.areas || []).map((a) => a.name));
+  const skipGeometry = bridge.skipGeometry || {};
+  const regionClasses = bridge.regionClasses || {};
+
+  // 壳层
+  const shell = contract.roles?.["shell.shell"];
+  if (shell && bridge.shellClass) {
+    L.push(`/* ===== 内容壳（shell.shell） ===== */`);
+    L.push(`${bridge.shellClass.join(",\n")} {`);
+    L.push(...declBlock(shell.host || [], "  ", tokenIndex));
+    L.push("}");
+    L.push("");
+  }
+
+  for (const [regionName, def] of Object.entries(regions)) {
+    if (!areas.has(regionName)) continue; // 未写入 areas 的区域不生成
+    const sels = regionClasses[regionName] || [`ui-region-${regionName}`].map((c) => `.${c}`);
+    // skipGeometry 用 CSS 属性名；契约键是 camelCase（collapsedWidth）——统一按 cssProp 归一后匹配
+    const skip = new Set((skipGeometry[regionName] || []).map((k) => cssProp(k)));
+    L.push(`/* ===== 区域 ${regionName}（skip: ${[...skip].join(", ") || "无"}） ===== */`);
+    const decls = [];
+    const push = (prop, value) => {
+      if (skip.has(cssProp(prop))) return;
+      decls.push({ prop: cssProp(prop), value: expandValue(value, tokenIndex) });
+    };
+    if (def.width) push("width", def.width);
+    if (def.height) push("height", def.height);
+    if (def.minHeight) push("min-height", def.minHeight);
+    if (def.padding) push("padding", def.padding);
+    if (def.gap) push("gap", def.gap);
+    if (def.bg) push("background-color", def.bg);
+    if (def.display) push("display", def.display);
+    if (def.direction) push("flex-direction", def.direction);
+    if (def.alignItems) push("align-items", def.alignItems);
+    if (def.justifyContent) push("justify-content", def.justifyContent);
+    if (def.position) push("position", def.position);
+    if (def.zIndex) push("z-index", def.zIndex);
+    // 区域角色同名视觉（如 shell.header 的 border-bottom）从契约 roles 合并（同受 skip 过滤）
+    const roleForRegion = contract.roles?.[`shell.${regionName}`];
+    if (roleForRegion && Array.isArray(roleForRegion.host)) {
+      for (const d of roleForRegion.host) {
+        if (skip.has(cssProp(d.prop))) continue;
+        if (!decls.some((x) => x.prop === cssProp(d.prop))) {
+          decls.push({ prop: cssProp(d.prop), value: expandValue(d.value, tokenIndex) });
+        }
+      }
+    }
+    L.push(`${sels.join(",\n")} {`);
+    for (const d of decls) L.push(`  ${d.prop}: ${d.value};`);
+    L.push("}");
+    L.push("");
+  }
+
+  return L.join("\n");
+}
+
+// ────────────────────────────── 主流程
+
+function main() {
+  const args = parseArgs(process.argv.slice(2));
+  const { contract, adapter, contractPath } = loadInputs(args);
+
+  const outDir = path.join(args.project, args.out || adapter.output?.dir || "src/styles");
+  fs.mkdirSync(outDir, { recursive: true });
+
+  const { css: tokensCss, tokenIndex } = genTokens(contract, adapter);
+  const rolesCss = genRoles(contract, adapter, tokenIndex);
+  const layoutCss = genLayout(contract, adapter, tokenIndex);
+
+  fs.writeFileSync(path.join(outDir, "ui-tokens.css"), tokensCss);
+  fs.writeFileSync(path.join(outDir, "ui-roles.css"), rolesCss);
+  fs.writeFileSync(path.join(outDir, "ui-layout.css"), layoutCss);
+
+  console.log(`契约: ${path.relative(args.project, contractPath)}`);
+  console.log(`adapter: ${adapter.adapter}`);
+  console.log(`生成: ${path.relative(args.project, outDir)}/ui-tokens.css  ui-roles.css  ui-layout.css`);
+  const roleCount = Object.keys(contract.roles || {}).filter((k) => !k.startsWith("$")).length;
+  console.log(`角色 ${roleCount} 个全部翻译；令牌族 ${Object.keys(contract.tokens || {}).join("/")}`);
+  if (warnings.length) {
+    console.log("");
+    console.log("警告（不阻塞，但需回查）:");
+    for (const w of [...new Set(warnings)]) console.log(`  - ${w}`);
+  }
+}
+
+main();