@motion-proto/live-tokens 0.96.0 → 0.98.2

package/dist-plugin/index.cjs

@@ -123,7 +123,7 @@ var STOP_RE = new RegExp(String.raw`^(.*?)\s+(${NUM})%$`);
 var CIRCLE_RADIUS_RE = new RegExp(String.raw`^circle\s+(${NUM})px$`, "i");
 var ELLIPSE_RE = new RegExp(String.raw`^ellipse\s+(${NUM})px\s+(${NUM})px$`, "i");
 var VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
-function splitTopLevel(s) {
+function splitTopLevel(s, isSeparator = (c) => c === ",") {
   const parts = [];
   let depth = 0;
   let start = 0;
@@ -131,7 +131,7 @@ function splitTopLevel(s) {
     const c = s[i];
     if (c === "(") depth++;
     else if (c === ")") depth--;
-    else if (c === "," && depth === 0) {
+    else if (depth === 0 && isSeparator(c)) {
       parts.push(s.slice(start, i));
       start = i + 1;
     }
@@ -5619,6 +5619,107 @@ function formatReport({ propertiesBefore, propertiesAfter, bytesSaved }) {
   return `live-tokens: the production CSS declares ${propertiesAfter.toLocaleString("en-US")} of ${propertiesBefore.toLocaleString("en-US")} custom properties and is ${kB} kB ${bytesSaved >= 0 ? "smaller" : "larger"}.`;
 }
 
+// vite-plugin/a11y/a11yRunServer.ts
+var import_node_child_process = require("child_process");
+var import_node_fs = __toESM(require("fs"), 1);
+var import_node_path2 = __toESM(require("path"), 1);
+var A11Y_RUN_ARGS = ["check-component", "--tests", "--a11y", "--no-fix", "--json", "--open-theme"];
+var A11Y_REPORT_PATH = import_node_path2.default.join("test-results", "live-tokens", "a11y-report.json");
+var STDERR_TAIL = 2e3;
+var CONTRAST_ROLES = /* @__PURE__ */ new Set(["text", "non-text"]);
+function spawnCli(cliPath) {
+  return (args, cwd) => {
+    const child = (0, import_node_child_process.spawn)(process.execPath, [cliPath, ...args], { cwd, stdio: ["ignore", "pipe", "pipe"] });
+    const done = new Promise((resolve) => {
+      let stdout = "";
+      let stderr = "";
+      child.stdout.on("data", (chunk) => stdout += chunk);
+      child.stderr.on("data", (chunk) => stderr += chunk);
+      child.on("error", (error) => resolve({ code: null, stdout, stderr: `${stderr}${error.message}` }));
+      child.on("close", (code) => resolve({ code, stdout, stderr }));
+    });
+    return { done, stop: () => child.kill("SIGINT") };
+  };
+}
+function isContrastFailure(value) {
+  const v = value;
+  return !!v && typeof v === "object" && typeof v.component === "string" && typeof v.variable === "string" && v.variable.startsWith("--") && Array.isArray(v.backdrop) && v.backdrop.every((layer) => typeof layer === "string") && typeof v.role === "string" && CONTRAST_ROLES.has(v.role) && typeof v.ratio === "number" && typeof v.floor === "number" && (v.context === void 0 || typeof v.context === "string");
+}
+function readContrast(body) {
+  const contrast = body?.contrast;
+  return Array.isArray(contrast) && contrast.every(isContrastFailure) ? contrast : null;
+}
+function parseCliReport(stdout) {
+  try {
+    const parsed = JSON.parse(stdout);
+    return parsed && Array.isArray(parsed.findings) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function a11yRunServer({ root, reportFile, runCli, broadcast }) {
+  let running = null;
+  function current() {
+    if (running) return running.report;
+    if (!import_node_fs.default.existsSync(reportFile)) return null;
+    return JSON.parse(import_node_fs.default.readFileSync(reportFile, "utf-8"));
+  }
+  function settle(started, outcome) {
+    const finishedAt = (/* @__PURE__ */ new Date()).toISOString();
+    const cli = parseCliReport(outcome.stdout);
+    if (!cli) {
+      const stderr = outcome.stderr.trim().slice(-STDERR_TAIL);
+      return {
+        ...started,
+        state: "failed",
+        finishedAt,
+        error: `check-component exited with code ${outcome.code} and printed no report.${stderr ? `
+${stderr}` : ""}`
+      };
+    }
+    return {
+      ...started,
+      state: "finished",
+      finishedAt,
+      ...cli.theme ? { theme: cli.theme } : {},
+      findings: cli.findings.filter((f) => f.details?.engineRule !== "color-contrast")
+    };
+  }
+  function start(body) {
+    if (running) {
+      return { status: 409, body: { error: "An accessibility run is already going.", code: "A11Y_RUN_IN_PROGRESS" } };
+    }
+    const contrast = readContrast(body);
+    if (!contrast) {
+      return {
+        status: 400,
+        body: { error: "Body must be { contrast: [...] } with one entry per failing pair", code: "INVALID_BODY" }
+      };
+    }
+    const report = { state: "running", startedAt: (/* @__PURE__ */ new Date()).toISOString(), contrast };
+    const run = runCli(A11Y_RUN_ARGS, root);
+    running = { report, stop: run.stop };
+    broadcast(report);
+    void run.done.then((outcome) => {
+      const settled = settle(report, outcome);
+      import_node_fs.default.mkdirSync(import_node_path2.default.dirname(reportFile), { recursive: true });
+      import_node_fs.default.writeFileSync(reportFile, `${JSON.stringify(settled, null, 2)}
+`);
+      running = null;
+      broadcast(settled);
+    });
+    return { status: 202, body: report };
+  }
+  return {
+    start,
+    report: () => ({ status: 200, body: { report: current() } }),
+    stop: () => running?.stop()
+  };
+}
+
+// src/editor/core/a11y/a11yReportTypes.ts
+var A11Y_EVENT = "a11y";
+
 // vite-plugin/themeFileApi.ts
 var import_node_url2 = require("url");
 var import_meta2 = {};
@@ -5679,6 +5780,7 @@ function themeFileApi(opts) {
   const ISOLATED_DATA_DIR = testDataDir();
   const GENERATED_CSS_PATH = ISOLATED_DATA_DIR ? import_path5.default.join(ISOLATED_DATA_DIR, "tokens.generated.css") : opts.tokensGeneratedCssPath ? import_path5.default.resolve(opts.tokensGeneratedCssPath) : import_path5.default.join(dataDirs.dataDir, "tokens.generated.css");
   const FONTS_CSS_PATH = ISOLATED_DATA_DIR ? import_path5.default.join(ISOLATED_DATA_DIR, "fonts.css") : opts.fontsCssPath ? import_path5.default.resolve(opts.fontsCssPath) : import_path5.default.join(import_path5.default.dirname(CSS_PATH), "fonts.css");
+  const A11Y_REPORT_FILE = ISOLATED_DATA_DIR ? import_path5.default.join(ISOLATED_DATA_DIR, import_path5.default.basename(A11Y_REPORT_PATH)) : import_path5.default.join(process.cwd(), A11Y_REPORT_PATH);
   const API_BASE = opts.apiBase ?? "/api/live-tokens";
   const consumerComponentDirs = opts.componentsSrcDir ? [import_path5.default.resolve(opts.componentsSrcDir)] : [import_path5.default.resolve("src/components"), import_path5.default.resolve("src/system/components")];
   const packageComponentsDir = import_path5.default.resolve(
@@ -5688,6 +5790,7 @@ function themeFileApi(opts) {
     "system",
     "components"
   );
+  const PACKAGE_CLI_PATH = import_path5.default.resolve(import_path5.default.dirname((0, import_node_url2.fileURLToPath)(import_meta2.url)), "..", "bin", "cli.mjs");
   const packageDataDir = testPackageDataDir() ?? import_path5.default.resolve(
     import_path5.default.dirname((0, import_node_url2.fileURLToPath)(import_meta2.url)),
     "..",
@@ -6359,6 +6462,8 @@ ${lines.join("\n")}
   const SKETCH_STYLE_BY_NAME_REGEX = new RegExp(`^${escapedBase}/sketch-styles/([a-z0-9\\-_]+)$`);
   const PRODUCTION_ROUTE = `${API_BASE}/production`;
   const EVENTS_ROUTE = `${API_BASE}/events`;
+  const A11Y_RUN_ROUTE = `${API_BASE}/a11y/run`;
+  const A11Y_REPORT_ROUTE = `${API_BASE}/a11y/report`;
   async function handleListColorsAndType(_ctx) {
     const files = colorsAndTypeResource.listNames().map((fileName) => {
       const data = colorsAndTypeResource.readJson(fileName);
@@ -6785,7 +6890,38 @@ data: ${JSON.stringify(state)}
 
 `);
     });
-    req.on("close", unsubscribe);
+    eventClients.add(res);
+    req.on("close", () => {
+      unsubscribe();
+      eventClients.delete(res);
+    });
+  }
+  const eventClients = /* @__PURE__ */ new Set();
+  const a11yRuns = a11yRunServer({
+    root: process.cwd(),
+    reportFile: A11Y_REPORT_FILE,
+    runCli: spawnCli(PACKAGE_CLI_PATH),
+    broadcast: (report) => {
+      const frame = `event: ${A11Y_EVENT}
+data: ${JSON.stringify(report)}
+
+`;
+      for (const client of eventClients) client.write(frame);
+    }
+  });
+  async function handleStartA11yRun({ req, res }) {
+    let body;
+    try {
+      body = JSON.parse(await readBody(req));
+    } catch {
+      body = void 0;
+    }
+    const answer = a11yRuns.start(body);
+    jsonResponse(res, answer.status, answer.body);
+  }
+  async function handleGetA11yReport({ res }) {
+    const answer = a11yRuns.report();
+    jsonResponse(res, answer.status, answer.body);
   }
   async function handleExportTheme({ params, res }) {
     const [fileName] = params;
@@ -7058,6 +7194,14 @@ data: ${JSON.stringify(state)}
     { method: "DELETE", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: handleSketchStyleByName },
     { method: "POST", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: methodNotAllowed },
     { method: "GET", pattern: EVENTS_ROUTE, handler: handleEvents },
+    { method: "POST", pattern: A11Y_RUN_ROUTE, handler: handleStartA11yRun },
+    { method: "GET", pattern: A11Y_RUN_ROUTE, handler: methodNotAllowed },
+    { method: "PUT", pattern: A11Y_RUN_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: A11Y_RUN_ROUTE, handler: methodNotAllowed },
+    { method: "GET", pattern: A11Y_REPORT_ROUTE, handler: handleGetA11yReport },
+    { method: "PUT", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
+    { method: "POST", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: A11Y_REPORT_ROUTE, handler: methodNotAllowed },
     { method: "PUT", pattern: PRODUCTION_ROUTE, handler: handleAdoptTheme },
     { method: "GET", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
     { method: "POST", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
@@ -7136,6 +7280,7 @@ data: ${JSON.stringify(state)}
         const handled = await dispatch(req, res, routes);
         if (!handled) next();
       });
+      server.httpServer?.once("close", () => a11yRuns.stop());
     },
     handleHotUpdate(ctx) {
       if (legacyLayout) return;