diff --git a/eslint.config.mjs b/eslint.config.mjs
index 26fc3bde7b9..0e6240f2961 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -501,4 +501,12 @@ export default [{
     rules: {
         "react/react-in-jsx-scope": OFF,
     },
-}];
+}, {
+    files: ["packages/dev/style-macro-chrome-plugin/**"],
+    languageOptions: {
+        globals: {
+            ...globals.webextensions,
+            ...globals.browser
+        }
+    }
+}];
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index 58a1ebc837b..352d589e365 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -1465,7 +1465,7 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T e
       className={renderProps => row({
         ...renderProps,
         ...tableVisualOptions
-      }) + (renderProps.isFocusVisible && ' ' + raw('&:before { content: ""; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: 100%; margin-inline-end: -3px; margin-block-end: 1px;  z-index: 3; background-color: var(--rowFocusIndicatorColor)'))}
+      }) + (renderProps.isFocusVisible ? ' ' + raw('&:before { content: ""; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: 100%; margin-inline-end: -3px; margin-block-end: 1px;  z-index: 3; background-color: var(--rowFocusIndicatorColor)') : '')}
       {...otherProps}>
       {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
         // Not sure what we want to do with this className, in Cell it currently overrides the className that would have been applied.
diff --git a/packages/@react-spectrum/s2/style/__tests__/mergeStyles.test.js b/packages/@react-spectrum/s2/style/__tests__/mergeStyles.test.js
index 00376090225..ae8349a616f 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-static-[0-9a-zA-Z]+/gi, '').replaceAll(/ -macro-dynamic-[0-9a-zA-Z]+/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 10e1be65cb2..4b77a2e97b1 100644
--- a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
+++ b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
@@ -53,9 +53,13 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-wZCJDc {
+        --macro-data: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
-    expect(js).toMatchInlineSnapshot('" Jbs1 Jbpv1"');
+    expect(js).toMatchInlineSnapshot('" Jbs1 Jbpv1 -macro-static-wZCJDc"');
   });
 
   it('should support self references', () => {
@@ -114,10 +118,14 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-KAxwze {
+        --macro-data: {"style":{"borderWidth":2,"paddingX":"edge-to-text","width":"calc(200px - self(borderStartWidth) - self(paddingStart))"},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
 
-    expect(js).toMatchInlineSnapshot('" _kc1 hc1 mCPFGYc1 lc1 SMBFGYc1 Rv1 ZjUQgKd1 -m_-mc1 -S_-Sv1"');
+    expect(js).toMatchInlineSnapshot('" _kc1 hc1 mCPFGYc1 lc1 SMBFGYc1 Rv1 ZjUQgKd1 -m_-mc1 -S_-Sv1 -macro-static-KAxwze"');
   });
 
   it('should support allowed overrides', () => {
@@ -134,9 +142,9 @@ describe('style-macro', () => {
       color: 'green-400'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gw1 pg1"');
-    expect(overrides).toMatchInlineSnapshot('" g8tmWqb1 pHJ3AUd1"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb1 pg1"');
+    expect(js()).toMatchInlineSnapshot('"  gw1 pg1 -macro-dynamic-7opjbw"');
+    expect(overrides).toMatchInlineSnapshot('" g8tmWqb1 pHJ3AUd1 -macro-static-yMXyLd"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb1 pg1 -macro-dynamic-1o9zfzc"');
   });
 
   it('should support allowed overrides for properties that expand into multiple', () => {
@@ -151,9 +159,9 @@ describe('style-macro', () => {
       translateX: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B1 __Ya1"');
-    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D1 __Ya1"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D1 __Ya1"');
+    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B1 __Ya1 -macro-dynamic-1o7pqel"');
+    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D1 __Ya1 -macro-static-38CEHd"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D1 __Ya1 -macro-dynamic-1d9ax0v"');
   });
 
   it('should support allowed overrides for shorthands', () => {
@@ -168,9 +176,9 @@ describe('style-macro', () => {
       padding: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  Tk1 Qk1 Sk1 Rk1"');
-    expect(overrides).toMatchInlineSnapshot('" Tm1 Qm1 Sm1 Rm1"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm1 Qm1 Sm1 Rm1"');
+    expect(js()).toMatchInlineSnapshot('"  Tk1 Qk1 Sk1 Rk1 -macro-dynamic-1awqlq7"');
+    expect(overrides).toMatchInlineSnapshot('" Tm1 Qm1 Sm1 Rm1 -macro-static-For0A"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm1 Qm1 Sm1 Rm1 -macro-dynamic-can4av"');
   });
 
   it('should support allowed overrides for fontSize', () => {
@@ -185,9 +193,9 @@ describe('style-macro', () => {
       fontSize: 'ui-xs'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_6BNtrc-woabcc1 vx1"');
-    expect(overrides).toMatchInlineSnapshot('" -_6BNtrc-a1 vx1"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_6BNtrc-a1 vx1"');
+    expect(js()).toMatchInlineSnapshot('"  -_6BNtrc-woabcc1 vx1 -macro-dynamic-1ingy24"');
+    expect(overrides).toMatchInlineSnapshot('" -_6BNtrc-a1 vx1 -macro-static-ufb6gc"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_6BNtrc-a1 vx1 -macro-dynamic-11qe34u"');
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -202,9 +210,9 @@ describe('style-macro', () => {
       minWidth: 32
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gE1"');
-    expect(overrides).toMatchInlineSnapshot('" Nk1"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk1 gE1"');
+    expect(js()).toMatchInlineSnapshot('"  gE1 -macro-dynamic-2v7u76"');
+    expect(overrides).toMatchInlineSnapshot('" Nk1 -macro-static-9rZrrc"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk1 gE1 -macro-dynamic-y7c1e4"');
   });
 
   it('should support runtime conditions', () => {
@@ -258,9 +266,9 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  gH1 pt1"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF1 po1"');
-    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE1 pm1"');
+    expect(js({})).toMatchInlineSnapshot('"  gH1 pt1 -macro-dynamic-1capnp6"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF1 po1 -macro-dynamic-1b041g3"');
+    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE1 pm1 -macro-dynamic-1act8c0"');
   });
 
   it('should support nested runtime conditions', () => {
@@ -301,10 +309,10 @@ describe('style-macro', () => {
 
 "
 `);
-    expect(js({})).toMatchInlineSnapshot('"  gH1"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF1"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h1"');
-    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g31"');
+    expect(js({})).toMatchInlineSnapshot('"  gH1 -macro-dynamic-2v7u9x"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF1 -macro-dynamic-2v7u83"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h1 -macro-dynamic-nl39vo"');
+    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g31 -macro-dynamic-2v7tqo"');
   });
 
   it('should support variant runtime conditions', () => {
@@ -318,9 +326,9 @@ describe('style-macro', () => {
       }
     });
 
-    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY1"');
-    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe1"');
-    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw1"');
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY1 -macro-dynamic-2v7upi"');
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe1 -macro-dynamic-1xbmga8"');
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw1 -macro-dynamic-2v7vh0"');
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -354,8 +362,8 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  plb1"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple1"');
+    expect(js({})).toMatchInlineSnapshot('"  plb1 -macro-dynamic-nlai7o"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple1 -macro-dynamic-nlaiaf"');
   });
 
   it('should expand shorthand properties to longhands', () => {
@@ -363,7 +371,7 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" Th1 Qh1 Sh1 Rh1"');
+    expect(js).toMatchInlineSnapshot('" Th1 Qh1 Sh1 Rh1 -macro-static-RItMXd"');
     expect(css).toMatchInlineSnapshot(`
 "@layer _.a;
 
@@ -388,6 +396,10 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-RItMXd {
+        --macro-data: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
   });
@@ -406,6 +418,10 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-4lh3d {
+        --macro-data: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
   });
@@ -427,6 +443,10 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-2AU3Wd {
+        --macro-data: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
   });
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 0f43859218f..6e41a5a3231 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`;
       }
     }
 
@@ -375,6 +380,15 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       css += rules.join('\n\n');
       css += '}\n\n';
     }
+    // @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 + loc));
+      css += `.-macro-static-${id} {
+        --macro-data: ${JSON.stringify({style, loc})};
+      }\n\n`;
+      className += ` -macro-static-${id}`;
+    }
 
     if (this && typeof this.addAsset === 'function') {
       this.addAsset({
@@ -387,6 +401,12 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
       return className;
     }
 
+    if (process.env.NODE_ENV !== 'production') {
+      js += `let targetRules = rules + ${JSON.stringify(loc)};\n`;
+      js += 'let hash = 5381;for (let i = 0; i < targetRules.length; i++) { hash = ((hash << 5) + hash) + targetRules.charCodeAt(i) >>> 0; }\n';
+      js += 'rules += " -macro-dynamic-" + hash.toString(36);\n';
+      js += `typeof window !== 'undefined' && window?.postMessage?.({action: 'update-macros', hash: hash.toString(36), loc: ${JSON.stringify(loc)}, style: currentRules}, "*");\n`;
+    }
     js += 'return rules;';
     if (allowedOverrides) {
       return new Function('props', 'overrides', js) as any;
@@ -492,7 +512,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[prelude] || generateArbitraryValueSelector(condition, true)}`;
-        return new AtRule(rules, prelude, layer);
+        return new AtRule(rules, prelude, layer, condition);
       });
     }
 
@@ -504,6 +524,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);
@@ -556,7 +577,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];
@@ -645,22 +666,30 @@ interface Rule {
   copy(): Rule
 }
 
+let conditionStack: string[] = [];
+
 /** A CSS style rule. */
 class StyleRule implements Rule {
   className: string;
   pseudos: string;
   property: string;
   value: string;
+  themeProperty: string | undefined;
+  themeValue: Value | undefined;
 
-  constructor(className: string, property: string, value: string) {
+  constructor(className: string, property: string, value: string, themeProperty: string | undefined, themeValue: Value | undefined) {
     this.className = className;
     this.pseudos = '';
     this.property = property;
     this.value = value;
+    if (isCompilingDependencies !== null) {
+      this.themeProperty = themeProperty;
+      this.themeValue = themeValue;
+    }
   }
 
   copy(): Rule {
-    let rule = new StyleRule(this.className, this.property, this.value);
+    let rule = new StyleRule(this.className, this.property, this.value, this.themeProperty, this.themeValue);
     rule.pseudos = this.pseudos;
     return rule;
   }
@@ -703,6 +732,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;
   }
 }
@@ -759,14 +803,16 @@ 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 | null) {
+  constructor(rules: Rule[], prelude: string, layer: string | null, themeCondition: string | null) {
     super(rules, layer);
     this.prelude = prelude;
+    this.themeCondition = themeCondition;
   }
 
   copy(): Rule {
-    return new AtRule(this.rules.map(rule => rule.copy()), this.prelude, this.layer);
+    return new AtRule(this.rules.map(rule => rule.copy()), this.prelude, this.layer, this.themeCondition);
   }
 
   toCSS(rulesByLayer: Map<string, string[]>, preludes: string[] = [], layer?: string): void {
@@ -774,6 +820,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. */
@@ -794,7 +847,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/README.md b/packages/dev/style-macro-chrome-plugin/README.md
new file mode 100644
index 00000000000..5add7ba038c
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/README.md
@@ -0,0 +1,373 @@
+# 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
+// or build to avoid refresh bugs in HMR
+yarn workspace style-macro-chrome-plugin build
+```
+
+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. You may also want to go to the extensions page and either "refresh" or remove and re-add the extension.
+
+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
+- [ ] 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
+
+## Extension Architecture
+
+This extension uses Chrome's standard extension architecture with three main components that communicate via message passing.
+
+### Components
+
+#### 1. **Page Context** (style-macro runtime + MutationObserver)
+- **Location**: Runs in the actual page's JavaScript context
+- **Responsibility**:
+  - Generates macro metadata (hash, location, styles) when style macro is evaluated
+  - Hosts MutationObserver that watches selected element for className changes
+- **Storage**: None - static macros embed data in CSS, dynamic macros send messages
+- **Communication**:
+  - For static macros: Embeds data in CSS custom property `--macro-data`
+  - For dynamic macros: Sends `window.postMessage({ action: 'update-macros', hash, loc, style })` to content script
+  - For className changes: Sends `window.postMessage({ action: 'class-changed', elementId })` to content script
+
+#### 2. **Content Script** (`content-script.js`)
+- **Location**: Isolated sandboxed environment injected into the page
+- **Scope**: Handles dynamic macros only (static macros are read directly from CSS)
+- **Responsibility**:
+  - Listens for `window.postMessage({ action: 'update-macros' })` from the page and stores dynamic macro data in its own `window.__macros`
+  - Forwards `window.postMessage({ action: 'class-changed' })` from page to background script
+  - Responds to queries from DevTools (via background script), with retry logic to handle race conditions
+  - Cleans up stale macros every 5 minutes
+- **Storage**: `window.__macros[hash] = { loc: string, style: object }` (in content script context, not page context)
+- **Race Condition Handling**: When queried for a hash that doesn't exist yet, polls every 50ms for up to 500ms before responding with null
+- **Communication**:
+  - Receives:
+    - `window.postMessage({ action: 'update-macros' })` from page
+    - `window.postMessage({ action: 'class-changed' })` from page
+    - `chrome.runtime.onMessage({ action: 'get-macro' })` from background
+  - Sends:
+    - `chrome.runtime.sendMessage({ action: 'update-macros' })` to background
+    - `chrome.runtime.sendMessage({ action: 'class-changed' })` to background
+    - `chrome.runtime.sendMessage({ action: 'macro-response' })` to background
+
+#### 3. **Background Script** (`background.js`)
+- **Location**: Service worker (isolated context)
+- **Responsibility**: Acts as a message broker between DevTools and content scripts
+- **State**: Maintains a map of DevTools connections per tab
+- **Communication**:
+  - Receives:
+    - `chrome.runtime.onConnect({ name: 'devtools-page' })` from DevTools
+    - `port.onMessage({ type: 'init' })` from DevTools
+    - `port.onMessage({ type: 'query-macros' })` from DevTools
+    - `chrome.runtime.onMessage({ action: 'update-macros' })` from content script
+    - `chrome.runtime.onMessage({ action: 'macro-response' })` from content script
+    - `chrome.runtime.onMessage({ action: 'class-changed' })` from content script
+  - Sends:
+    - `chrome.tabs.sendMessage({ action: 'get-macro' })` to content script
+    - `port.postMessage({ action: 'update-macros' })` to DevTools
+    - `port.postMessage({ action: 'macro-response' })` to DevTools
+    - `port.postMessage({ action: 'class-changed' })` to DevTools
+
+#### 4. **DevTools Panel** (`devtool.js`)
+- **Location**: DevTools sidebar panel context
+- **Responsibility**:
+  - Extracts macro class names from selected element:
+    - Static macros: `-macro-static-{hash}` → retrieves data via CSS custom properties (`--macro-data`)
+    - Dynamic macros: `-macro-dynamic-{hash}` → queries data via content script (responds to changing conditions)
+  - Queries for macro data using appropriate method based on macro type
+  - Displays style information in sidebar
+  - **Automatic Updates**: Sets up a MutationObserver on the selected element to detect className changes and automatically refreshes the panel
+- **Mutation Observer**:
+  - Created when an element is selected via `chrome.devtools.panels.elements.onSelectionChanged`
+  - Watches the selected element's `class` attribute for changes
+  - Disconnects when:
+    - A new element is selected
+    - The DevTools connection is closed
+  - Triggers automatic panel refresh when className changes
+- **Communication**:
+  - Receives:
+    - `port.onMessage({ action: 'macro-response' })` from background
+    - `port.onMessage({ action: 'update-macros' })` from background
+    - `port.onMessage({ action: 'class-changed' })` from background (triggers refresh)
+  - Sends:
+    - `chrome.runtime.connect({ name: 'devtools-page' })` to establish connection
+    - `port.postMessage({ type: 'init' })` to background
+    - `port.postMessage({ type: 'query-macros' })` to background (for dynamic macros only)
+
+### Message Flow Diagrams
+
+#### Flow 1a: Static Macro Lookup (DevTools reads CSS)
+
+Static macros are generated when style macro conditions don't change at runtime. The macro data is embedded directly into the CSS as a custom property.
+
+```
+┌─────────────────┐
+│ DevTools Panel  │ User selects element with -macro-static-{hash} class
+└────────┬────────┘
+         │ Read CSS custom property --macro-data via getComputedStyle()
+         ↓
+┌─────────────────┐
+│ Page DOM/CSS    │ Returns macro data from CSS
+└────────┬────────┘
+         │ { loc: "...", style: {...} }
+         ↓
+┌─────────────────┐
+│ DevTools Panel  │ Parses and displays in sidebar
+└─────────────────┘
+```
+
+#### Flow 1b: Dynamic Macro Updates (Page → DevTools)
+
+Dynamic macros are generated when style macro conditions can change at runtime. Updates are sent via message passing.
+This could be simplified and we could rely on the MutationObserver to trigger the refresh, but this way ensures
+that the storage is update before we try to access the data.
+
+```
+┌─────────────────┐
+│ Page Context    │
+│ (style-macro)   │
+└────────┬────────┘
+         │ window.postMessage({ action: 'update-macros', hash, loc, style })
+         ↓
+┌─────────────────┐
+│ Content Script  │ Stores in window.__macros[hash]
+└────────┬────────┘
+         │ chrome.runtime.sendMessage({ action: 'update-macros', ... })
+         ↓
+┌─────────────────┐
+│ Background      │ Looks up DevTools connection for tabId
+└────────┬────────┘
+         │ port.postMessage({ action: 'update-macros', ... })
+         ↓
+┌─────────────────┐
+│ DevTools Panel  │ Triggers sidebar refresh
+└─────────────────┘
+```
+
+#### Flow 2: Query Macro Data (DevTools → Content Script → DevTools)
+
+```
+┌─────────────────┐
+│ DevTools Panel  │ User selects element with -macro-dynamic-{hash} class
+└────────┬────────┘
+         │ port.postMessage({ type: 'query-macros', hash })
+         ↓
+┌─────────────────┐
+│ Background      │ Forwards to content script in specified tab
+└────────┬────────┘
+         │ chrome.tabs.sendMessage(tabId, { action: 'get-macro', hash })
+         ↓
+┌─────────────────┐
+│ Content Script  │ Checks window.__macros[hash]
+│                 │ • If found → responds immediately
+│                 │ • If not found → polls every 50ms (max 500ms)
+│                 │   to handle race with window.postMessage
+└────────┬────────┘
+         │ chrome.runtime.sendMessage({ action: 'macro-response', hash, data })
+         ↓
+┌─────────────────┐
+│ Background      │ Looks up DevTools connection
+└────────┬────────┘
+         │ port.postMessage({ action: 'macro-response', hash, data })
+         ↓
+┌─────────────────┐
+│ DevTools Panel  │ Resolves Promise, updates sidebar
+└─────────────────┘
+```
+
+#### Flow 3: Macro Cleanup (Automated)
+
+```
+┌─────────────────┐
+│ Content Script  │ Every 5 minutes
+└────────┬────────┘
+         │ For each hash in window.__macros:
+         │   Check if document.querySelector(`.-macro-dynamic-${hash}`) exists
+         │   If not found, delete window.__macros[hash]
+         ↓
+┌─────────────────┐
+│ Garbage         │ Stale macros removed from memory
+│ Collection      │
+└─────────────────┘
+```
+
+#### Flow 4: Automatic Updates on className Changes (MutationObserver)
+
+When you select an element, the DevTools panel automatically watches for className changes and refreshes the panel.
+
+```
+┌─────────────────┐
+│ DevTools Panel  │ User selects element in Elements panel
+└────────┬────────┘
+         │ chrome.devtools.panels.elements.onSelectionChanged
+         │
+         │ chrome.devtools.inspectedWindow.eval(`
+         │   // Disconnect old observer (if any)
+         │   if (window.__styleMacroObserver) {
+         │     window.__styleMacroObserver.disconnect();
+         │   }
+         │
+         │   // Create new MutationObserver on $0
+         │   window.__styleMacroObserver = new MutationObserver(() => {
+         │     window.postMessage({
+         │       action: 'class-changed',
+         │       elementId: $0.getAttribute('data-devtools-id')
+         │     }, '*');
+         │   });
+         │
+         │   window.__styleMacroObserver.observe($0, {
+         │     attributes: true,
+         │     attributeFilter: ['class']
+         │   });
+         │ `)
+         ↓
+┌─────────────────┐
+│ Page DOM        │ MutationObserver active on selected element
+└────────┬────────┘
+         │
+         │ ... User interacts with page, element's className changes ...
+         │
+         │ MutationObserver detects class attribute change
+         │ window.postMessage({ action: 'class-changed', elementId }, '*')
+         ↓
+┌─────────────────┐
+│ Content Script  │ Receives window message, forwards to extension
+└────────┬────────┘
+         │ chrome.runtime.sendMessage({ action: 'class-changed', elementId })
+         ↓
+┌─────────────────┐
+│ Background      │ Looks up DevTools connection for tabId
+└────────┬────────┘
+         │ port.postMessage({ action: 'class-changed', elementId })
+         ↓
+┌─────────────────┐
+│ DevTools Panel  │ Verifies elementId matches currently selected element
+│                 │ Triggers full panel refresh (re-reads classes, re-queries macros)
+└─────────────────┘
+
+When selection changes or panel closes:
+  ↓
+┌─────────────────┐
+│ DevTools Panel  │ Calls disconnectObserver()
+└────────┬────────┘
+         │ chrome.devtools.inspectedWindow.eval(`
+         │   if (window.__styleMacroObserver) {
+         │     window.__styleMacroObserver.disconnect();
+         │     window.__styleMacroObserver = null;
+         │   }
+         │ `)
+         ↓
+┌─────────────────┐
+│ Page DOM        │ Old observer disconnected, new observer created for new selection
+└─────────────────┘
+```
+
+**Key Benefits:**
+- Panel automatically refreshes when element classes change (e.g., hover states, conditional styles)
+- No manual refresh needed
+- Observer is cleaned up properly to prevent memory leaks
+- Each element has its own unique tracking ID to prevent cross-contamination
+
+### Key Technical Details
+
+#### Why Background Script is Needed
+Chrome extensions prevent direct communication between DevTools and content scripts for security reasons. The background script acts as a trusted intermediary.
+
+#### Static vs Dynamic Macros
+
+The style macro generates different class name patterns based on whether the styles can change at runtime:
+
+**Static Macros** (`-macro-static-{hash}`):
+- Used when all style conditions are static (e.g., `style({ color: 'red' })`)
+- Macro data is embedded in CSS as `--macro-data: '{...JSON...}'` custom property
+- DevTools reads directly from CSS via `getComputedStyle()`
+
+**Dynamic Macros** (`-macro-dynamic-{hash}`):
+- Used when style conditions can change (e.g., `style({ color: isActive ? 'red' : 'blue' })`)
+- Macro data is sent via `window.postMessage()` whenever conditions change
+- Content script stores data and responds to DevTools queries
+- Enables real-time updates when props/state change
+
+#### Race Condition Handling (Dynamic Macros Only)
+When DevTools queries for dynamic macro data, there's a race condition:
+1. Page renders with `-macro-dynamic-{hash}` class name
+2. DevTools sees the class and queries for the hash
+3. **But**: The page's `window.postMessage` with macro data might not have reached the content script yet
+
+**Solution**: The content script polls `window.__macros[hash]` every 50ms for up to 500ms before giving up. This ensures the data has time to arrive via the async `window.postMessage` flow.
+
+Note: Static macros don't have this issue since the data is synchronously available in CSS.
+
+#### Connection Management
+- **DevTools → Background**: Uses persistent `chrome.runtime.connect()` with port-based messaging
+- **Content Script → Background**: Uses one-time `chrome.runtime.sendMessage()` calls
+- **Background tracks**: Map of `tabId → DevTools port` for routing messages
+
+#### Data Structure
+```javascript
+// In window.__macros (content script context only)
+{
+  "zsZ9Dc": {
+    loc: "packages/@react-spectrum/s2/src/Button.tsx:67",
+    style: {
+      "paddingX": "4",
+      // ... more CSS properties
+    }
+  }
+}
+```
+
+Note: The page context does NOT have access to `window.__macros`. This is stored only in the content script's sandboxed environment for security.
+
+#### Message Types
+
+| Message Type | Direction | Purpose |
+|-------------|-----------|---------|
+| `update-macros` | Page → Content → Background → DevTools | Notify that a macro was added/updated |
+| `query-macros` | DevTools → Background → Content | Request macro data by hash |
+| `macro-response` | Content → Background → DevTools | Return requested macro data |
+| `get-macro` | Background → Content | Internal forwarding of query-macros |
+| `init` | DevTools → Background | Establish connection with tabId |
+| `class-changed` | Page → Content → Background → DevTools | Notify that selected element's className changed |
+
+### Debugging
+
+Enable debug logs by uncommenting the `console.log()` lines in each component:
+- **DevTools Panel**: `devtool.js` → `debugLog()` function
+- **Content Script**: `content-script.js` → `debugLog()` function
+- **Background Script**: Already logging to service worker console
+
+View logs in:
+- **Page Console**: Content Script and DevTools Panel logs (with `[Content Script]` and `[DevTools]` prefixes)
+- **Service Worker Console**: Background Script logs (go to `chrome://extensions` → click "service worker")
+
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..93248a0d6db
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "style-macro-chrome-plugin",
+  "version": "0.1.0",
+  "scripts": {
+    "start": "parcel watch src/manifest.json --host localhost --config .parcelrc",
+    "build": "parcel build src/manifest.json --config .parcelrc"
+  },
+  "devDependencies": {
+    "@parcel/config-default": "^2.16.3",
+    "@parcel/config-webextension": "^2.16.3",
+    "@parcel/core": "^2.16.3",
+    "@parcel/transformer-js": "^2.16.3",
+    "parcel": "^2.16.3"
+  },
+  "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/background.js b/packages/dev/style-macro-chrome-plugin/src/background.js
new file mode 100644
index 00000000000..f91056033b0
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/src/background.js
@@ -0,0 +1,60 @@
+// Keep track of DevTools connections per tab
+const devtoolsConnections = new Map();
+
+// Listen for connections from DevTools
+chrome.runtime.onConnect.addListener((port) => {
+  if (port.name === 'devtools-page') {
+    let tabId;
+
+    // Listen for messages from DevTools
+    const messageListener = (message) => {
+      if (message.type === 'init') {
+        tabId = message.tabId;
+        devtoolsConnections.set(tabId, port);
+        console.log(`[Background] DevTools connected for tab ${tabId}`);
+      } else if (message.type === 'query-macros') {
+        console.log(`[Background] Forwarding query-macros to content script, hash: ${message.hash}, tabId: ${tabId}`);
+        // Forward query to content script
+        chrome.tabs.sendMessage(tabId, {
+          action: 'get-macro',
+          hash: message.hash
+        }).catch(err => {
+          console.error('[Background] Error sending message to content script:', err);
+        });
+      }
+    };
+
+    port.onMessage.addListener(messageListener);
+
+    // Clean up when DevTools disconnects
+    port.onDisconnect.addListener(() => {
+      if (tabId) {
+        devtoolsConnections.delete(tabId);
+        console.log(`DevTools disconnected for tab ${tabId}`);
+      }
+    });
+  }
+});
+
+// Listen for messages from content scripts
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  const tabId = sender.tab?.id;
+
+  if (!tabId) {
+    return;
+  }
+
+  // Forward messages from content script to DevTools
+  if (message.action === 'update-macros' || message.action === 'macro-response' || message.action === 'class-changed') {
+    console.log(`[Background] Forwarding ${message.action} from content script to DevTools, tabId: ${tabId}`);
+    const devtoolsPort = devtoolsConnections.get(tabId);
+    if (devtoolsPort) {
+      devtoolsPort.postMessage(message);
+    } else {
+      console.warn(`[Background] No DevTools connection found for tab ${tabId}`);
+    }
+  }
+
+  return false; // Don't keep channel open
+});
+
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..e3b4626e2e6
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/src/content-script.js
@@ -0,0 +1,152 @@
+
+if (window.__macrosLoaded) {
+  return;
+}
+window.__macrosLoaded = true;
+
+let debugLog = (...args) => {
+  // console.log('[Content Script]', ...args);
+};
+
+window.addEventListener('message', function (event) {
+  // Only accept messages from the same frame
+  if (event.source !== window) {
+    return;
+  }
+
+  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 && typeof message === 'object') {
+    if (message.action === 'update-macros') {
+      let {hash, loc, style} = message;
+      if (!window.__macros) {
+        window.__macros = {};
+      }
+
+      // Update the specific macro without overwriting others
+      window.__macros[hash] = {
+        loc,
+        style
+      };
+
+      debugLog('Updated macro:', hash, 'Total macros:', Object.keys(window.__macros).length);
+
+      // if this script is run multiple times on the page, then only handle it once
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+
+      // Send message to background script (which forwards to DevTools)
+      try {
+        chrome.runtime.sendMessage({
+          action: 'update-macros',
+          ...message
+        });
+      } catch (err) {
+        debugLog('Failed to send update-macros message:', err);
+      }
+    } else if (message.action === 'class-changed') {
+      // Forward class-changed messages from page context to background script
+      debugLog('Class changed for element:', message.elementId);
+
+      // if this script is run multiple times on the page, then only handle it once
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+
+      try {
+        chrome.runtime.sendMessage({
+          action: 'class-changed',
+          elementId: message.elementId
+        });
+      } catch (err) {
+        debugLog('Failed to send class-changed message:', err);
+      }
+    }
+  }
+});
+
+// Listen for requests from DevTools (via background script)
+chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
+  debugLog('Received message:', message);
+
+  if (message.action === 'get-macro') {
+    const sendMacroResponse = (data, attempt = 1) => {
+      debugLog(`Sending macro-response for hash: ${message.hash}, attempt: ${attempt}, has data: ${!!data}`);
+      try {
+        chrome.runtime.sendMessage({
+          action: 'macro-response',
+          hash: message.hash,
+          data: data || null
+        });
+      } catch (err) {
+        debugLog('Failed to send macro-response message:', err);
+      }
+    };
+
+    // Check if data is immediately available
+    let macroData = window.__macros?.[message.hash];
+
+    if (macroData) {
+      debugLog('get-macro request for hash:', message.hash, 'Found immediately');
+      sendMacroResponse(macroData, 1);
+    } else {
+      // Data not available yet, wait a bit for it to arrive via window.postMessage
+      debugLog('get-macro request for hash:', message.hash, 'Not found, waiting...');
+      debugLog('Available macros:', window.__macros ? Object.keys(window.__macros) : 'none');
+
+      let attempts = 0;
+      const maxAttempts = 10;
+      const checkInterval = 50; // Check every 50ms
+
+      const intervalId = setInterval(() => {
+        attempts++;
+        macroData = window.__macros?.[message.hash];
+
+        if (macroData) {
+          clearInterval(intervalId);
+          debugLog(`get-macro hash: ${message.hash} found after ${attempts} attempts (${attempts * checkInterval}ms)`);
+          sendMacroResponse(macroData, attempts + 1);
+        } else if (attempts >= maxAttempts) {
+          clearInterval(intervalId);
+          debugLog(`get-macro hash: ${message.hash} not found after ${maxAttempts} attempts, giving up`);
+          sendMacroResponse(null, attempts + 1);
+        }
+      }, checkInterval);
+    }
+  }
+});
+
+// Polling service to clean up stale macros
+// Runs every 5 minutes to check if macro class names still exist on the page
+const CLEANUP_INTERVAL = 1000 * 60 * 5;
+
+setInterval(() => {
+  if (!window.__macros) {
+    return;
+  }
+
+  const macroHashes = Object.keys(window.__macros);
+  if (macroHashes.length === 0) {
+    return;
+  }
+
+  let removedCount = 0;
+
+  for (const hash of macroHashes) {
+    // Check if any element with this macro class exists in the DOM
+    const selector = `.-macro-dynamic-${CSS.escape(hash)}`;
+    const elementExists = document.querySelector(selector);
+
+    if (!elementExists) {
+      debugLog('Cleaning up stale macro:', hash, window.__macros[hash].style);
+      delete window.__macros[hash];
+      removedCount++;
+    }
+  }
+
+  if (removedCount > 0) {
+    debugLog(`Cleaned up ${removedCount} stale macro(s). Remaining: ${Object.keys(window.__macros).length}`);
+  }
+}, CLEANUP_INTERVAL);
+
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..4d1e8f7f5ac
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/src/devtool.js
@@ -0,0 +1,242 @@
+
+chrome.devtools.panels.elements.createSidebarPane('Style Macros', (sidebar) => {
+  sidebar.setObject({});
+
+  // Helper function to log to both DevTools-for-DevTools console and inspected page console
+  const debugLog = (...args) => {
+    // console.log(...args); // Logs to DevTools-for-DevTools console
+    // const message = args.map(arg =>
+    //   typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
+    // ).join(' ');
+    // chrome.devtools.inspectedWindow.eval(`console.log('[DevTools]', ${JSON.stringify(message)})`);
+  };
+
+  const backgroundPageConnection = chrome.runtime.connect({name: 'devtools-page'});
+
+  // Monitor connection status
+  backgroundPageConnection.onDisconnect.addListener(() => {
+    debugLog('ERROR: Background connection disconnected!', chrome.runtime.lastError);
+    // Clean up observer when connection is lost
+    disconnectObserver();
+  });
+
+  // Initialize connection with the background script
+  debugLog('Initializing connection with tabId:', chrome.devtools.inspectedWindow.tabId);
+  backgroundPageConnection.postMessage({
+    type: 'init',
+    tabId: chrome.devtools.inspectedWindow.tabId
+  });
+  debugLog('Init message sent to background');
+
+  // Track pending queries for macro data
+  const pendingQueries = new Map();
+
+  // Track mutation observer for selected element
+  let currentObserver = null;
+  let currentElementId = null;
+
+  // Listen for responses from content script (via background script)
+  backgroundPageConnection.onMessage.addListener((message) => {
+    debugLog('Message from background:', message);
+
+    if (message.action === 'macro-response') {
+      debugLog('Received macro-response for hash:', message.hash, 'Has data:', !!message.data);
+      debugLog('Pending queries has hash:', pendingQueries.has(message.hash), 'Total pending:', pendingQueries.size);
+      const resolve = pendingQueries.get(message.hash);
+      if (resolve) {
+        debugLog('Resolving promise for hash:', message.hash, 'with data:', message.data);
+        resolve(message.data);
+        pendingQueries.delete(message.hash);
+      } else {
+        debugLog('WARNING: No pending query found for hash:', message.hash);
+      }
+    } else if (message.action === 'update-macros') {
+      debugLog('Received update-macros, refreshing...');
+      update();
+    } else if (message.action === 'class-changed') {
+      debugLog('Received class-changed notification for element:', message.elementId);
+      // Only update if the changed element is the one we're currently watching
+      if (message.elementId === currentElementId) {
+        debugLog('Class changed on watched element, updating panel...');
+        update();
+      }
+    }
+  });
+
+  // Query macro data from content script via background script
+  const queryMacro = (hash) => {
+    debugLog('Querying macro with hash:', hash);
+    return new Promise((resolve) => {
+      pendingQueries.set(hash, resolve);
+      debugLog('Added to pendingQueries, total pending:', pendingQueries.size);
+
+      try {
+        backgroundPageConnection.postMessage({
+          type: 'query-macros',
+          hash: hash
+        });
+        debugLog('Query message sent to background for hash:', hash);
+      } catch (err) {
+        debugLog('ERROR sending message:', err);
+        pendingQueries.delete(hash);
+        resolve(null);
+        return;
+      }
+
+      // Timeout after 1 second
+      setTimeout(() => {
+        if (pendingQueries.has(hash)) {
+          debugLog('TIMEOUT: Query timeout for hash:', hash, 'Resolving to null');
+          pendingQueries.delete(hash);
+          resolve(null);
+        } else {
+          debugLog('Timeout fired for hash:', hash, 'but query already resolved');
+        }
+      }, 1000);
+    });
+  };
+
+  function getMacroData(className) {
+    let promise = new Promise((resolve) => {
+      debugLog('Getting macro data for:', className);
+      chrome.devtools.inspectedWindow.eval('window.getComputedStyle($0).getPropertyValue("--macro-data")', (style) => {
+        debugLog('Got style:', style);
+        resolve(style ? JSON.parse(style) : null);
+      });
+    });
+    return promise;
+  }
+
+  // Function to disconnect the current observer
+  const disconnectObserver = () => {
+    if (currentObserver) {
+      chrome.devtools.inspectedWindow.eval(`
+        if (window.__styleMacroObserver) {
+          window.__styleMacroObserver.disconnect();
+          window.__styleMacroObserver = null;
+        }
+      `);
+      debugLog('Disconnected mutation observer for element:', currentElementId);
+      currentObserver = null;
+      currentElementId = null;
+    }
+  };
+
+  // Function to start observing the currently selected element
+  const startObserving = () => {
+    // First disconnect any existing observer
+    disconnectObserver();
+
+    // Generate a unique ID for the current element
+    chrome.devtools.inspectedWindow.eval(`
+      (function() {
+        const element = $0;
+        if (!element || !element.classList) {
+          return null;
+        }
+
+        // Generate a unique ID if element doesn't have one
+        if (!element.hasAttribute('data-devtools-id')) {
+          element.setAttribute('data-devtools-id', 'dt-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9));
+        }
+
+        const elementId = element.getAttribute('data-devtools-id');
+
+        // Create mutation observer
+        if (window.__styleMacroObserver) {
+          window.__styleMacroObserver.disconnect();
+        }
+
+        window.__styleMacroObserver = new MutationObserver((mutations) => {
+          for (const mutation of mutations) {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+              // Notify DevTools that the class has changed via window.postMessage
+              // (chrome.runtime is not available in page context)
+              window.postMessage({
+                action: 'class-changed',
+                elementId: elementId
+              }, '*');
+              break;
+            }
+          }
+        });
+
+        window.__styleMacroObserver.observe(element, {
+          attributes: true,
+          attributeFilter: ['class']
+        });
+
+        return elementId;
+      })();
+    `, (result, isException) => {
+      if (isException) {
+        debugLog('Error setting up mutation observer:', result);
+      } else if (result) {
+        currentElementId = result;
+        currentObserver = true; // Just track that we have an observer
+        debugLog('Started observing element:', currentElementId);
+      }
+    });
+  };
+
+  let update = () => {
+    debugLog('Starting update...');
+    chrome.devtools.inspectedWindow.eval('$0.getAttribute("class")', (className) => {
+      debugLog('Got className:', className);
+
+      // Handle the async operations outside the eval callback
+      (async () => {
+        if (typeof className !== 'string') {
+          sidebar.setObject({});
+          return;
+        }
+
+        let staticMacroHashes = [...className.matchAll(/-macro-static-([^\s]+)/g)].map(m => m[1]);
+        let dynamicMacroHashes = [...className.matchAll(/-macro-dynamic-([^\s]+)/g)].map(m => m[1]);
+        debugLog('Static macro hashes:', staticMacroHashes);
+        debugLog('Dynamic macro hashes:', dynamicMacroHashes);
+
+        let staticMacros = staticMacroHashes.map(macro => getMacroData(macro));
+        let dynamicMacros = dynamicMacroHashes.map(macro => queryMacro(macro));
+
+        debugLog('Waiting for', staticMacros.length, 'static and', dynamicMacros.length, 'dynamic macros...');
+        let results = await Promise.all([...staticMacros, ...dynamicMacros]);
+        debugLog('Results:', results);
+
+        if (results.length === 0) {
+          sidebar.setObject({});
+        } else if (results.length === 1) {
+          sidebar.setObject(results[0].style ?? {}, results[0].loc);
+        } else {
+          let seenProperties = new Set();
+          for (let i = results.length - 1; i >= 0; i--) {
+            for (let key in results[i].style) {
+              if (seenProperties.has(key)) {
+                delete results[i].style[key];
+              } else {
+                seenProperties.add(key);
+              }
+            }
+          }
+
+          let res = {};
+          for (let result of results) {
+            res[result.loc] = result.style;
+          }
+          sidebar.setObject(res);
+        }
+      })();
+    });
+  };
+
+  chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
+    debugLog('Element selection changed');
+    // Start observing the newly selected element
+    startObserving();
+    // Update the panel with the new element's macros
+    update();
+  });
+
+  // Initial observation when the panel is first opened
+  startObserving();
+});
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/icons/128.png b/packages/dev/style-macro-chrome-plugin/src/icons/128.png
new file mode 100644
index 00000000000..a0a1377e1a9
Binary files /dev/null and b/packages/dev/style-macro-chrome-plugin/src/icons/128.png differ
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 00000000000..41a22d0a311
Binary files /dev/null and b/packages/dev/style-macro-chrome-plugin/src/icons/16.png differ
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 00000000000..493110735d2
Binary files /dev/null and b/packages/dev/style-macro-chrome-plugin/src/icons/32.png differ
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 00000000000..6794ef2da83
Binary files /dev/null and b/packages/dev/style-macro-chrome-plugin/src/icons/48.png differ
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 00000000000..b12d2c4a2f0
Binary files /dev/null and b/packages/dev/style-macro-chrome-plugin/src/icons/96.png differ
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..6d3bfaf858a
--- /dev/null
+++ b/packages/dev/style-macro-chrome-plugin/src/manifest.json
@@ -0,0 +1,23 @@
+{
+  "manifest_version": 3,
+  "name": "Style Macro DevTools",
+  "version": "0.0.1",
+  "devtools_page": "devtools.html",
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [{
+    "matches": ["*://*/*"],
+    "js": ["content-script.js"],
+    "all_frames": true,
+    "run_at": "document_idle"
+  }],
+  "permissions": ["tabs"],
+  "icons": {
+    "16": "icons/16.png",
+    "32": "icons/32.png",
+    "48": "icons/48.png",
+    "96": "icons/96.png",
+    "128": "icons/128.png"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 273906bc616..0817ce4e7c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4255,6 +4255,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@parcel/config-webextension@npm:^2.16.3":
+  version: 2.16.3
+  resolution: "@parcel/config-webextension@npm:2.16.3"
+  dependencies:
+    "@parcel/config-default": "npm:2.16.3"
+    "@parcel/packager-webextension": "npm:2.16.3"
+    "@parcel/runtime-webextension": "npm:2.16.3"
+    "@parcel/transformer-raw": "npm:2.16.3"
+    "@parcel/transformer-webextension": "npm:2.16.3"
+  peerDependencies:
+    "@parcel/core": ^2.16.3
+  checksum: 10c0/4136d4b9be3cd97a19ebaebc2cacc1539b25ac23af726e5619a2f79c262e3e7af835d4b34b1d5dbce5a8154ad56cf5cdf3a8bf33e6e399125cb5a4cbb639c55b
+  languageName: node
+  linkType: hard
+
 "@parcel/core@npm:2.16.3, @parcel/core@npm:^2.16.0, @parcel/core@npm:^2.16.3":
   version: 2.16.3
   resolution: "@parcel/core@npm:2.16.3"
@@ -4604,6 +4619,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/packager-webextension@npm:2.16.3":
+  version: 2.16.3
+  resolution: "@parcel/packager-webextension@npm:2.16.3"
+  dependencies:
+    "@parcel/plugin": "npm:2.16.3"
+    "@parcel/utils": "npm:2.16.3"
+    nullthrows: "npm:^1.1.1"
+  checksum: 10c0/8556362f167836970681b1eece6faaef581a2a6cc68c089fa460be895baf702011ced76fd245d062193bed38a785341c469960c3304556df0b8e7787916983b9
+  languageName: node
+  linkType: hard
+
 "@parcel/plugin@npm:2.16.3, @parcel/plugin@npm:^2.0.0, @parcel/plugin@npm:^2.16.0, @parcel/plugin@npm:^2.16.3":
   version: 2.16.3
   resolution: "@parcel/plugin@npm:2.16.3"
@@ -4765,6 +4791,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/runtime-webextension@npm:2.16.3":
+  version: 2.16.3
+  resolution: "@parcel/runtime-webextension@npm:2.16.3"
+  dependencies:
+    "@parcel/plugin": "npm:2.16.3"
+    "@parcel/utils": "npm:2.16.3"
+    nullthrows: "npm:^1.1.1"
+  checksum: 10c0/74429e2de0e1b2630ef98eb243de1e3d6ae3c0731a892de4ff362b053b386295ec612f737ec88a951eb3eec8a8988dbe04dad84e21f9a258884b438224afb61b
+  languageName: node
+  linkType: hard
+
 "@parcel/rust-darwin-arm64@npm:2.16.3":
   version: 2.16.3
   resolution: "@parcel/rust-darwin-arm64@npm:2.16.3"
@@ -5094,6 +5131,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/transformer-webextension@npm:2.16.3":
+  version: 2.16.3
+  resolution: "@parcel/transformer-webextension@npm:2.16.3"
+  dependencies:
+    "@mischnic/json-sourcemap": "npm:^0.1.1"
+    "@parcel/diagnostic": "npm:2.16.3"
+    "@parcel/plugin": "npm:2.16.3"
+    "@parcel/utils": "npm:2.16.3"
+    content-security-policy-parser: "npm:^0.6.0"
+  checksum: 10c0/c11ab77923d0f0cef7390bfee7b7b5c4c7d0ab1853664ea40467478af8910ee31444dac6b6337d1ee380ff963f920a6473a470d35a19c1ed86526b912117c873
+  languageName: node
+  linkType: hard
+
 "@parcel/ts-utils@npm:2.16.3":
   version: 2.16.3
   resolution: "@parcel/ts-utils@npm:2.16.3"
@@ -13630,6 +13680,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.5, content-type@npm:~1.0.4, content-type@npm:~1.0.5":
   version: 1.0.5
   resolution: "content-type@npm:1.0.5"
@@ -27204,6 +27261,18 @@ __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.16.3"
+    "@parcel/config-webextension": "npm:^2.16.3"
+    "@parcel/core": "npm:^2.16.3"
+    "@parcel/transformer-js": "npm:^2.16.3"
+    parcel: "npm:^2.16.3"
+  languageName: unknown
+  linkType: soft
+
 "style-to-object@npm:^0.3.0":
   version: 0.3.0
   resolution: "style-to-object@npm:0.3.0"