@motion-proto/live-tokens 0.96.0 → 0.98.2

package/bin/contractRunner.mjs

@@ -41,6 +41,8 @@ const COMPONENT_ENV = 'LIVE_TOKENS_COMPONENT';
 // as JSON. Duplicated rather than imported for the same reason as
 // SESSION_FILES below.
 const PAGES_ENV = 'LIVE_TOKENS_PAGES';
+// Mirrors src/testing/config.ts's own UPDATE_ARIA_ENV.
+const UPDATE_ARIA_ENV = 'LIVE_TOKENS_UPDATE_ARIA';
 
 /** Milliseconds a spawned tool gets before this file sends it SIGINT, then
  *  SIGKILL five seconds later. A hung dev server or worker can no longer hold
@@ -58,6 +60,7 @@ function testsTimeoutMs() {
 // that module compiles into src/testing-js, which does not exist until
 // `build:testing` runs, and this one ships unbuilt.
 const SESSION_FILES = new Set(['_working.json', '_active.json', '_production.json']);
+const THEME_POINTER = join('themes', '_active.json');
 
 const REQUIRED_TOOLS = [
   {
@@ -84,6 +87,7 @@ const ALL_CONTRACT_RULES = [
   'contract-theme',
   'contract-sketch',
   'contract-render',
+  'a11y-component',
 ];
 
 /**
@@ -106,6 +110,24 @@ export const EDITOR_SUITE_POSITIONAL_RULES = [
   'contract-sketch',
 ];
 
+/**
+ * `--tests --a11y` (decision 3 of docs/plans/a11y-editor.md): the
+ * accessibility suite, and from the editor suite the one test that runs the
+ * keyboard cases. `--grep` selects that test by title, so the editor suite
+ * reaches the mapper with one test per component, and `editorRules` stands in
+ * for the positional table. `bin/check-component.test.ts` pins `grep` to both
+ * suites' titles.
+ */
+export const A11Y_SELECTION = {
+  files: ['component-a11y.contract', 'component-editor.contract'],
+  grep: 'records its accessibility findings in every variant and state|answers the pointer and the keyboard',
+  editorRules: ['contract-interaction'],
+};
+
+export function isA11yRunFinding(finding) {
+  return finding.rule.startsWith('a11y-') || finding.rule.startsWith('tests-');
+}
+
 // ─── tool + path resolution ─────────────────────────────────────────────────
 
 /** Node's own node_modules resolution, walked by hand: a monorepo hoists a
@@ -191,7 +213,10 @@ function guessViteConfigPath(root, settingsPath) {
 
 // ─── data isolation ─────────────────────────────────────────────────────────
 
-function copyIsolatedDataDir(sourceDataDir) {
+/** `keepActive` (`--open-theme`) leaves the editor's theme pointer in the copy,
+ *  so the run reads that theme's saved file. Every buffer still goes, and so
+ *  does any legacy per-layer pointer, whose presence marks a tree unmigrated. */
+export function copyIsolatedDataDir(sourceDataDir, { keepActive = false } = {}) {
   if (!existsSync(sourceDataDir)) {
     throw new Error(
       `No data directory at ${sourceDataDir}. Set "dataDir" in live-tokens.config.json ` +
@@ -203,11 +228,19 @@ function copyIsolatedDataDir(sourceDataDir) {
   const dataDir = realpathSync(mkdtempSync(join(tmpdir(), 'live-tokens-check-')));
   cpSync(sourceDataDir, dataDir, { recursive: true });
   for (const entry of readdirSync(dataDir, { recursive: true })) {
+    if (keepActive && entry === THEME_POINTER) continue;
     if (SESSION_FILES.has(basename(entry))) rmSync(join(dataDir, entry), { force: true });
   }
   return dataDir;
 }
 
+/** The theme a run over `dataDir` loads: the slug its pointer names, or
+ *  `default` when the copy carries none. */
+export function testedTheme(dataDir) {
+  const pointer = join(dataDir, THEME_POINTER);
+  return existsSync(pointer) ? JSON.parse(readFileSync(pointer, 'utf8')).activeFile : 'default';
+}
+
 /** The one child process a `withCleanup` signal handler needs to stop before
  *  it is safe to remove the directories that process is still writing into.
  *  Module-scoped because exactly one `runContractTests` call is ever active
@@ -407,11 +440,12 @@ export function readReportOrSetupFinding(tool, reportPath, code, stdout, stderr)
   }
 }
 
-export async function runPlaywrightSuite({ root, configDir, playwrightConfigPath, project, timeoutMs = DEFAULT_TESTS_TIMEOUT_MS }) {
+export async function runPlaywrightSuite({ root, configDir, playwrightConfigPath, project, files = [], grep, timeoutMs = DEFAULT_TESTS_TIMEOUT_MS }) {
   const reportPath = join(configDir, 'playwright-report.json');
   const bin = peerBin(root, '@playwright/test', 'cli.js');
-  const args = [bin, 'test', '-c', playwrightConfigPath, '--reporter=json'];
+  const args = [bin, 'test', '-c', playwrightConfigPath, '--reporter=json', ...files];
   if (project) args.push('--project', project);
+  if (grep) args.push('--grep', grep);
   const { code, stdout, stderr, timedOut } = await runCli(process.execPath, args, {
     cwd: root,
     env: { ...process.env, PLAYWRIGHT_JSON_OUTPUT_FILE: reportPath },
@@ -569,13 +603,16 @@ const VIOLATION_RE = /^ContractViolation:\s*\[([a-z-]+)\]\s+([a-z0-9-]+):\s*([\s
  *  `EDITOR_SUITE_POSITIONAL_RULES`), the suite file for the other two. A
  *  `ContractViolation`'s own `[rule]` prefix, when present, is more
  *  authoritative than either and wins in the caller. */
-function structuralRule(entry, componentId, positionCounters) {
+function structuralRule(entry, componentId, positionCounters, positionalRules) {
+  const file = basename(entry.specFile ?? '');
+  // Ahead of the positional branch: an a11y test grouped under its component's
+  // id must not advance that component's editor-suite position.
+  if (file.startsWith('component-a11y.contract')) return 'a11y-component';
   if (componentId && entry.describeTitles[entry.describeTitles.length - 1] === componentId) {
     const index = positionCounters.get(componentId) ?? 0;
     positionCounters.set(componentId, index + 1);
-    return EDITOR_SUITE_POSITIONAL_RULES[index] ?? null;
+    return positionalRules[index] ?? null;
   }
-  const file = basename(entry.specFile ?? '');
   if (file.startsWith('component-render.contract')) return 'contract-render';
   if (file.startsWith('component-alias.contract')) return 'contract-alias';
   return null;
@@ -589,7 +626,39 @@ function structuralRule(entry, componentId, positionCounters) {
  *  sibling that passed clean the first time. */
 const COVERAGE_PRIORITY = { failed: 4, flaky: 3, passed: 2, inapplicable: 1 };
 
-export function mapPlaywrightResults(report, { root, sourceDataDir, knownIds }) {
+// Mirrors the annotation type src/testing/support/a11y.ts records, duplicated
+// for the same reason as SESSION_FILES above.
+const A11Y_ANNOTATION = 'a11y';
+
+function a11yResults(annotations) {
+  return annotations.filter((a) => a.type === A11Y_ANNOTATION).flatMap((a) => JSON.parse(a.description));
+}
+
+/** One finding per result a passing test recorded (decision 3). Coverage stays
+ *  with the test's own pass: a warning must not read as a failed obligation,
+ *  which would excuse every gap reconciliation looks for. */
+function a11yFinding(result, { file, line, componentId, context }) {
+  return {
+    rule: result.rule,
+    file,
+    line,
+    message: `${componentId ? `${componentId}: ` : ''}${result.engineRule} at ${result.target}${result.view ? ` in ${result.view}` : ''}: ${result.help}. ${result.helpUrl}`,
+    ...(componentId ? { component: componentId } : {}),
+    details: {
+      engineRule: result.engineRule,
+      impact: result.impact,
+      target: result.target,
+      ...(result.view ? { view: result.view } : {}),
+      html: result.html,
+      help: result.help,
+      helpUrl: result.helpUrl,
+      ...(result.variables?.length ? { variables: result.variables } : {}),
+    },
+    context,
+  };
+}
+
+export function mapPlaywrightResults(report, { root, sourceDataDir, knownIds, positionalRules = EDITOR_SUITE_POSITIONAL_RULES }) {
   const zeroCollected = (report.suites ?? []).length === 0;
   if (zeroCollected || (report.errors ?? []).length > 0) {
     const detail = (report.errors ?? []).map((e) => e.message).join('\n') || 'the run collected no tests';
@@ -629,8 +698,14 @@ export function mapPlaywrightResults(report, { root, sourceDataDir, knownIds })
 
   for (const t of tests) {
     const componentId = identifyComponent(t.describeTitles, t.specTitle, knownIds);
-    const rule = structuralRule(t, componentId, positionCounters);
+    const rule = structuralRule(t, componentId, positionCounters, positionalRules);
     const inapplicable = t.annotations.find((a) => a.type === 'inapplicable')?.description;
+    const results = a11yResults(t.annotations);
+    if (results.length > 0) {
+      const { file, line } = artifactForContractRule(root, sourceDataDir, 'a11y-component', componentId, null);
+      const context = { suite: 'playwright', title: [...t.describeTitles, t.specTitle].join(' > '), suiteFile: t.specFile, suiteLine: t.specLine };
+      findings.push(...results.map((result) => a11yFinding(result, { file, line, componentId, context })));
+    }
 
     if (t.status === 'expected' || t.status === 'flaky') {
       // Flaky reaches a passing final attempt, same as expected, but a retry
@@ -655,6 +730,7 @@ export function mapPlaywrightResults(report, { root, sourceDataDir, knownIds })
         file: 'package.json',
         line: 1,
         message: `${componentId ? `${componentId}: ` : ''}"${t.specTitle}" did not finish (${last.status})`,
+        ...(componentId ? { component: componentId } : {}),
         context: { suite: 'playwright', title: [...t.describeTitles, t.specTitle].join(' > '), suiteFile: t.specFile, suiteLine: t.specLine },
       });
       markCoverage(componentId, rule, 'failed');
@@ -677,7 +753,9 @@ export function mapPlaywrightResults(report, { root, sourceDataDir, knownIds })
       }
       const block = messageBlock(error.message);
       const violation = VIOLATION_RE.exec(block);
-      const finalRule = violation?.[1] ?? rule ?? 'tests-setup';
+      // An accessibility test records its findings and passes, so one that
+      // throws broke its scan (decision 3 of docs/plans/a11y-testing.md).
+      const finalRule = violation?.[1] ?? (rule === 'a11y-component' ? 'tests-setup' : rule) ?? 'tests-setup';
       const id = violation?.[2] ?? componentId;
       const message = violation?.[3] ?? block;
       const token = extractToken(message);
@@ -687,6 +765,7 @@ export function mapPlaywrightResults(report, { root, sourceDataDir, knownIds })
         file,
         line,
         message: id ? `${id}: ${message}` : message,
+        ...(id ? { component: id } : {}),
         context: {
           suite: 'playwright',
           title: [...t.describeTitles, t.specTitle].join(' > '),
@@ -695,7 +774,7 @@ export function mapPlaywrightResults(report, { root, sourceDataDir, knownIds })
           attachments: (last?.attachments ?? []).map((a) => a.path).filter(Boolean),
         },
       });
-      markCoverage(id, finalRule, 'failed');
+      markCoverage(id, violation ? finalRule : rule ?? finalRule, 'failed');
     }
   }
   return { findings, coverage };
@@ -706,13 +785,26 @@ export function mapPlaywrightResults(report, { root, sourceDataDir, knownIds })
 /** The plan's Runtime rule ids, fixed rather than read off a page's own
  *  results: `reconcileCoverage`'s expected set, same reasoning as
  *  `ALL_CONTRACT_RULES` above. */
-const PAGE_RUNTIME_RULES = ['page-component-paint', 'page-text-style', 'page-contrast', 'page-grid', 'page-overflow'];
+const PAGE_RUNTIME_RULES = [
+  'page-component-paint', 'page-text-style', 'page-contrast', 'page-grid', 'page-overflow',
+  'a11y-page', 'a11y-text-spacing', 'a11y-reduced-motion',
+];
+
+/** The accessibility tests' titles keep the `page-` prefix the title pattern
+ *  reads; coverage keys them by the rule each records, so `--off` reaches
+ *  them. A test of these that throws broke its scan, which reports as
+ *  `tests-setup` (decision 3 of docs/plans/a11y-testing.md). */
+const PAGE_A11Y_TESTS = {
+  'page-a11y': 'a11y-page',
+  'page-text-spacing': 'a11y-text-spacing',
+  'page-reduced-motion': 'a11y-reduced-motion',
+};
 
 /** `page-compliance.contract.ts` titles each test `${rule} | ${source} |
  *  ${width}x${height}`, so the rule, the page, and the viewport are read off
  *  the title rather than off describe-block position (there is none — every
  *  page test is a sibling at the suite's top level). */
-const PAGE_TEST_TITLE_RE = /^(page-[a-z-]+) \| (.+) \| (\d+x\d+)$/;
+const PAGE_TEST_TITLE_RE = /^(page-[a-z0-9-]+) \| (.+) \| (\d+x\d+)$/;
 
 /** A `PageViolation`'s own `[rule] source:line: message`, read back out of
  *  Playwright's `Error.prototype.toString()` (`${name}: ${message}`), the
@@ -767,8 +859,14 @@ export function mapPageResults(report) {
   };
 
   for (const t of tests) {
-    const [, titleRule, titleSource, titleViewport] = PAGE_TEST_TITLE_RE.exec(t.specTitle) ?? [];
+    const [, titleName, titleSource, titleViewport] = PAGE_TEST_TITLE_RE.exec(t.specTitle) ?? [];
+    const titleRule = PAGE_A11Y_TESTS[titleName] ?? titleName;
     const pageAtViewport = titleSource && titleViewport ? `${titleSource}@${titleViewport}` : null;
+    const context = { suite: 'playwright', title: t.specTitle, suiteFile: t.specFile, suiteLine: t.specLine };
+    // Each viewport records its own results, so the viewport tells a page's
+    // two findings for one element apart.
+    findings.push(...a11yResults(t.annotations).map((result) =>
+      a11yFinding({ ...result, view: result.view ?? titleViewport }, { file: titleSource ?? 'package.json', line: result.line ?? 1, context })));
 
     if (t.status === 'expected' || t.status === 'flaky') {
       markCoverage(pageAtViewport, titleRule, t.status === 'flaky' ? 'flaky' : 'passed');
@@ -813,7 +911,7 @@ export function mapPageResults(report) {
       const block = messageBlock(error.message);
       const violation = PAGE_VIOLATION_RE.exec(block);
       findings.push({
-        rule: violation?.[1] ?? titleRule ?? 'tests-setup',
+        rule: violation?.[1] ?? (PAGE_A11Y_TESTS[titleName] || !titleRule ? 'tests-setup' : titleRule),
         file: violation?.[2] ?? titleSource ?? 'package.json',
         line: violation ? Number(violation[3]) : 1,
         message: violation?.[4] ?? block,
@@ -1009,7 +1107,10 @@ export function reconcileCoverage(coverage, expectedIds, { expectedRules = ALL_C
 
 // ─── entry point ────────────────────────────────────────────────────────────
 
-export async function runContractTests(id, { root = process.cwd(), dataDir: explicitDataDir } = {}) {
+export async function runContractTests(
+  id,
+  { root = process.cwd(), dataDir: explicitDataDir, updateAria = false, a11y = false, openTheme = false } = {},
+) {
   const toolFindings = missingToolFindings(root);
   if (toolFindings.length > 0) return { findings: toolFindings, coverage: {} };
 
@@ -1031,12 +1132,14 @@ export async function runContractTests(id, { root = process.cwd(), dataDir: expl
   let sourceDataDir;
   let dataDir;
   let configDir;
+  let theme;
   try {
     // `dataDir` bypasses resolution entirely: the seam a caller (a test, or a
     // future batch/CI runner) uses to point an isolated copy at a source tree
     // other than the project's own, without ever touching the real one.
     sourceDataDir = explicitDataDir ?? resolveSourceDataDir(root, settingsFilePath(root));
-    dataDir = copyIsolatedDataDir(sourceDataDir);
+    dataDir = copyIsolatedDataDir(sourceDataDir, { keepActive: openTheme });
+    theme = testedTheme(dataDir);
     configDir = mkdtempSync(join(tmpdir(), 'live-tokens-check-cfg-'));
   } catch (error) {
     if (dataDir) rmSync(dataDir, { recursive: true, force: true });
@@ -1056,8 +1159,29 @@ export async function runContractTests(id, { root = process.cwd(), dataDir: expl
     process.env[DATA_DIR_ENV] = dataDir;
     if (id) process.env[COMPONENT_ENV] = id;
     else delete process.env[COMPONENT_ENV];
+    if (updateAria) process.env[UPDATE_ARIA_ENV] = '1';
+    else delete process.env[UPDATE_ARIA_ENV];
 
     const knownIds = new Set([...discoverComponents(root), ...discoverComponents(PKG_ROOT)]);
+
+    // Reconciliation expects every contract rule of every component, and this
+    // run covers two, so its coverage stands as the suites reported it.
+    if (a11y) {
+      const outcome = await runPlaywrightSuite({
+        root,
+        configDir,
+        playwrightConfigPath,
+        project: 'contract',
+        files: A11Y_SELECTION.files,
+        grep: A11Y_SELECTION.grep,
+        timeoutMs,
+      });
+      const mapped = outcome.setupFinding
+        ? { findings: [outcome.setupFinding], coverage: {} }
+        : mapPlaywrightResults(outcome.report, { root, sourceDataDir, knownIds, positionalRules: A11Y_SELECTION.editorRules });
+      return { findings: mapped.findings.filter(isA11yRunFinding), coverage: mapped.coverage, theme };
+    }
+
     const expectedIds = id ? [id] : [...knownIds];
 
     // Sequential: both share the one isolated data directory, and the
@@ -1087,11 +1211,12 @@ export async function runContractTests(id, { root = process.cwd(), dataDir: expl
       explainedGlobally,
     });
 
-    return { findings: [...mergedFindings, ...reconciled.findings], coverage: reconciled.coverage };
+    return { findings: [...mergedFindings, ...reconciled.findings], coverage: reconciled.coverage, theme };
   } catch (error) {
     return {
       findings: [{ rule: 'tests-setup', file: 'package.json', line: 1, message: `check-component --tests crashed: ${error.message}` }],
       coverage: {},
+      theme,
     };
   } finally {
     cleanup();

package/bin/lib/findings.mjs

@@ -57,11 +57,15 @@ export function isExcluded(relPath, root) {
 }
 
 /**
- * Parse `--off=a,b --warn=c --error=d --strict --json` out of argv.
+ * Parse `--off=a,b --warn=c --error=d --strict --json --tests --no-fix
+ * --update-aria --a11y --open-theme` out of argv.
  * Unrecognised flags are returned in `rest` for the caller to handle.
  */
 export function parseCheckFlags(argv) {
-  const opts = { off: [], warn: [], error: [], strict: false, json: false, tests: false, noFix: false, rest: [] };
+  const opts = {
+    off: [], warn: [], error: [], strict: false, json: false, tests: false, noFix: false, updateAria: false,
+    a11y: false, openTheme: false, rest: [],
+  };
   for (const arg of argv) {
     const m = arg.match(/^--(off|warn|error)=(.+)$/);
     if (m) {
@@ -70,6 +74,9 @@ export function parseCheckFlags(argv) {
     else if (arg === '--json') opts.json = true;
     else if (arg === '--tests') opts.tests = true;
     else if (arg === '--no-fix') opts.noFix = true;
+    else if (arg === '--update-aria') opts.updateAria = true;
+    else if (arg === '--a11y') opts.a11y = true;
+    else if (arg === '--open-theme') opts.openTheme = true;
     else opts.rest.push(arg);
   }
   return opts;
@@ -191,10 +198,19 @@ export function formatFindings(findings, { label, checked = 0 } = {}) {
   return lines.join('\n');
 }
 
-export function toJson(findings, { label, checked = 0, coverage, fix } = {}) {
+export function toJson(findings, { label, checked = 0, coverage, fix, theme } = {}) {
   const { errors, warnings } = countBySeverity(findings);
   return JSON.stringify(
-    { check: label, checked, errors, warnings, ...(fix ? { fix } : {}), findings, ...(coverage ? { coverage } : {}) },
+    {
+      check: label,
+      checked,
+      errors,
+      warnings,
+      ...(theme ? { theme } : {}),
+      ...(fix ? { fix } : {}),
+      findings,
+      ...(coverage ? { coverage } : {}),
+    },
     null,
     2,
   );

package/bin/rules/a11y.mjs

@@ -0,0 +1,53 @@
+const HELP =
+  'The message names the engine rule, the element, and the URL of a help page that states the requirement and its repair.';
+
+const review = {
+  'a11y-review': {
+    severity: 'warn',
+    repair: 'authored',
+    guidance: `An engine could not decide the check, typically for text, a focus ring, or a control's edge over a gradient, an image, or a backdrop. ${HELP} Judge the element by eye against the help page, and repair it when it fails.`,
+  },
+};
+
+const adaptation = {
+  'a11y-text-spacing': {
+    severity: 'warn',
+    repair: 'authored',
+    guidance: `Content overflows under the WCAG 2.2 SC 1.4.12 text spacing override: line height 1.5, paragraph spacing 2em, letter spacing 0.12em, and word spacing 0.16em. ${HELP} Let the element the finding names grow with its text: drop its fixed height or width, or its white-space: nowrap. In a component finding, details.variables in --json names the semantic properties that set the element's size.`,
+  },
+  'a11y-reduced-motion': {
+    severity: 'warn',
+    repair: 'authored',
+    guidance: `An animation or transition keeps running past 200 ms under prefers-reduced-motion: reduce. ${HELP} Stop the motion, or cut it to a fade, inside @media (prefers-reduced-motion: reduce).`,
+  },
+};
+
+export const componentRules = {
+  'a11y-component': {
+    severity: 'warn',
+    repair: 'authored',
+    guidance: `axe found a WCAG 2 A or AA failure inside the component's preview, or a focus ring or control boundary measures below 3:1 against its backdrop under WCAG 2.2 SC 1.4.11. ${HELP} Repair the runtime markup, or point the semantic property that fails at a design token that passes, then rerun check-component --tests. details.variables in --json names the semantic properties the finding traces to. An aria-snapshot finding means the component's accessibility tree changed since it was recorded: confirm the change is deliberate, then rerun with --update-aria.`,
+  },
+  ...review,
+  'a11y-focus-visible': {
+    severity: 'warn',
+    repair: 'authored',
+    guidance: `Siteimprove Alfa rule SIA-R65 found no visible change when the element takes focus. ${HELP} Give the element a :focus-visible style, such as an outline, that differs from its resting style. Alfa reads only the element, its descendants, and its ancestors, so confirm by eye a focus style painted on a sibling.`,
+  },
+  'a11y-keyboard': {
+    severity: 'warn',
+    repair: 'authored',
+    guidance: `A keyboard case of the component's interaction contract failed: a key that should activate, move, or close did nothing. ${HELP} Handle the key on the element that holds focus, as the WAI-ARIA pattern for its role describes.`,
+  },
+  ...adaptation,
+};
+
+export const pageRules = {
+  'a11y-page': {
+    severity: 'warn',
+    repair: 'authored',
+    guidance: `axe found a WCAG 2 A or AA failure on the page, outside the shipped components. ${HELP} Repair the page markup at the line the finding names. Text contrast reports under page-contrast.`,
+  },
+  ...review,
+  ...adaptation,
+};

package/bin/set-colors.mjs

@@ -82,6 +82,7 @@ export async function runSetColors({
   const { colors, report } = buildColors(input, {
     cssVariables: live.cssVariables,
     gradients: live.gradients,
+    customColors: live.customColors,
   });
 
   const next = {

package/bin/setup-claude.mjs

@@ -19,7 +19,7 @@ import { join } from 'node:path';
 
 // The package owns this prefix in a project's skills directory. A skill without
 // it is the project's own and is never touched, whatever the flags say.
-const SKILL_PREFIX = 'live-tokens-';
+export const SKILL_PREFIX = 'live-tokens-';
 
 const SAMPLE_PROMPTS = {
   'live-tokens-create-page': 'build a pricing page using live-tokens components',
@@ -44,7 +44,7 @@ export function runSetupClaude({ pkgRoot, cwd, force = false }) {
     throw new Error(`No bundled skills found at ${srcSkills}. Is the package installed correctly?`);
   }
 
-  const shipped = directoriesIn(srcSkills);
+  const shipped = directoriesIn(srcSkills).filter((name) => name.startsWith(SKILL_PREFIX));
   if (shipped.length === 0) {
     throw new Error('No bundled skills to install.');
   }

package/dist-plugin/{chunk-A4TBP4MM.js → chunk-SLICH4IH.js}

@@ -89,7 +89,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;
@@ -97,7 +97,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;
     }