fix(csr): suppress inactive theme token warnings

bun.lock

@@ -342,7 +342,7 @@
     },
     "packages/csr": {
       "name": "@wrnexus/csr",
-      "version": "0.8.34",
+      "version": "0.8.35",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },

packages/csr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.8.34",
+  "version": "0.8.35",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/csr/src/reactive-runtime.ts

@@ -268,8 +268,21 @@ export const REACTIVE_RUNTIME = String.raw`
       Array.prototype.forEach.call(rules || [], function (rule) {
         var cssText = rule.cssText || "";
         var match;
-        var pattern = /var\(\s*(--wrn-[A-Za-z0-9_-]+)/g;
-        while ((match = pattern.exec(cssText))) referenced[match[1]] = true;
+        // Only inspect declarations that can affect the current document. A
+        // component stylesheet may contain optional variants that are not
+        // rendered on this page, and variables with fallbacks are intentionally
+        // optional rather than missing theme tokens.
+        if (rule.selectorText) {
+          try {
+            if (!document.querySelector(rule.selectorText)) return;
+          } catch (_) {
+            // Keep inspecting selectors that the DOM implementation cannot parse.
+          }
+        }
+        var pattern = /var\(\s*(--wrn-[A-Za-z0-9_-]+)\s*(,)?/g;
+        while ((match = pattern.exec(cssText))) {
+          if (!match[2]) referenced[match[1]] = true;
+        }
         if (rule.style) {
           Array.prototype.forEach.call(rule.style, function (property) {
             if (String(property).indexOf("--wrn-") === 0) declared[property] = true;

packages/csr/test/reactive.test.ts

@@ -1088,6 +1088,38 @@ test("development runtime accepts component-local and inline wrn variables", ()
   expect(warnings).toHaveLength(0);
 });
 
+test("development runtime ignores fallback and inactive component variables", () => {
+  const win = new Window() as unknown as Window & Record<string, unknown>;
+  win.document.head.innerHTML =
+    `<style>.visible { color: var(--wrn-optional, red); } ` +
+    `.not-rendered { color: var(--wrn-inactive); }</style>`;
+  win.document.body.innerHTML = `<div class="visible" data-scope=""></div>`;
+  (globalThis as Record<string, unknown>).window = win;
+  (globalThis as Record<string, unknown>).document = win.document;
+  (globalThis as Record<string, unknown>).location = win.location;
+  (globalThis as Record<string, unknown>).NodeFilter = (
+    win as unknown as { NodeFilter: unknown }
+  ).NodeFilter;
+  (globalThis as Record<string, unknown>).MutationObserver = (
+    win as unknown as { MutationObserver: unknown }
+  ).MutationObserver;
+  (globalThis as Record<string, unknown>).CustomEvent = (
+    win as unknown as { CustomEvent: unknown }
+  ).CustomEvent;
+  const warnings: unknown[][] = [];
+  const originalWarn = console.warn;
+  console.warn = (...args: unknown[]) => warnings.push(args);
+  try {
+    (0, eval)(getReactiveRuntime(true));
+    (
+      win as unknown as { __wrnexusHydrateScopes?: (root: unknown) => void }
+    ).__wrnexusHydrateScopes?.(win.document);
+  } finally {
+    console.warn = originalWarn;
+  }
+  expect(warnings).toHaveLength(0);
+});
+
 test("production runtime strips development diagnostics", () => {
   const production = getReactiveRuntime();
   expect(production).not.toContain("WRN-DEV-");