From 145b9d9882e0307a379315219cafef4b0f65cfc1 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 27 May 2025 11:38:55 +1000
Subject: [PATCH 01/15] feat: Style Macro DevTool

# Conflicts:
#	yarn.lock
---
 package.json                                  |  1 +
 .../@react-spectrum/s2/style/style-macro.ts   | 71 +++++++++++++++----
 .../dev/style-macro-chrome-plugin/.parcelrc   |  9 +++
 .../style-macro-chrome-plugin/package.json    | 14 ++++
 .../src/content-script.js                     | 17 +++++
 .../style-macro-chrome-plugin/src/devtool.js  | 70 ++++++++++++++++++
 .../src/devtools.html                         |  7 ++
 .../src/manifest.json                         | 10 +++
 yarn.lock                                     | 67 +++++++++++++++++
 9 files changed, 254 insertions(+), 12 deletions(-)
 create mode 100644 packages/dev/style-macro-chrome-plugin/.parcelrc
 create mode 100644 packages/dev/style-macro-chrome-plugin/package.json
 create mode 100644 packages/dev/style-macro-chrome-plugin/src/content-script.js
 create mode 100644 packages/dev/style-macro-chrome-plugin/src/devtool.js
 create mode 100644 packages/dev/style-macro-chrome-plugin/src/devtools.html
 create mode 100644 packages/dev/style-macro-chrome-plugin/src/manifest.json

diff --git a/package.json b/package.json
index 2ca9dad9daf..ece844c7a4f 100644
--- a/package.json
+++ b/package.json
@@ -221,6 +221,7 @@
     "@babel/preset-env": "7.24.4",
     "@babel/traverse": "7.24.1",
     "@babel/types": "7.24.0",
+    "@parcel/config-webextension": "2.14.0",
     "postcss": "8.4.24",
     "postcss-custom-properties": "13.2.0",
     "postcss-import": "15.1.0",
diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index d41d6aaeee6..1bfcc3124e7 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -176,7 +176,7 @@ export function parseArbitraryValue(value: Value): string | undefined {
     return value.slice(1, -1);
   } else if (
     typeof value === 'string' && (
-      /^(var|calc|min|max|clamp|round|mod|rem|sin|cos|tan|asin|acos|atan|atan2|pow|sqrt|hypot|log|exp|abs|sign)\(.+\)$/.test(value) || 
+      /^(var|calc|min|max|clamp|round|mod|rem|sin|cos|tan|asin|acos|atan|atan2|pow|sqrt|hypot|log|exp|abs|sign)\(.+\)$/.test(value) ||
       /^(inherit|initial|unset)$/.test(value)
     )
   ) {
@@ -205,6 +205,8 @@ interface MacroContext {
   addAsset(asset: {type: string, content: string}): void
 }
 
+let isCompilingDependencies: boolean | null | string = false;
+
 export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemeProperties<T>, 'default' | Extract<keyof T['conditions'], string>> {
   let properties = new Map<string, Property<any>>(Object.entries(theme.properties).map(([k, v]) => {
     if (!Array.isArray(v) && v.cssProperties) {
@@ -280,8 +282,11 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
         let prop = properties.get(dep)!;
         let name = `--${shortCSSPropertyName(prop.cssProperties[0])}`;
         // Could potentially use @property to prevent the var from inheriting in children.
+        isCompilingDependencies = dep;
         setRules(name, compileValue(name, dep, value));
+        isCompilingDependencies = null;
         setRules(dep, compileValue(dep, dep, name));
+        isCompilingDependencies = false;
       }
     }
     dependencies.clear();
@@ -305,7 +310,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     // Also generate a variable for each overridable property that overlaps with the style definition. If those are defined,
     // the defaults from the style definition are omitted.
     let allowedOverridesSet = new Set<string>();
-    let js = 'let rules = " ";\n';
+    let js = 'let rules = " ", currentRules = {};\n';
     if (allowedOverrides?.length) {
       for (let property of allowedOverrides) {
         let shorthand = theme.shorthands[property];
@@ -315,7 +320,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
             allowedOverridesSet.add(property);
             continue;
           }
-          
+
           let prop = properties.get(property);
           if (!prop) {
             throw new Error(`Invalid property ${property} in allowedOverrides`);
@@ -346,15 +351,15 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
         }
       }
 
-      let regex = `/(?:^|\\s)(${[...allowedOverridesSet].map(p => classNamePrefix(p, p)).join('|')})[^\\s]+/g`;
+      let regex = `/(?:^|\\s)(${[...allowedOverridesSet].map(p => classNamePrefix(p, p)).join('|')}|-macro\\$)[^\\s]+/g`;
       if (loop) {
-        js += `let matches = (overrides || '').matchAll(${regex});\n`;
+        js += `let matches = String(overrides || '').matchAll(${regex});\n`;
         js += 'for (let p of matches) {\n';
         js += loop;
         js += '  rules += p[0];\n';
         js += '}\n';
       } else {
-        js += `rules += ((overrides || '').match(${regex}) || []).join('')\n`;
+        js += `rules += (String(overrides || '').match(${regex}) || []).join('')\n`;
       }
     }
 
@@ -383,11 +388,19 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       });
     }
 
+    let loc = this.loc.filePath + ':' + this.loc.line + ':' + this.loc.col;
     if (isStatic) {
-      return className;
+      let id = toBase62(hash(className));
+      className += ` -macro$${id}`;
+      return {toString: new Function(`(globalThis.__macros ??= {})[${JSON.stringify(id)}] = ${JSON.stringify({loc, style})}; return ${JSON.stringify(className)}`)};
     }
 
+    js += 'let hash = 5381;for (let i = 0; i < rules.length; i++) { hash = ((hash << 5) + hash) + rules.charCodeAt(i) >>> 0; }\n';
+    js += 'rules += " -macro$" + hash.toString(36);\n';
+    js += `(globalThis.__macros ??= {})[hash.toString(36)] = {loc: ${JSON.stringify(loc)}, style: currentRules};\n`;
+    js += 'window.postMessage("update-macros", "*");\n';
     js += 'return rules;';
+    console.log(js)
     if (allowedOverrides) {
       return new Function('props', 'overrides', js) as any;
     }
@@ -488,7 +501,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       // Top level layer is based on the priority of the rule, not the condition.
       // Also group in a sub-layer based on the condition so that lightningcss can more effectively deduplicate rules.
       let layer = `${generateName(priority, true)}.${propertyInfo.conditions[theme.conditions[condition] || condition] || generateArbitraryValueSelector(condition, true)}`;
-      return [new AtRule(rules, prelude, layer)];
+      return [new AtRule(rules, prelude, layer, condition)];
     }
 
     hasConditions = true;
@@ -499,6 +512,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     let propertyFunction = properties.get(themeProperty);
     if (propertyFunction) {
       // Expand value to conditional CSS values, and then to rules.
+      let propertyValue = value;
       let arbitrary = parseArbitraryValue(value);
       let cssValue = arbitrary ? arbitrary : propertyFunction.toCSSValue(value);
       let cssProperties = propertyFunction.toCSSProperties(property.startsWith('--') ? property : null, cssValue);
@@ -547,7 +561,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
 
           className += propertyInfo.values[cssProperty]?.[String(value)] ?? generateArbitraryValueSelector(String(value));
           className += POSTFIX;
-          rules.push(new StyleRule(className, key, String(value)));
+          rules.push(new StyleRule(className, key, String(value), isCompilingDependencies ? themeProperty : property, propertyValue));
         }
 
         return [0, rules];
@@ -635,6 +649,8 @@ interface Rule {
   toJS(allowedOverridesSet: Set<string>, indent?: string): string
 }
 
