@multiplatform.one/config 7.7.1 → 7.7.3

package/lint.mjs

@@ -37,7 +37,18 @@
  *    target resolves, where react-native-web exports no X. The alias makes
  *    that a module-evaluation SyntaxError, which takes the whole preview
  *    bundle down rather than one component.
- * 9. Fail on an `import.meta` TOKEN in public/<pkg>/src (MPO-204) — in a
+ * 9. Fail on a `.react-flow__` SELECTOR outside the token bridge (MPO-191) —
+ *    React Flow paints through `var(--xy-thing, var(--xy-thing-default))`, so
+ *    every colour, width and shadow is settable without touching its
+ *    stylesheet. A hand-written `.react-flow__` rule anywhere else forks that
+ *    paint: it wins or loses on specificity rather than on the knob, and the
+ *    next library upgrade silently changes which. The whole point of the
+ *    bridge is that a designer never touches React Flow CSS — including us —
+ *    so the rule is mechanical. `theme/graphVars.ts` (the map) and the
+ *    package's own `css/` tree (outside `src`) are the two places it may live.
+ *    Comments and specs are exempt; strings are not, because a hand-written
+ *    rule lives in a template literal.
+ * 10. Fail on an `import.meta` TOKEN in public/<pkg>/src (MPO-204) — in a
  *    classic script it is a PARSE-time SyntaxError, and two bundles execute
  *    mpo as one (the vxrn/rolldown Hermes bundle, and any Metro bundle for
  *    platform=web, i.e. an Expo DOM component). Node-only build tooling is
@@ -1183,6 +1194,88 @@ function checkImportMetaInPublicSource() {
   return violations;
 }
 
+// ── React Flow selectors outside the token bridge (MPO-191) ───────────────
+
+const REACT_FLOW_SELECTOR_RE = /\.react-flow__[\w-]+/g;
+/**
+ * The two files a `.react-flow__` string may live in, both DECLARED boundaries.
+ *
+ * `theme/graphVars.ts` owns the paint: every React Flow surface is set through
+ * its own `--xy-*` variable there, never through a rule.
+ *
+ * `react-flow/xy.ts` owns the @xyflow DOM contract — it is already the one file
+ * allowed to import the library at all (oxlint `no-restricted-imports`), and a
+ * class NAME is part of that contract the same way an exported symbol is. The
+ * long press has to find the pane to listen on it, which is a DOM lookup and
+ * not a paint rule; putting the string at the call site would mean a library
+ * rename lands in a `querySelector` that returns null in silence.
+ */
+const GRAPH_VARS_EXEMPT = ["theme/graphVars.ts", "react-flow/xy.ts"];
+const REACT_FLOW_SCANNED_RE = /\.(tsx|ts|jsx|js|mjs|cjs|css)$/;
+
+/**
+ * Offsets that are NOT inside a comment.
+ *
+ * `codeOffsets` masks strings as well, which is the opposite of what this needs:
+ * a hand-written React Flow rule lives in a template literal or a `className`,
+ * so strings are exactly the interesting part. Comments are not — the map's own
+ * allowlist explains itself by naming `.react-flow__node-input`, and that
+ * explanation must not be the thing that fails the build.
+ * @param {string} src
+ */
+function nonCommentOffsets(src) {
+  const mask = new Uint8Array(src.length).fill(1);
+  let i = 0;
+  while (i < src.length) {
+    const char = src[i];
+    const next = src[i + 1];
+    if (char === "/" && next === "/") {
+      while (i < src.length && src[i] !== "\n") mask[i++] = 0;
+      continue;
+    }
+    if (char === "/" && next === "*") {
+      while (i < src.length && !(src[i] === "*" && src[i + 1] === "/")) mask[i++] = 0;
+      mask[i] = 0;
+      mask[i + 1] = 0;
+      i += 2;
+      continue;
+    }
+    i++;
+  }
+  return mask;
+}
+
+/**
+ * MPO-191: a `.react-flow__` selector under public/<pkg>/src, outside the one
+ * file that owns the mapping.
+ */
+function checkGraphVarsCoverage() {
+  /** @type {string[]} */
+  const violations = [];
+  if (!existsSync(PUBLIC_DIR)) return violations;
+  for (const pkg of readdirSync(PUBLIC_DIR, { withFileTypes: true })) {
+    if (!pkg.isDirectory() || pkg.name.startsWith(".") || pkg.name === "node_modules") continue;
+    walkFiles(join(PUBLIC_DIR, pkg.name, "src"), (filePath) => {
+      if (!REACT_FLOW_SCANNED_RE.test(filePath)) return;
+      const posix = filePath.replace(/\\/g, "/");
+      if (GRAPH_VARS_EXEMPT.some((exempt) => posix.endsWith(exempt))) return;
+      // Specs are exempt for the reason check 10 exempts them: a spec that
+      // asserts WHICH classes a variable binds to has to name those classes,
+      // and it ships no paint. Nothing else is exempt, including stories.
+      if (/\.(spec|test)\./.test(filePath)) return;
+      const src = readFileSync(filePath, "utf8");
+      if (!src.includes(".react-flow__")) return;
+      const mask = nonCommentOffsets(src);
+      for (const match of src.matchAll(REACT_FLOW_SELECTOR_RE)) {
+        const index = match.index ?? 0;
+        if (mask[index] !== 1) continue;
+        violations.push(`${relative(ROOT, filePath)}:${lineAt(src, index)} — ${match[0]}`);
+      }
+    });
+  }
+  return violations;
+}
+
 /**
  * Run structural convention checks over a consumer tree.
  *
@@ -1200,6 +1293,7 @@ export function runConventionChecks(options = {}) {
   const metroFallbacks = checkMetroSubpathFallbacks();
   const rnWebExports = checkReactNativeWebExports();
   const importMeta = checkImportMetaInPublicSource();
+  const graphVars = checkGraphVarsCoverage();
   const tokens = checkTransitionTokens();
   const styleTokens = checkStyleTokens();
   const themeNames = checkThemeNames();
@@ -1293,6 +1387,15 @@ export function runConventionChecks(options = {}) {
     console.error("");
   }
 
+  if (graphVars.length) {
+    failed = true;
+    console.error(
+      "Convention (MPO-191 GRAPH VARS COVERAGE): a `.react-flow__` selector belongs in the token bridge, nowhere else. React Flow reads every paint through `var(--xy-thing, var(--xy-thing-default))`, so the whole surface is settable without touching its stylesheet; a rule written anywhere else wins or loses on specificity instead of on the knob, and the next @xyflow/react upgrade silently changes which. Set the variable in `theme/graphVars.ts`, or put the rule in the package's own `css/` tree (outside `src`) where a reviewer reads it whole. A DOM LOOKUP is the one other legitimate use, and it belongs in `react-flow/xy.ts` beside the rest of the @xyflow contract. A mention inside a comment is fine and is not flagged.\n",
+    );
+    for (const msg of graphVars) console.error(`  ${msg}`);
+    console.error("");
+  }
+
   if (importMeta.length) {
     failed = true;
     console.error(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/config",
-  "version": "7.7.1",
+  "version": "7.7.3",
   "description": "Shared build and test configuration presets for multiplatform.one",
   "keywords": [
     "config",
@@ -102,7 +102,7 @@
     "vite-plugin-external": "^6.2.2",
     "vite-plugin-i18next-loader": "^3.1.3",
     "vitest": "^4.1.5",
-    "@multiplatform.one/utils": "7.7.1"
+    "@multiplatform.one/utils": "7.7.3"
   },
   "devDependencies": {
     "tsdown": "^0.21.10",