fix(csr): recognize component-local CSS variables

packages/csr/src/reactive-runtime.ts

@@ -224,12 +224,18 @@ export const REACTIVE_RUNTIME = String.raw`
 
   function warnMissingThemeTokens() {
     var referenced = Object.create(null);
+    var declared = Object.create(null);
     function collect(rules) {
       Array.prototype.forEach.call(rules || [], function (rule) {
         var cssText = rule.cssText || "";
         var match;
         var pattern = /var\(\s*(--wire-[A-Za-z0-9_-]+)/g;
         while ((match = pattern.exec(cssText))) referenced[match[1]] = true;
+        if (rule.style) {
+          Array.prototype.forEach.call(rule.style, function (property) {
+            if (String(property).indexOf("--wire-") === 0) declared[property] = true;
+          });
+        }
         try {
           if (rule.cssRules) collect(rule.cssRules);
         } catch (_) {
@@ -240,9 +246,14 @@ export const REACTIVE_RUNTIME = String.raw`
     Array.prototype.forEach.call(document.styleSheets || [], function (sheet) {
       try { collect(sheet.cssRules); } catch (_) {}
     });
+    Array.prototype.forEach.call(document.querySelectorAll("[style]") || [], function (element) {
+      Array.prototype.forEach.call(element.style || [], function (property) {
+        if (String(property).indexOf("--wire-") === 0) declared[property] = true;
+      });
+    });
     var rendered = window.getComputedStyle(document.documentElement);
     Object.keys(referenced).forEach(function (token) {
-      if (rendered.getPropertyValue(token).trim()) return;
+      if (declared[token] || rendered.getPropertyValue(token).trim()) return;
       warnOnce(
         "WRN-DEV-THEME-TOKEN-MISSING",
         "Theme token '" + token + "' is referenced by rendered CSS but is not defined.",