+let conditionStack = [];
+
 /** A CSS style rule. */
 class StyleRule implements Rule {
   className: string;
@@ -642,11 +658,15 @@ class StyleRule implements Rule {
   property: string;
   value: string;
 
-  constructor(className: string, property: string, value: string) {
+  constructor(className: string, property: string, value: string, themeProperty, themeValue) {
     this.className = className;
     this.pseudos = '';
     this.property = property;
     this.value = value;
+    if (isCompilingDependencies !== null) {
+      this.themeProperty = themeProperty;
+      this.themeValue = themeValue;
+    }
   }
 
   addPseudo(prelude: string) {
@@ -687,6 +707,21 @@ class StyleRule implements Rule {
       res += `${indent}if (!${this.property.replace('--', '__')}) `;
     }
     res +=  `${indent}rules += ' ${this.className}';`;
+    if (this.themeProperty) {
+      let name = this.themeProperty;
+      if (this.pseudos) {
+        conditionStack.push(this.pseudos);
+      }
+      if (conditionStack.length) {
+        // name += ` (${conditionStack.join(', ')})`;
+        res += ` currentRules[${JSON.stringify(name)}] = typeof currentRules[${JSON.stringify(name)}] === 'object' ? currentRules[${JSON.stringify(name)}] : {"default": currentRules[${JSON.stringify(name)}]}; currentRules[${JSON.stringify(name)}][${JSON.stringify(conditionStack.join(' && '))}] =  ${JSON.stringify(this.themeValue)};`;
+      } else {
+        res += ` currentRules[${JSON.stringify(name)}] = ${JSON.stringify(this.themeValue)};`;
+      }
+      if (this.pseudos) {
+        conditionStack.pop();
+      }
+    }
     return res;
   }
 }
@@ -739,10 +774,12 @@ class GroupRule implements Rule {
 /** A rule that applies conditionally in CSS (e.g. @media). */
 class AtRule extends GroupRule {
   prelude: string;
+  themeCondition: string | null;
 
-  constructor(rules: Rule[], prelude: string, layer: string) {
+  constructor(rules: Rule[], prelude: string, layer: string, themeCondition: string | null) {
     super(rules, layer);
     this.prelude = prelude;
+    this.themeCondition = themeCondition;
   }
 
   toCSS(rulesByLayer: Map<string, string[]>, preludes: string[] = [], layer?: string): void {
@@ -750,6 +787,13 @@ class AtRule extends GroupRule {
     super.toCSS(rulesByLayer, preludes, layer);
     preludes?.pop();
   }
+
+  toJS(allowedOverridesSet: Set<string>, indent?: string): string {
+    conditionStack.push(this.themeCondition || this.prelude);
+    let res = super.toJS(allowedOverridesSet, indent);
+    conditionStack.pop();
+    return res;
+  }
 }
 
 /** A rule that applies conditionally at runtime. */
@@ -766,7 +810,10 @@ class ConditionalRule extends GroupRule {
   }
 
   toJS(allowedOverridesSet: Set<string>, indent = ''): string {
-    return `${indent}if (props.${this.condition}) {\n${super.toJS(allowedOverridesSet, indent + '  ')}\n${indent}}`;
+    conditionStack.push(this.condition);
+    let res = `${indent}if (props.${this.condition}) {\n${super.toJS(allowedOverridesSet, indent + '  ')}\n${indent}}`;
+    conditionStack.pop();
+    return res;
   }
 }
 
diff --git a/packages/dev/style-macro-chrome-plugin/.parcelrc b/packages/dev/style-macro-chrome-plugin/.parcelrc
new file mode 100644
index 00000000000..f497a196e5f
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/.parcelrc
@@ -0,0 +1,9 @@
+{
+  "extends": "@parcel/config-webextension",
+  "transformers": {
+    "*.{js,mjs,jsx,cjs,ts,tsx}": [
+      "@parcel/transformer-js",
+      "@parcel/transformer-react-refresh-wrap"
+    ]
+  }
+}
diff --git a/packages/dev/style-macro-chrome-plugin/package.json b/packages/dev/style-macro-chrome-plugin/package.json
new file mode 100644
index 00000000000..2e0ecb56b2f
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "style-macro-chrome-plugin",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "parcel watch src/manifest.json --host localhost --config .parcelrc",
+    "build": "parcel build src/manifest.json --config .parcelrc"
+  },
+  "devDependencies": {
+    "@parcel/config-default": "^2.14.0",
+    "@parcel/config-webextension": "^2.14.0",
+    "parcel": "^2.14.0"
+  }
+}
diff --git a/packages/dev/style-macro-chrome-plugin/src/content-script.js b/packages/dev/style-macro-chrome-plugin/src/content-script.js
new file mode 100644
index 00000000000..fd78eb00e33
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/src/content-script.js
@@ -0,0 +1,17 @@
+window.addEventListener('message', function(event) {
+  // Only accept messages from the same frame
+  if (event.source !== window) {
+    return;
+  }
+
+  console.log(event)
+  var message = event.data;
+
+  // Only accept messages that we know are ours. Note that this is not foolproof
+  // and the page can easily spoof messages if it wants to.
+  if (message !== 'update-macros') {
+    return;
+  }
+
+  chrome.runtime.sendMessage(message);
+});
diff --git a/packages/dev/style-macro-chrome-plugin/src/devtool.js b/packages/dev/style-macro-chrome-plugin/src/devtool.js
new file mode 100644
index 00000000000..77365e42986
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/src/devtool.js
@@ -0,0 +1,70 @@
+let injectScript = () => {
+  chrome.scripting.executeScript({
+    target: {
+      tabId: chrome.devtools.inspectedWindow.tabId,
+      allFrames: true
+    },
+    files: chrome.runtime.getManifest().content_scripts[0].js
+  });
+};
+
+injectScript();
+chrome.tabs.onUpdated.addListener((tabId) => {
+  if (tabId === chrome.devtools.inspectedWindow.tabId) {
+    injectScript();
+  }
+})
+
+chrome.devtools.panels.elements.createSidebarPane("Style Macros", (sidebar) => {
+  sidebar.setObject({});
+  let update = () => {
+    chrome.devtools.inspectedWindow.eval('$0.getAttribute("class")', async (className) => {
+      if (typeof className !== 'string') {
+        sidebar.setObject({});
+        return;
+      }
+
+      let macros = className.matchAll(/-macro\$([^\s]+)/g);
+      let matches = [];
+      for (let macro of macros) {
+        await new Promise(resolve => {
+          chrome.devtools.inspectedWindow.eval(`$0.ownerDocument.defaultView.__macros?.[${JSON.stringify(macro[1])}]`, (result, x) => {
+            if (result) {
+              matches.push(result);
+            }
+            resolve();
+          });
+        });
+      }
+
+      if (matches.length === 0) {
+        sidebar.setObject({});
+      } else if (matches.length === 1) {
+        sidebar.setObject(matches[0].style ?? {}, matches[0].loc);
+      } else {
+        let seenProperties = new Set();
+        for (let i = matches.length - 1; i >= 0; i--) {
+          for (let key in matches[i].style) {
+            if (seenProperties.has(key)) {
+              delete matches[i].style[key];
+            } else {
+              seenProperties.add(key);
+            }
+          }
+        }
+
+        let res = {};
+        for (let match of matches) {
+          res[match.loc] = match.style;
+        }
+        sidebar.setObject(res);
+      }
+    });
+  };
+
+  chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
+    update();
+  });
+
+  chrome.runtime.onMessage.addListener(() => update());
+});
diff --git a/packages/dev/style-macro-chrome-plugin/src/devtools.html b/packages/dev/style-macro-chrome-plugin/src/devtools.html
new file mode 100644
index 00000000000..6f5f400e09b
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/src/devtools.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <body>
+    Devtools!
+    <script type="module" src="devtool.js"></script>
+  </body>
+</html>
diff --git a/packages/dev/style-macro-chrome-plugin/src/manifest.json b/packages/dev/style-macro-chrome-plugin/src/manifest.json
new file mode 100644
index 00000000000..52294672ff1
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/src/manifest.json
@@ -0,0 +1,10 @@
+{
+  "manifest_version": 3,
+  "name": "Style Macro DevTools",
+  "version": "0.0.1",
+  "devtools_page": "devtools.html",
+  "content_scripts": [{
+    "matches": ["*://*/*"],
+    "js": ["content-script.js"]
+  }]
+}
diff --git a/yarn.lock b/yarn.lock
index 56957f5e18d..a833a0a3fcf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4429,6 +4429,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/config-webextension@npm:2.14.0":
+  version: 2.14.0
+  resolution: "@parcel/config-webextension@npm:2.14.0"
+  dependencies:
+    "@parcel/config-default": "npm:2.14.0"
+    "@parcel/packager-webextension": "npm:2.14.0"
+    "@parcel/runtime-webextension": "npm:2.14.0"
+    "@parcel/transformer-raw": "npm:2.14.0"
+    "@parcel/transformer-webextension": "npm:2.14.0"
+  peerDependencies:
+    "@parcel/core": ^2.14.0
+  checksum: 10c0/3348bcfb3143aba2bd684b4a39c3eccfbeaacb154f332a58c0f3f3e9a737433110724ca703f3d7b183480e2b0f4a072857f6df602a17beb9a390ab1459cf6290
+  languageName: node
+  linkType: hard
+
 "@parcel/core@npm:2.14.0, @parcel/core@npm:^2.13.1, @parcel/core@npm:^2.14.0":
   version: 2.14.0
   resolution: "@parcel/core@npm:2.14.0"
