fix(core,cli,lint): close the figma brand-token loop — runtime CSS variables, --name, snippet lint

Brand-loop live test (SDS duplicate, plans/figma/brand-loop-test-plan.md) proved the recolor chain end-to-end and surfaced three gaps: - runtime now defines every declared composition variable as a CSS custom property (document root at init + scoped sub-comp hosts in the loader), so imported var(--slug, literal) fills resolve live — without this the frozen literal always won and variable-driven rebranding could not propagate. Slug kept byte-compatible with the figma importer (parity test). render --variables overrides win. - figma component --name: variant frames are often all named 'Platform=Desktop' and slug-collided across imports. - imported fragments carry data-hf-snippet and the project linter skips composition-root rules for them. - /figma skill documents the field-tested non-Enterprise tokens path (MCP get_variable_defs joined with REST boundVariables ids). Shared-helper extractions (injectScopedStyles, flattenedRoot module, parseHostVariableValues, rasterizeFallback, shapeCss) satisfy the dedup/complexity audit the runtime changes tripped. Validated live: brand-loop renders purple from the attribute alone (no manual :root); 118 figma + 662 runtime/compiler + 331 lint tests green. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-09-11 14:50:02 +00:00 · 2026-07-08 00:47:13 -07:00
parent 80271863d3
commit def276524b
14 changed files with 623 additions and 173 deletions
@@ -0,0 +1,47 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { mkdirSync, mkdtempSync, writeFileSync, rmSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { lintProject } from "./project.js";
+
+let dirs: string[] = [];
+afterEach(() => {
+  for (const d of dirs) rmSync(d, { recursive: true, force: true });
+  dirs = [];
+});
+
+const INDEX = `<html><body>
+<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="640" data-height="360"></div>
+<script>window.__timelines = { main: { paused: true } };</script>
+</body></html>`;
+
+async function lintWithFragment(name: string, html: string) {
+  const dir = mkdtempSync(join(tmpdir(), "hf-snippet-lint-"));
+  dirs.push(dir);
+  writeFileSync(join(dir, "index.html"), INDEX);
+  mkdirSync(join(dir, "compositions"), { recursive: true });
+  writeFileSync(join(dir, "compositions", name), html);
+  const result = await lintProject(dir);
+  return result.results.filter((r) => r.file.includes(name.replace(".html", "")));
+}
+
+describe("snippet fragment exemption", () => {
+  it("skips composition-root rules for files whose ROOT carries data-hf-snippet", async () => {
+    const findings = await lintWithFragment(
+      "frag.html",
+      '<div id="frag" data-hf-snippet="" data-figma-id="1:1" style="width: 10px"></div>\n',
+    );
+    expect(findings).toHaveLength(0);
+  });
+
+  it("still lints a composition that merely CONTAINS snippet markup", async () => {
+    const results = await lintWithFragment(
+      "scene.html",
+      '<div id="scene"><div data-hf-snippet="" data-figma-id="1:1"></div></div>\n',
+    );
+    expect(results).toHaveLength(1);
+    expect(results[0]?.result.findings.some((f) => f.code === "root_missing_composition_id")).toBe(
+      true,
+    );
+  });
+});