@@ -4767,6 +4782,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/packager-webextension@npm:2.14.0":
+  version: 2.14.0
+  resolution: "@parcel/packager-webextension@npm:2.14.0"
+  dependencies:
+    "@parcel/plugin": "npm:2.14.0"
+    "@parcel/utils": "npm:2.14.0"
+    nullthrows: "npm:^1.1.1"
+  checksum: 10c0/85b893868b7bfa9db350112de2e5736dcdb303cb07bd4269ce7c75d5f38b83e999f38fb518e7871dd691c696011463fc67a90ab05b561f2636c6510d93c9cf96
+  languageName: node
+  linkType: hard
+
 "@parcel/plugin@npm:2.14.0, @parcel/plugin@npm:^2.0.0, @parcel/plugin@npm:^2.10.2, @parcel/plugin@npm:^2.14.0":
   version: 2.14.0
   resolution: "@parcel/plugin@npm:2.14.0"
@@ -4903,6 +4929,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/runtime-webextension@npm:2.14.0":
+  version: 2.14.0
+  resolution: "@parcel/runtime-webextension@npm:2.14.0"
+  dependencies:
+    "@parcel/plugin": "npm:2.14.0"
+    "@parcel/utils": "npm:2.14.0"
+    nullthrows: "npm:^1.1.1"
+  checksum: 10c0/19a26d2054b6d8acf0ef5a7e793bc9a1231370607cf691bacc54ede5859fe2a25e61915d175718eb8b0ce279d496ab8cde94a1e8e798ee2a199f06a23b1f653e
+  languageName: node
+  linkType: hard
+
 "@parcel/rust@npm:2.14.0":
   version: 2.14.0
   resolution: "@parcel/rust@npm:2.14.0"
@@ -5156,6 +5193,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/transformer-webextension@npm:2.14.0":
+  version: 2.14.0
+  resolution: "@parcel/transformer-webextension@npm:2.14.0"
+  dependencies:
+    "@mischnic/json-sourcemap": "npm:^0.1.0"
+    "@parcel/diagnostic": "npm:2.14.0"
+    "@parcel/plugin": "npm:2.14.0"
+    "@parcel/utils": "npm:2.14.0"
+    content-security-policy-parser: "npm:^0.6.0"
+  checksum: 10c0/b83c02346da27b0a4b5ec22a9d304724c41fe576f3c6b9ebe43e7c0d40ddf6dc80dbb9ca6086d97f4301181eb516e6bbfb98b166195325b8a223e83637769f41
+  languageName: node
+  linkType: hard
+
 "@parcel/ts-utils@npm:2.14.0":
   version: 2.14.0
   resolution: "@parcel/ts-utils@npm:2.14.0"
@@ -14859,6 +14909,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"content-security-policy-parser@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "content-security-policy-parser@npm:0.6.0"
+  checksum: 10c0/f494e69020e2320179eab47ad2cdafb09752ed63ca4fb5445071381e392d19edd110c0c3ec43f135d27c34b49dbab851b7fcf188dd2ba30cacd6e1107b15b674
+  languageName: node
+  linkType: hard
+
 "content-type@npm:~1.0.4, content-type@npm:~1.0.5":
   version: 1.0.5
   resolution: "content-type@npm:1.0.5"
@@ -30386,6 +30443,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-macro-chrome-plugin@workspace:packages/dev/style-macro-chrome-plugin":
+  version: 0.0.0-use.local
+  resolution: "style-macro-chrome-plugin@workspace:packages/dev/style-macro-chrome-plugin"
+  dependencies:
+    "@parcel/config-default": "npm:^2.14.0"
+    "@parcel/config-webextension": "npm:^2.14.0"
+    parcel: "npm:^2.14.0"
+  languageName: unknown
+  linkType: soft
+
 "style-to-object@npm:^0.3.0":
   version: 0.3.0
   resolution: "style-to-object@npm:0.3.0"

From 7d8b45369bc01e1988c1aac58df8be7274344ebc Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 27 May 2025 12:02:29 +1000
Subject: [PATCH 02/15] add parcel patch

---
 ...el-transformer-js-npm-2.14.0-9521af387e.patch | 16 ++++++++++++++++
 package.json                                     |  5 ++++-
 .../dev/style-macro-chrome-plugin/package.json   |  1 +
 yarn.lock                                        |  3 ++-
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch

diff --git a/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch b/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch
new file mode 100644
index 00000000000..2be536cf585
--- /dev/null
+++ b/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch
@@ -0,0 +1,16 @@
+diff --git a/lib/JSTransformer.js b/lib/JSTransformer.js
+index 1e0991fc8f9c231b70eefd7e177119a06162eeca..e5be5a0901ebc97cbbbb7bc0c774787de36fa2b5 100644
+--- a/lib/JSTransformer.js
++++ b/lib/JSTransformer.js
+@@ -446,6 +446,11 @@ var _default = exports.default = new (_plugin().Transformer)({
+                   specifierType: 'esm'
+                 });
+               },
++              loc: {
++                filePath: asset.filePath,
++                line: loc.line,
++                col: loc.col
++              },
+               invalidateOnFileChange(filePath) {
+                 asset.invalidateOnFileChange(filePath);
+               },
diff --git a/package.json b/package.json
index ece844c7a4f..a66478f7398 100644
--- a/package.json
+++ b/package.json
@@ -222,6 +222,7 @@
     "@babel/traverse": "7.24.1",
     "@babel/types": "7.24.0",
     "@parcel/config-webextension": "2.14.0",
+    "@parcel/transformer-js": "2.14.0",
     "postcss": "8.4.24",
     "postcss-custom-properties": "13.2.0",
     "postcss-import": "15.1.0",
@@ -239,7 +240,9 @@
     "@types/node@npm:>= 8": "^22",
     "micromark-extension-mdxjs": "patch:micromark-extension-mdxjs@npm%3A1.0.0#~/.yarn/patches/micromark-extension-mdxjs-npm-1.0.0-d2b6b69e4a.patch",
     "remark-mdx": "patch:remark-mdx@npm%3A2.0.0-rc.2#~/.yarn/patches/remark-mdx-npm-2.0.0-rc.2-7a71234e1f.patch",
-    "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch"
+    "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch",
+    "@parcel/transformer-js@npm:2.14.0": "patch:@parcel/transformer-js@npm%3A2.14.0#~/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch",
+    "@parcel/transformer-js@npm:^2.13.1": "patch:@parcel/transformer-js@npm%3A2.14.0#~/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch"
   },
   "@parcel/transformer-css": {
     "cssModules": {
diff --git a/packages/dev/style-macro-chrome-plugin/package.json b/packages/dev/style-macro-chrome-plugin/package.json
index 2e0ecb56b2f..cffb9921032 100644
--- a/packages/dev/style-macro-chrome-plugin/package.json
+++ b/packages/dev/style-macro-chrome-plugin/package.json
@@ -9,6 +9,7 @@
   "devDependencies": {
     "@parcel/config-default": "^2.14.0",
     "@parcel/config-webextension": "^2.14.0",
+    "@parcel/core": "^2.14.0",
     "parcel": "^2.14.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index a833a0a3fcf..7ddce244347 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5041,7 +5041,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@parcel/transformer-js@npm:2.14.0, @parcel/transformer-js@npm:^2.13.1":
+"@parcel/transformer-js@npm:2.14.0":
   version: 2.14.0
   resolution: "@parcel/transformer-js@npm:2.14.0"
   dependencies:
@@ -30449,6 +30449,7 @@ __metadata:
   dependencies:
     "@parcel/config-default": "npm:^2.14.0"
     "@parcel/config-webextension": "npm:^2.14.0"
+    "@parcel/core": "npm:^2.14.0"
     parcel: "npm:^2.14.0"
   languageName: unknown
   linkType: soft

From 3266c18cd722b03f1e8d8a8e0b2f61e457ff4313 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 27 May 2025 14:12:11 +1000
Subject: [PATCH 03/15] small fixes

---
 eslint.config.mjs                                          | 5 +++++
 packages/@react-spectrum/s2/chromatic/CardView.stories.tsx | 2 +-
 packages/@react-spectrum/s2/stories/CardView.stories.tsx   | 6 +++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 7a94bf740f3..11a0df3af63 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -497,4 +497,9 @@ export default [{
     rules: {
         "react/react-in-jsx-scope": OFF,
     },
+}, {
+    files: ["packages/dev/style-macro-chrome-plugin/**"],
+    env: {
+        webextensions: true
+    }
 }];
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx b/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx
index c8e89b63397..218d90a5f8b 100644
--- a/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx
@@ -41,7 +41,7 @@ const cardViewStyles = style({
   }
 });
 
-export const Empty = (args: CardViewProps<any>, {viewMode}) => {
+export const Empty = (args: CardViewProps<any>, {viewMode} = {viewMode: ''}) => {
   return (
     <CardView
       aria-label="Assets"
diff --git a/packages/@react-spectrum/s2/stories/CardView.stories.tsx b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
index 3cba3a49c72..8719683fd32 100644
--- a/packages/@react-spectrum/s2/stories/CardView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
@@ -101,7 +101,7 @@ function PhotoCard({item, layout}: {item: Item, layout: string}) {
   );
 }
 
-export const Example = (args: CardViewProps<any>, {viewMode}) => {
+export const Example = (args: CardViewProps<any>, {viewMode} = {viewMode: ''}) => {
   let list = useAsyncList<Item, number | null>({
     async load({signal, cursor, items}) {
       let page = cursor || 1;
@@ -157,7 +157,7 @@ Example.args = {
   selectionMode: 'multiple'
 };
 
-export const Empty = (args: CardViewProps<any>, {viewMode}) => {
+export const Empty = (args: CardViewProps<any>, {viewMode} = {viewMode: ''}) => {
   return (
     <CardView
       aria-label="Assets"
@@ -202,7 +202,7 @@ function TopicCard({topic}: {topic: Topic}) {
   );
 }
 
-export const CollectionCards = (args: CardViewProps<any>, {viewMode}) => {
+export const CollectionCards = (args: CardViewProps<any>, {viewMode} = {viewMode: ''}) => {
   let list = useAsyncList<Topic, number | null>({
     async load({signal, cursor}) {
       let page = cursor || 1;

From 8e4f8eef963d052d402af17c9193bf1032e5964a Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 27 May 2025 15:48:06 +1000
Subject: [PATCH 04/15] fix mergeStyles

---
 eslint.config.mjs                               |  7 +++++--
 packages/@react-spectrum/s2/style/runtime.ts    | 15 +++++++++++----
 .../@react-spectrum/s2/style/style-macro.ts     | 17 +++++++++++++----
 .../dev/style-macro-chrome-plugin/package.json  | 13 +++++++++++--
 .../src/content-script.js                       | 13 +++++++++++--
 .../style-macro-chrome-plugin/src/devtool.js    |  8 ++++----
 6 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 11a0df3af63..d43d06d328d 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -499,7 +499,10 @@ export default [{
     },
 }, {
     files: ["packages/dev/style-macro-chrome-plugin/**"],
-    env: {
-        webextensions: true
+    languageOptions: {
+        globals: {
+            ...globals.webextensions,
+            ...globals.browser
+        }
     }
 }];
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/style/runtime.ts b/packages/@react-spectrum/s2/style/runtime.ts
index 5b567e2ab56..9bbbfc982ff 100644
--- a/packages/@react-spectrum/s2/style/runtime.ts
+++ b/packages/@react-spectrum/s2/style/runtime.ts
@@ -39,16 +39,23 @@ import {StyleString} from './types';
 export function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString {
   let definedStyles = styles.filter(Boolean) as StyleString[];
   if (definedStyles.length === 1) {
-    return definedStyles[0];
+    let first = definedStyles[0];
+    if (typeof first !== 'string') {
+      // static macro has a toString method so that we generate the style macro map for the entry
+      // it's automatically called in other places, but for our merging, we have to call it ourselves
+      return (first as StyleString).toString() as StyleString;
+    }
+    return first;
   }
 
-  let map = new Map();
+  let map = new Map<string, string>();
   for (let style of definedStyles) {
-    for (let [k, v] of parse(style)) {
+    // must call toString here for the static macro
+    for (let [k, v] of parse(style.toString())) {
       map.set(k, v);
     }
   }
-  
+
   let res = '';
   for (let value of map.values()) {
     res += value;
diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index 1bfcc3124e7..2dbd23e1322 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -388,19 +388,26 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       });
     }
 
+    // bug here, multiple calls to style may collide
+    // @ts-ignore
     let loc = this.loc.filePath + ':' + this.loc.line + ':' + this.loc.col;
     if (isStatic) {
       let id = toBase62(hash(className));
       className += ` -macro$${id}`;
-      return {toString: new Function(`(globalThis.__macros ??= {})[${JSON.stringify(id)}] = ${JSON.stringify({loc, style})}; return ${JSON.stringify(className)}`)};
+      return {toString: new Function(`
+        (globalThis.__macros ??= {})[${JSON.stringify(id)}] = ${JSON.stringify({loc, style})};
+        // console.log('static macro ${JSON.stringify(className)}');
+        return ${JSON.stringify(className)};
+      `)};
     }
 
     js += 'let hash = 5381;for (let i = 0; i < rules.length; i++) { hash = ((hash << 5) + hash) + rules.charCodeAt(i) >>> 0; }\n';
     js += 'rules += " -macro$" + hash.toString(36);\n';
+    // js += `console.log('dynamic macro', hash.toString(36), currentRules);\n`;
     js += `(globalThis.__macros ??= {})[hash.toString(36)] = {loc: ${JSON.stringify(loc)}, style: currentRules};\n`;
     js += 'window.postMessage("update-macros", "*");\n';
     js += 'return rules;';
-    console.log(js)
+    // console.log(js)
     if (allowedOverrides) {
       return new Function('props', 'overrides', js) as any;
     }
@@ -649,7 +656,7 @@ interface Rule {
   toJS(allowedOverridesSet: Set<string>, indent?: string): string
 }
 
-let conditionStack = [];
+let conditionStack: string[] = [];
 
 /** A CSS style rule. */
 class StyleRule implements Rule {
@@ -657,8 +664,10 @@ class StyleRule implements Rule {
   pseudos: string;
   property: string;
   value: string;
+  themeProperty: string | undefined;
+  themeValue: Value | undefined;
 
-  constructor(className: string, property: string, value: string, themeProperty, themeValue) {
+  constructor(className: string, property: string, value: string, themeProperty: string, themeValue) {
     this.className = className;
     this.pseudos = '';
     this.property = property;
diff --git a/packages/dev/style-macro-chrome-plugin/package.json b/packages/dev/style-macro-chrome-plugin/package.json
index cffb9921032..d12a1966d24 100644
--- a/packages/dev/style-macro-chrome-plugin/package.json
+++ b/packages/dev/style-macro-chrome-plugin/package.json
@@ -1,7 +1,6 @@
 {
   "name": "style-macro-chrome-plugin",
-  "version": "0.0.1",
-  "private": true,
+  "version": "0.1.0",
   "scripts": {
     "start": "parcel watch src/manifest.json --host localhost --config .parcelrc",
     "build": "parcel build src/manifest.json --config .parcelrc"
@@ -11,5 +10,15 @@
     "@parcel/config-webextension": "^2.14.0",
     "@parcel/core": "^2.14.0",
     "parcel": "^2.14.0"
+  },
+  "rsp": {
+    "type": "cli"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }
diff --git a/packages/dev/style-macro-chrome-plugin/src/content-script.js b/packages/dev/style-macro-chrome-plugin/src/content-script.js
index fd78eb00e33..c32edfbe61f 100644
--- a/packages/dev/style-macro-chrome-plugin/src/content-script.js
+++ b/packages/dev/style-macro-chrome-plugin/src/content-script.js
@@ -1,10 +1,16 @@
-window.addEventListener('message', function(event) {
+
+if (window.__macrosLoaded) {
+  return;
+}
+window.__macrosLoaded = true;
+
+window.addEventListener('message', function (event) {
   // Only accept messages from the same frame
   if (event.source !== window) {
     return;
   }
 
-  console.log(event)
+  // console.log(event)
   var message = event.data;
 
   // Only accept messages that we know are ours. Note that this is not foolproof
@@ -12,6 +18,9 @@ window.addEventListener('message', function(event) {
   if (message !== 'update-macros') {
     return;
   }
+  // if this script is run multiple times on the page, then only handle it once
+  event.stopImmediatePropagation();
+  event.stopPropagation();
 
   chrome.runtime.sendMessage(message);
 });
diff --git a/packages/dev/style-macro-chrome-plugin/src/devtool.js b/packages/dev/style-macro-chrome-plugin/src/devtool.js
index 77365e42986..e8816567a7f 100644
--- a/packages/dev/style-macro-chrome-plugin/src/devtool.js
+++ b/packages/dev/style-macro-chrome-plugin/src/devtool.js
@@ -9,13 +9,13 @@ let injectScript = () => {
 };
 
 injectScript();
-chrome.tabs.onUpdated.addListener((tabId) => {
-  if (tabId === chrome.devtools.inspectedWindow.tabId) {
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (tabId === chrome.devtools.inspectedWindow.tabId && changeInfo.status === 'complete' && tab.active) {
     injectScript();
   }
-})
+});
 
-chrome.devtools.panels.elements.createSidebarPane("Style Macros", (sidebar) => {
+chrome.devtools.panels.elements.createSidebarPane('Style Macros', (sidebar) => {
   sidebar.setObject({});
   let update = () => {
     chrome.devtools.inspectedWindow.eval('$0.getAttribute("class")', async (className) => {

From af59e2ec1daece111bb51eecaceb064dab9cbef3 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 3 Jun 2025 13:42:28 +1000
Subject: [PATCH 05/15] Add README so people know how to develop this extension

---
 .../dev/style-macro-chrome-plugin/README.md   | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 packages/dev/style-macro-chrome-plugin/README.md

diff --git a/packages/dev/style-macro-chrome-plugin/README.md b/packages/dev/style-macro-chrome-plugin/README.md
new file mode 100644
index 00000000000..5e363b5cc1c
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/README.md
@@ -0,0 +1,28 @@
+# style-macro-chrome-plugin
+
+This is a chrome plugin to assist in debugging the styles applied by our Style Macro.
+
+## Local development
+
+From the root of our monopackage, run
+
+```
+yarn
+yarn workspace style-macro-chrome-plugin start
+```
+
+This will create a dist directory in the directory `packages/dev/style-macro-chrome-plugin` which will update anytime the code changes and results in a rebuild.
+
+Next, open Chrome and go to [chrome://extensions/](chrome://extensions/).
+
+Load an unpacked extension, it's a button in the top left, and navigate to the dist directory.
+
+The extension is now registered in Chrome and you can go to storybook or docs, wherever you are working.
+
+Inspect an element on the page to open dev tools and go to the Style Macro panel.
+
+## Troubleshooting
+
+If the panel isn't updating with styles, try closing the dev tools and reopening it.
+
+If the extension doesn't appear to have the latest code, try closing the dev tools and reopening it.

From 85e70d2b6b94a4aa91c3063d81195587cd166895 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 3 Jun 2025 16:03:32 +1000
Subject: [PATCH 06/15] add todos, fix tests, fix lint

---
 packages/@react-spectrum/s2/src/Button.tsx    |  2 +-
 .../s2/style/__tests__/mergeStyles.test.js    |  8 +-
 .../s2/style/__tests__/style-macro.test.js    | 85 +++++++++++++------
 .../@react-spectrum/s2/style/style-macro.ts   | 11 ++-
 .../dev/style-macro-chrome-plugin/README.md   | 12 +++
 5 files changed, 83 insertions(+), 35 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index 0e25f55adc0..58289d79588 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -347,7 +347,7 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
         isStaticColor: !!staticColor
       }, props.styles)}>
       {(renderProps) => (<>
-        {variant === 'genai' || variant === 'premium' 
+        {variant === 'genai' || variant === 'premium'
           ? (
             <span
               className={gradient({
diff --git a/packages/@react-spectrum/s2/style/__tests__/mergeStyles.test.js b/packages/@react-spectrum/s2/style/__tests__/mergeStyles.test.js
index 00376090225..3f2da3a4b99 100644
--- a/packages/@react-spectrum/s2/style/__tests__/mergeStyles.test.js
+++ b/packages/@react-spectrum/s2/style/__tests__/mergeStyles.test.js
@@ -13,13 +13,17 @@
 import {mergeStyles} from '../runtime';
 import {style} from '../spectrum-theme';
 
+function stripMacro(css) {
+  return css.replaceAll(/-macro\$[0-9a-zA-Z]{6}[ ]?/gi, '');
+}
+
 describe('mergeStyles', () => {
   it('should merge styles', () => {
     let a = style({backgroundColor: 'red-1000', color: 'pink-100'});
     let b = style({fontSize: 'body-xs', backgroundColor: 'gray-50'});
     let expected = style({backgroundColor: 'gray-50', color: 'pink-100', fontSize: 'body-xs'});
     let merged = mergeStyles(a, b);
-    expect(merged).toBe(expected);
+    expect(stripMacro(merged)).toBe(stripMacro(expected.toString()));
   });
 
   it('should merge with arbitrary values', () => {
@@ -27,6 +31,6 @@ describe('mergeStyles', () => {
     let b = style({fontSize: '[15px]', backgroundColor: 'gray-50'});
     let expected = style({backgroundColor: 'gray-50', color: '[hotpink]', fontSize: '[15px]'});
     let merged = mergeStyles(a, b);
-    expect(merged).toBe(expected);
+    expect(stripMacro(merged)).toBe(stripMacro(expected.toString()));
   });
 });
diff --git a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
index 1fa22b97fdf..9332e16d65a 100644
--- a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
+++ b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
@@ -22,7 +22,8 @@ function testStyle(...args) {
     },
     args
   );
-  return {css, js};
+
+  return {css, js: typeof js === 'function' ? js : js.toString()};
 }
 
 describe('style-macro', () => {
@@ -55,7 +56,7 @@ describe('style-macro', () => {
 
       "
     `);
-    expect(js).toMatchInlineSnapshot('" Jbs9 Jbpv9"');
+    expect(js).toMatchInlineSnapshot('" Jbs9 Jbpv9 -macro$M74Bxe"');
   });
 
   it('should support self references', () => {
@@ -118,7 +119,7 @@ describe('style-macro', () => {
     `);
 
     expect(js).toMatchInlineSnapshot(
-      '" _kc9 hc9 mCPFGYc9 lc9 SMBFGYc9 Rv9 ZjUQgKd9 -m_-mc9 -S_-Sv9"'
+      '" _kc9 hc9 mCPFGYc9 lc9 SMBFGYc9 Rv9 ZjUQgKd9 -m_-mc9 -S_-Sv9 -macro$wNXlmc"'
     );
   });
 
@@ -136,9 +137,13 @@ describe('style-macro', () => {
       color: 'green-400'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gw9 pg9"');
-    expect(overrides).toMatchInlineSnapshot('" g8tmWqb9 pHJ3AUd9"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb9 pg9"');
+    expect(js()).toMatchInlineSnapshot('"  gw9 pg9 -macro$7ucvu4"');
+    expect(overrides).toMatchInlineSnapshot(
+      '" g8tmWqb9 pHJ3AUd9 -macro$sFRgme"'
+    );
+    expect(js({}, overrides)).toMatchInlineSnapshot(
+      '"  g8tmWqb9 -macro$sFRgme pg9 -macro$nt261r"'
+    );
   });
 
   it('should support allowed overrides for properties that expand into multiple', () => {
@@ -153,9 +158,13 @@ describe('style-macro', () => {
       translateX: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B9 __Ya9"');
-    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D9 __Ya9"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D9 __Ya9"');
+    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B9 __Ya9 -macro$hzmozh"');
+    expect(overrides).toMatchInlineSnapshot(
+      '" -_7PloMd-D9 __Ya9 -macro$f5PRU"'
+    );
+    expect(js({}, overrides)).toMatchInlineSnapshot(
+      '"  -_7PloMd-D9 __Ya9 -macro$f5PRU -macro$1vw5vro"'
+    );
   });
 
   it('should support allowed overrides for shorthands', () => {
@@ -170,9 +179,11 @@ describe('style-macro', () => {
       padding: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  Tk9 Qk9 Sk9 Rk9"');
-    expect(overrides).toMatchInlineSnapshot('" Tm9 Qm9 Sm9 Rm9"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm9 Qm9 Sm9 Rm9"');
+    expect(js()).toMatchInlineSnapshot('"  Tk9 Qk9 Sk9 Rk9 -macro$1jmmjz3"');
+    expect(overrides).toMatchInlineSnapshot('" Tm9 Qm9 Sm9 Rm9 -macro$hWyGab"');
+    expect(js({}, overrides)).toMatchInlineSnapshot(
+      '"  Tm9 Qm9 Sm9 Rm9 -macro$hWyGab -macro$vku4y4"'
+    );
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -187,9 +198,11 @@ describe('style-macro', () => {
       minWidth: 32
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gE9"');
-    expect(overrides).toMatchInlineSnapshot('" Nk9"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk9 gE9"');
+    expect(js()).toMatchInlineSnapshot('"  gE9 -macro$2v7u7e"');
+    expect(overrides).toMatchInlineSnapshot('" Nk9 -macro$hsZrrc"');
+    expect(js({}, overrides)).toMatchInlineSnapshot(
+      '"  Nk9 -macro$hsZrrc gE9 -macro$emy58b"'
+    );
   });
 
   it('should support runtime conditions', () => {
@@ -243,9 +256,13 @@ describe('style-macro', () => {
       "
     `);
 
-    expect(js({})).toMatchInlineSnapshot('"  gH9 pt9"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF9 po9"');
-    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE9 pm9"');
+    expect(js({})).toMatchInlineSnapshot('"  gH9 pt9 -macro$1cgd07e"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot(
+      '"  gF9 po9 -macro$1b5rdyb"'
+    );
+    expect(js({isPressed: true})).toMatchInlineSnapshot(
+      '"  gE9 pm9 -macro$1aigku8"'
+    );
   });
 
   it('should support nested runtime conditions', () => {
@@ -286,11 +303,15 @@ describe('style-macro', () => {
 
       "
     `);
-    expect(js({})).toMatchInlineSnapshot('"  gH9"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF9"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h9"');
+    expect(js({})).toMatchInlineSnapshot('"  gH9 -macro$2v7ua5"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot(
+      '"  gF9 -macro$2v7u8b"'
+    );
+    expect(js({isSelected: true})).toMatchInlineSnapshot(
+      '"  g_h9 -macro$nl39vw"'
+    );
     expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot(
-      '"  g39"'
+      '"  g39 -macro$2v7tqw"'
     );
   });
 
@@ -305,9 +326,15 @@ describe('style-macro', () => {
       }
     });
 
-    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY9"');
-    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe9"');
-    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw9"');
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot(
+      '"  gY9 -macro$2v7upq"'
+    );
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot(
+      '"  gjQquMe9 -macro$1xbmgag"'
+    );
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot(
+      '"  gw9 -macro$2v7vh8"'
+    );
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -341,8 +368,10 @@ describe('style-macro', () => {
       "
     `);
 
-    expect(js({})).toMatchInlineSnapshot('"  plb9"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple9"');
+    expect(js({})).toMatchInlineSnapshot('"  plb9 -macro$nlai7w"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot(
+      '"  ple9 -macro$nlaian"'
+    );
   });
 
   it('should expand shorthand properties to longhands', () => {
@@ -350,7 +379,7 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" Th9 Qh9 Sh9 Rh9"');
+    expect(js).toMatchInlineSnapshot('" Th9 Qh9 Sh9 Rh9 -macro$tgBsxe"');
     expect(css).toMatchInlineSnapshot(`
       "@layer _.a;
 
diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index 2dbd23e1322..73636d89141 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -389,9 +389,9 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     }
 
     // bug here, multiple calls to style may collide
-    // @ts-ignore
-    let loc = this.loc.filePath + ':' + this.loc.line + ':' + this.loc.col;
-    if (isStatic) {
+    // @ts-expect-error
+    let loc = this?.loc?.filePath + ':' + this?.loc?.line + ':' + this?.loc?.col;
+    if (isStatic && process.env.NODE_ENV !== 'production') {
       let id = toBase62(hash(className));
       className += ` -macro$${id}`;
       return {toString: new Function(`
@@ -404,7 +404,10 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     js += 'let hash = 5381;for (let i = 0; i < rules.length; i++) { hash = ((hash << 5) + hash) + rules.charCodeAt(i) >>> 0; }\n';
     js += 'rules += " -macro$" + hash.toString(36);\n';
     // js += `console.log('dynamic macro', hash.toString(36), currentRules);\n`;
-    js += `(globalThis.__macros ??= {})[hash.toString(36)] = {loc: ${JSON.stringify(loc)}, style: currentRules};\n`;
+    // TODO: Why can't i move this inside the string? that way people can strip out the macro data in production?
+    if (process.env.NODE_ENV !== 'production') {
+      js += `(globalThis.__macros ??= {})[hash.toString(36)] = {loc: ${JSON.stringify(loc)}, style: currentRules};\n`;
+    }
     js += 'window.postMessage("update-macros", "*");\n';
     js += 'return rules;';
     // console.log(js)
diff --git a/packages/dev/style-macro-chrome-plugin/README.md b/packages/dev/style-macro-chrome-plugin/README.md
index 5e363b5cc1c..2e554386453 100644
--- a/packages/dev/style-macro-chrome-plugin/README.md
+++ b/packages/dev/style-macro-chrome-plugin/README.md
@@ -26,3 +26,15 @@ Inspect an element on the page to open dev tools and go to the Style Macro panel
 If the panel isn't updating with styles, try closing the dev tools and reopening it.
 
 If the extension doesn't appear to have the latest code, try closing the dev tools and reopening it.
+
+## ToDos
+
+- [ ] Work with RSC
+- [ ] Would be pretty cool if we could match a style condition to trigger it, like hover
+- [ ] Eventually add to https://github.com/astahmer/atomic-css-devtools ??
+- [ ] Our own UI
+- [ ] Filtering
+- [ ] Resolve css variables inline
+- [ ] Link to file on the side instead of grouping by filename?
+- [ ] Add classname that is applying style?
+- [ ] Work in MFE's

From 3adab93bf1b6ee4a19338076ddb90baf52239551 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 3 Jun 2025 16:04:59 +1000
Subject: [PATCH 07/15] fix dev logic

---
 packages/@react-spectrum/s2/style/style-macro.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index 73636d89141..1c302f88f03 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -401,14 +401,14 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       `)};
     }
 
-    js += 'let hash = 5381;for (let i = 0; i < rules.length; i++) { hash = ((hash << 5) + hash) + rules.charCodeAt(i) >>> 0; }\n';
-    js += 'rules += " -macro$" + hash.toString(36);\n';
-    // js += `console.log('dynamic macro', hash.toString(36), currentRules);\n`;
     // TODO: Why can't i move this inside the string? that way people can strip out the macro data in production?
     if (process.env.NODE_ENV !== 'production') {
+      js += 'let hash = 5381;for (let i = 0; i < rules.length; i++) { hash = ((hash << 5) + hash) + rules.charCodeAt(i) >>> 0; }\n';
+      js += 'rules += " -macro$" + hash.toString(36);\n';
+      // js += `console.log('dynamic macro', hash.toString(36), currentRules);\n`;
       js += `(globalThis.__macros ??= {})[hash.toString(36)] = {loc: ${JSON.stringify(loc)}, style: currentRules};\n`;
+      js += 'window.postMessage("update-macros", "*");\n';
     }
-    js += 'window.postMessage("update-macros", "*");\n';
     js += 'return rules;';
     // console.log(js)
     if (allowedOverrides) {

From 690037acebe4f5a792364580bf3e887d77fcde93 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 3 Jun 2025 16:28:20 +1000
Subject: [PATCH 08/15] add todo

---
 packages/dev/style-macro-chrome-plugin/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/dev/style-macro-chrome-plugin/README.md b/packages/dev/style-macro-chrome-plugin/README.md
index 2e554386453..9e4a943249a 100644
--- a/packages/dev/style-macro-chrome-plugin/README.md
+++ b/packages/dev/style-macro-chrome-plugin/README.md
@@ -38,3 +38,4 @@ If the extension doesn't appear to have the latest code, try closing the dev too
 - [ ] Link to file on the side instead of grouping by filename?
 - [ ] Add classname that is applying style?
 - [ ] Work in MFE's
+- [ ] Don't memory leak the global object

From 5a89555790afbcf2b44f228d7168d2d41151e7a0 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Wed, 4 Jun 2025 13:54:50 +1000
Subject: [PATCH 09/15] use static method to inject script

---
 packages/dev/style-macro-chrome-plugin/README.md  |  2 ++
 .../dev/style-macro-chrome-plugin/src/devtool.js  | 15 ---------------
 .../style-macro-chrome-plugin/src/manifest.json   |  4 +++-
 3 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/packages/dev/style-macro-chrome-plugin/README.md b/packages/dev/style-macro-chrome-plugin/README.md
index 9e4a943249a..b58aa54e91f 100644
--- a/packages/dev/style-macro-chrome-plugin/README.md
+++ b/packages/dev/style-macro-chrome-plugin/README.md
@@ -27,6 +27,8 @@ If the panel isn't updating with styles, try closing the dev tools and reopening
 
 If the extension doesn't appear to have the latest code, try closing the dev tools and reopening it.
 
+If every tab you have open (or many of them) reload when you make local changes to the extension, then go into the extension settings and limit it to `localhost` or something appropriate.
+
 ## ToDos
 
 - [ ] Work with RSC
diff --git a/packages/dev/style-macro-chrome-plugin/src/devtool.js b/packages/dev/style-macro-chrome-plugin/src/devtool.js
index e8816567a7f..eeff5601b62 100644
--- a/packages/dev/style-macro-chrome-plugin/src/devtool.js
+++ b/packages/dev/style-macro-chrome-plugin/src/devtool.js
@@ -1,19 +1,4 @@
-let injectScript = () => {
-  chrome.scripting.executeScript({
-    target: {
-      tabId: chrome.devtools.inspectedWindow.tabId,
-      allFrames: true
-    },
-    files: chrome.runtime.getManifest().content_scripts[0].js
-  });
-};
 
-injectScript();
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-  if (tabId === chrome.devtools.inspectedWindow.tabId && changeInfo.status === 'complete' && tab.active) {
-    injectScript();
-  }
-});
 
 chrome.devtools.panels.elements.createSidebarPane('Style Macros', (sidebar) => {
   sidebar.setObject({});
diff --git a/packages/dev/style-macro-chrome-plugin/src/manifest.json b/packages/dev/style-macro-chrome-plugin/src/manifest.json
index 52294672ff1..770326cd24b 100644
--- a/packages/dev/style-macro-chrome-plugin/src/manifest.json
+++ b/packages/dev/style-macro-chrome-plugin/src/manifest.json
@@ -5,6 +5,8 @@
   "devtools_page": "devtools.html",
   "content_scripts": [{
     "matches": ["*://*/*"],
-    "js": ["content-script.js"]
+    "js": ["content-script.js"],
+    "all_frames": true,
+    "run_at": "document_start"
   }]
 }

From a68dbfd8e61fded6dded1b3cb4f7c6c2111b2942 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Thu, 5 Jun 2025 13:01:54 +1000
Subject: [PATCH 10/15] fix the patch

---
 package.json                                  |  4 +---
 .../style-macro-chrome-plugin/package.json    |  1 +
 yarn.lock                                     | 22 +++++++++++++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index a66478f7398..5560b459421 100644
--- a/package.json
+++ b/package.json
@@ -222,7 +222,6 @@
     "@babel/traverse": "7.24.1",
     "@babel/types": "7.24.0",
     "@parcel/config-webextension": "2.14.0",
-    "@parcel/transformer-js": "2.14.0",
     "postcss": "8.4.24",
     "postcss-custom-properties": "13.2.0",
     "postcss-import": "15.1.0",
@@ -241,8 +240,7 @@
     "micromark-extension-mdxjs": "patch:micromark-extension-mdxjs@npm%3A1.0.0#~/.yarn/patches/micromark-extension-mdxjs-npm-1.0.0-d2b6b69e4a.patch",
     "remark-mdx": "patch:remark-mdx@npm%3A2.0.0-rc.2#~/.yarn/patches/remark-mdx-npm-2.0.0-rc.2-7a71234e1f.patch",
     "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch",
-    "@parcel/transformer-js@npm:2.14.0": "patch:@parcel/transformer-js@npm%3A2.14.0#~/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch",
-    "@parcel/transformer-js@npm:^2.13.1": "patch:@parcel/transformer-js@npm%3A2.14.0#~/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch"
+    "@parcel/transformer-js": "patch:@parcel/transformer-js@npm%3A2.14.0#~/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch"
   },
   "@parcel/transformer-css": {
     "cssModules": {
diff --git a/packages/dev/style-macro-chrome-plugin/package.json b/packages/dev/style-macro-chrome-plugin/package.json
index d12a1966d24..11098f97b87 100644
--- a/packages/dev/style-macro-chrome-plugin/package.json
+++ b/packages/dev/style-macro-chrome-plugin/package.json
@@ -9,6 +9,7 @@
     "@parcel/config-default": "^2.14.0",
     "@parcel/config-webextension": "^2.14.0",
     "@parcel/core": "^2.14.0",
+    "@parcel/transformer-js": "^2.14.0",
     "parcel": "^2.14.0"
   },
   "rsp": {
diff --git a/yarn.lock b/yarn.lock
index 7ddce244347..a604d8bc635 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5062,6 +5062,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/transformer-js@patch:@parcel/transformer-js@npm%3A2.14.0#~/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch":
+  version: 2.14.0
+  resolution: "@parcel/transformer-js@patch:@parcel/transformer-js@npm%3A2.14.0#~/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch::version=2.14.0&hash=773e96"
+  dependencies:
+    "@parcel/diagnostic": "npm:2.14.0"
+    "@parcel/plugin": "npm:2.14.0"
+    "@parcel/rust": "npm:2.14.0"
+    "@parcel/source-map": "npm:^2.1.1"
+    "@parcel/utils": "npm:2.14.0"
+    "@parcel/workers": "npm:2.14.0"
+    "@swc/helpers": "npm:^0.5.0"
+    browserslist: "npm:^4.6.6"
+    nullthrows: "npm:^1.1.1"
+    regenerator-runtime: "npm:^0.14.1"
+    semver: "npm:^7.5.2"
+  peerDependencies:
+    "@parcel/core": ^2.14.0
+  checksum: 10c0/ac714d500c6ceb36290d6605a4de9724bcfc51965f7e496eb279943e73a7d0df5109bdb1dacec03966e5482b64c283e0583066f0272b8a4c860bd76923c55cf1
+  languageName: node
+  linkType: hard
+
 "@parcel/transformer-json@npm:2.14.0":
   version: 2.14.0
   resolution: "@parcel/transformer-json@npm:2.14.0"
@@ -30450,6 +30471,7 @@ __metadata:
     "@parcel/config-default": "npm:^2.14.0"
     "@parcel/config-webextension": "npm:^2.14.0"
     "@parcel/core": "npm:^2.14.0"
+    "@parcel/transformer-js": "npm:^2.14.0"
     parcel: "npm:^2.14.0"
   languageName: unknown
   linkType: soft

From 2bf9d6a7d0d4d9d10f1027f45f68ddd4dde1d65b Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Thu, 5 Jun 2025 13:15:11 +1000
Subject: [PATCH 11/15] I don't think there is a bug here, different states get
 different macro hashes

---
 packages/@react-spectrum/s2/style/style-macro.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index 1c302f88f03..b9a2eb7a216 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -388,7 +388,6 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       });
     }
 
-    // bug here, multiple calls to style may collide
     // @ts-expect-error
     let loc = this?.loc?.filePath + ':' + this?.loc?.line + ':' + this?.loc?.col;
     if (isStatic && process.env.NODE_ENV !== 'production') {

From 237392f24b1812f8cc92376dd61ee75e8ef8cbe8 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Thu, 5 Jun 2025 13:16:33 +1000
Subject: [PATCH 12/15] remove console logs

---
 packages/@react-spectrum/s2/style/style-macro.ts             | 3 ---
 packages/dev/style-macro-chrome-plugin/src/content-script.js | 1 -
 2 files changed, 4 deletions(-)

diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index b9a2eb7a216..db060370eea 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -395,7 +395,6 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       className += ` -macro$${id}`;
       return {toString: new Function(`
         (globalThis.__macros ??= {})[${JSON.stringify(id)}] = ${JSON.stringify({loc, style})};
-        // console.log('static macro ${JSON.stringify(className)}');
         return ${JSON.stringify(className)};
       `)};
     }
@@ -404,12 +403,10 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     if (process.env.NODE_ENV !== 'production') {
       js += 'let hash = 5381;for (let i = 0; i < rules.length; i++) { hash = ((hash << 5) + hash) + rules.charCodeAt(i) >>> 0; }\n';
       js += 'rules += " -macro$" + hash.toString(36);\n';
-      // js += `console.log('dynamic macro', hash.toString(36), currentRules);\n`;
       js += `(globalThis.__macros ??= {})[hash.toString(36)] = {loc: ${JSON.stringify(loc)}, style: currentRules};\n`;
       js += 'window.postMessage("update-macros", "*");\n';
     }
     js += 'return rules;';
-    // console.log(js)
     if (allowedOverrides) {
       return new Function('props', 'overrides', js) as any;
     }
diff --git a/packages/dev/style-macro-chrome-plugin/src/content-script.js b/packages/dev/style-macro-chrome-plugin/src/content-script.js
index c32edfbe61f..7111571a444 100644
--- a/packages/dev/style-macro-chrome-plugin/src/content-script.js
+++ b/packages/dev/style-macro-chrome-plugin/src/content-script.js
@@ -10,7 +10,6 @@ window.addEventListener('message', function (event) {
     return;
   }
 
-  // console.log(event)
   var message = event.data;
 
   // Only accept messages that we know are ours. Note that this is not foolproof

From 2706cd1eb4ab523cdec95064d99cc9f47e96beaf Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Thu, 5 Jun 2025 17:32:05 +1000
Subject: [PATCH 13/15] add extension icon

---
 .../style-macro-chrome-plugin/src/icons/128.png | Bin 0 -> 10103 bytes
 .../style-macro-chrome-plugin/src/icons/16.png  | Bin 0 -> 877 bytes
 .../style-macro-chrome-plugin/src/icons/32.png  | Bin 0 -> 1987 bytes
 .../style-macro-chrome-plugin/src/icons/48.png  | Bin 0 -> 3413 bytes
 .../style-macro-chrome-plugin/src/icons/96.png  | Bin 0 -> 7532 bytes
 .../style-macro-chrome-plugin/src/manifest.json |   9 ++++++++-
 6 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 packages/dev/style-macro-chrome-plugin/src/icons/128.png
 create mode 100644 packages/dev/style-macro-chrome-plugin/src/icons/16.png
 create mode 100644 packages/dev/style-macro-chrome-plugin/src/icons/32.png
 create mode 100644 packages/dev/style-macro-chrome-plugin/src/icons/48.png
 create mode 100644 packages/dev/style-macro-chrome-plugin/src/icons/96.png

diff --git a/packages/dev/style-macro-chrome-plugin/src/icons/128.png b/packages/dev/style-macro-chrome-plugin/src/icons/128.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0a1377e1a933483bdcef461f0c3813bad037c80
GIT binary patch
literal 10103
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
R5a3QaKtV=Tx>C{%@;{S}i6;O6

literal 0
HcmV?d00001

diff --git a/packages/dev/style-macro-chrome-plugin/src/icons/16.png b/packages/dev/style-macro-chrome-plugin/src/icons/16.png
new file mode 100644
index 0000000000000000000000000000000000000000..41a22d0a311ca53a261ed94b5efab5669b7661bf
GIT binary patch
literal 877
zcmV-z1CsoSP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm0004E
z0004E0beK3Qvd)1A4x<(R5*=gl1pqGRTzcOz2iGCk2A4xI!&U6m))oe2?3|bMd2lZ
zRKbQ#Sg=B<VnvbIR7eO|RET9I)CH?9C>vUY3L+}6s7O_Vl*+BBleRJB0ig+FJGL|S
z%$<j4h6Qp!=3o9g-&ve<NIsLBR%Z&|DbtU7aTG`ByBxPfE$mVN_)SUq9f3svz)K~W
z|8na%nSAEuj`6{J$$oHVwd}n9?H57P<vIX#!U$hg+o+^6?&j%_WB{n1{?MfA(WCW#
zc&xgOlb6n`v2E+``pVwY17mHu__%v{*Kr$L_v8~7&NTr*DHPm9KMVk=g)6laTd{oR
ztrz(z-$^}q{JEIPN%@C2Ud5%klQ_0<H~oEe8!G_z4OEXqbzRi;G~Rq|Rw8p#qA@(|
zF-21VpzFKfEz5awe6$^#4deOJVtoY~Xb*n>)3dy1_W62SUcOP`-(0>LUYTET?ZyuF
zs(*TQ^IpJSdddKRCsuC>0FcOWOMK_tnK}T}^|S&2KaD;jZXP-;sw6`E^P;2NTy1KS
zpdQNKuhXGH5F=wMX2TfvxkHQBuXQt4E4ws475+De%}B)UP=-4)>S!WOiy~_!7y|$#
zj!g{!z+_{GQTToY05@|-jQ%iHk7Mr3i?QSS*1&y(1HC_;ct`<&1IuOpzZO)FW6a#f
z<kGcWzgA}x+#0&Nc-xsMOej4KktL8+(p)=uSlTx@Sh?%HaAVP)SuJM(;OjrCm^IQd
zB!;3{Bc2zylEmbmetl#tT9$_+8iZl;;>KUCsUPS49&868co<3tB&GuZBSiVVvf)JG
zze`_utVr4sy7aRhD;tPXqL9{7eiUJ)+4jp#tFDNm*AsUHp~Wc4G|bxmYB!Q;4FG78
z33z2>kOF{6Db{VzTeF<(o*(SD5{n4}0PUugb#0DM-u~EfcANhg3<$K7AVlqnJt8;&
zfH2g4?eIMSNO4bJyR+5sY?q%ub+%okF>Q<=0WXzglF#IxeLAhqPp9M>09<d`L!=wj
z03ZM{^18;eOt4Ie8I`sxXKZ_GH2<)0Az->&UY`9M4&-B%PO#on00000NkvXXu0mjf
D0OFE2

literal 0
HcmV?d00001

diff --git a/packages/dev/style-macro-chrome-plugin/src/icons/32.png b/packages/dev/style-macro-chrome-plugin/src/icons/32.png
new file mode 100644
index 0000000000000000000000000000000000000000..493110735d24a98300418e84e5e0b40093a7e0b5
GIT binary patch
literal 1987
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
VKeINl5ZwR(002ovPDHLkV1k(W%e?>q

literal 0
HcmV?d00001

diff --git a/packages/dev/style-macro-chrome-plugin/src/icons/48.png b/packages/dev/style-macro-chrome-plugin/src/icons/48.png
new file mode 100644
index 0000000000000000000000000000000000000000..6794ef2da835ad9fba232dee798d4443914188a6
GIT binary patch
literal 3413
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

literal 0
HcmV?d00001

diff --git a/packages/dev/style-macro-chrome-plugin/src/icons/96.png b/packages/dev/style-macro-chrome-plugin/src/icons/96.png
new file mode 100644
index 0000000000000000000000000000000000000000..b12d2c4a2f0104c313d0d3186e8e90d552154d85
GIT binary patch
literal 7532
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
CaFT%l

literal 0
HcmV?d00001

diff --git a/packages/dev/style-macro-chrome-plugin/src/manifest.json b/packages/dev/style-macro-chrome-plugin/src/manifest.json
index 770326cd24b..c2cab5a5a2c 100644
--- a/packages/dev/style-macro-chrome-plugin/src/manifest.json
+++ b/packages/dev/style-macro-chrome-plugin/src/manifest.json
@@ -8,5 +8,12 @@
     "js": ["content-script.js"],
     "all_frames": true,
     "run_at": "document_start"
-  }]
+  }],
+  "icons": {
+    "16": "icons/16.png",
+    "32": "icons/32.png",
+    "48": "icons/48.png",
+    "96": "icons/96.png",
+    "128": "icons/128.png"
+  }
 }

From a95b4f64ef507abe339da986e96194009a64dcba Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Mon, 16 Jun 2025 12:59:15 +1000
Subject: [PATCH 14/15] use document idle instead of start to help with tab
 reload

---
 packages/dev/style-macro-chrome-plugin/src/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/style-macro-chrome-plugin/src/manifest.json b/packages/dev/style-macro-chrome-plugin/src/manifest.json
index c2cab5a5a2c..9fce69eb06a 100644
--- a/packages/dev/style-macro-chrome-plugin/src/manifest.json
+++ b/packages/dev/style-macro-chrome-plugin/src/manifest.json
@@ -7,7 +7,7 @@
     "matches": ["*://*/*"],
     "js": ["content-script.js"],
     "all_frames": true,
-    "run_at": "document_start"
+    "run_at": "document_idle"
   }],
   "icons": {
     "16": "icons/16.png",

From 6fe2d0bfd2e6667e4297cced4d4a4cec55b53c6a Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Mon, 16 Jun 2025 13:32:06 +1000
Subject: [PATCH 15/15] fix package.json

---
 package.json | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index b4d19fa79f7..ea5c5239e2d 100644
--- a/package.json
+++ b/package.json
@@ -224,7 +224,7 @@
     "@babel/types": "7.24.0",
     "@parcel/config-webextension": "2.14.0",
     "@parcel/transformer-react-refresh-wrap": "2.14.0",
-    "@parcel/transformer-js": "2.14.0",
+    "@parcel/transformer-js": "patch:@parcel/transformer-js@npm%3A2.14.0#~/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch",
     "@parcel/codeframe": "2.14.0",
     "postcss": "8.4.24",
     "postcss-custom-properties": "13.2.0",
@@ -243,8 +243,7 @@
     "@types/node@npm:>= 8": "^22",
     "micromark-extension-mdxjs": "patch:micromark-extension-mdxjs@npm%3A1.0.0#~/.yarn/patches/micromark-extension-mdxjs-npm-1.0.0-d2b6b69e4a.patch",
     "remark-mdx": "patch:remark-mdx@npm%3A2.0.0-rc.2#~/.yarn/patches/remark-mdx-npm-2.0.0-rc.2-7a71234e1f.patch",
-    "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch",
-    "@parcel/transformer-js": "patch:@parcel/transformer-js@npm%3A2.14.0#~/.yarn/patches/@parcel-transformer-js-npm-2.14.0-9521af387e.patch"
+    "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch"
   },
   "@parcel/transformer-css": {
     "cssModules": {