feat: Style macro devtool

.yarn/patches/@parcel-transformer-js-npm-2.16.0-ae71b060cb.patch

@@ -0,0 +1,21 @@
+diff --git a/lib/JSTransformer.js b/lib/JSTransformer.js
+index c2a45a9665b4b88836d720669b997872082bb143..f46b0edf814e398ed2a2584efeb040c4b77d58db 100644
+--- a/lib/JSTransformer.js
++++ b/lib/JSTransformer.js
+@@ -447,14 +447,8 @@ var _default = exports.default = new (_plugin().Transformer)({
+               },
+               loc: {
+                 filePath: asset.filePath,
+-                start: {
+-                  line: loc.start_line + Number(asset.meta.startLine ?? 1) - 1,
+-                  column: loc.start_col
+-                },
+-                end: {
+-                  line: loc.end_line + Number(asset.meta.startLine ?? 1) - 1,
+-                  column: loc.end_col
+-                }
++                line: loc.line,
++                col: loc.col
+               },
+               invalidateOnFileChange(filePath) {
+                 asset.invalidateOnFileChange(filePath);

eslint.config.mjs

@@ -500,4 +500,12 @@ export default [{
     rules: {
         "react/react-in-jsx-scope": OFF,
     },
-}];
+}, {
+    files: ["packages/dev/style-macro-chrome-plugin/**"],
+    languageOptions: {
+        globals: {
+            ...globals.webextensions,
+            ...globals.browser
+        }
+    }
+}];

package.json

@@ -229,7 +229,8 @@
     "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch",
     "lightningcss": "1.30.1",
     "react-server-dom-parcel": "canary",
-    "react-test-renderer": "19.1.0"
+    "react-test-renderer": "19.1.0",
+    "@parcel/transformer-js@npm:2.16.0": "patch:@parcel/transformer-js@npm%3A2.16.0#~/.yarn/patches/@parcel-transformer-js-npm-2.16.0-ae71b060cb.patch"
   },
   "@parcel/transformer-css": {
     "cssModules": {

packages/@react-spectrum/s2/style/__tests__/mergeStyles.test.js

@@ -13,20 +13,24 @@
 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', () => {
     let a = style({backgroundColor: 'red-1000', color: '[hotpink]'});
     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()));
   });
 });

packages/@react-spectrum/s2/style/__tests__/style-macro.test.js

@@ -53,9 +53,13 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-EVNQL {
+        --macro-data: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
-    expect(js).toMatchInlineSnapshot('" Jbs12 Jbpv12"');
+    expect(js).toMatchInlineSnapshot('" Jbs12 Jbpv12 -macro-static-EVNQL"');
   });
 
   it('should support self references', () => {
@@ -114,10 +118,14 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-qHi23 {
+        --macro-data: {"style":{"borderWidth":2,"paddingX":"edge-to-text","width":"calc(200px - self(borderStartWidth) - self(paddingStart))"},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
 
-    expect(js).toMatchInlineSnapshot('" _kc12 hc12 mCPFGYc12 lc12 SMBFGYc12 Rv12 ZjUQgKd12 -m_-mc12 -S_-Sv12"');
+    expect(js).toMatchInlineSnapshot('" _kc12 hc12 mCPFGYc12 lc12 SMBFGYc12 Rv12 ZjUQgKd12 -m_-mc12 -S_-Sv12 -macro-static-qHi23"');
   });
 
   it('should support allowed overrides', () => {
@@ -134,9 +142,9 @@ describe('style-macro', () => {
       color: 'green-400'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gw12 pg12"');
-    expect(overrides).toMatchInlineSnapshot('" g8tmWqb12 pHJ3AUd12"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb12 pg12"');
+    expect(js()).toMatchInlineSnapshot('"  gw12 pg12 -macro-dynamic-1xxglvk"');
+    expect(overrides).toMatchInlineSnapshot('" g8tmWqb12 pHJ3AUd12 -macro-static-Su6dhb"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb12 pg12 -macro-dynamic-jk90zw"');
   });
 
   it('should support allowed overrides for properties that expand into multiple', () => {
@@ -151,9 +159,9 @@ describe('style-macro', () => {
       translateX: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B12 __Ya12"');
-    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D12 __Ya12"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D12 __Ya12"');
+    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B12 __Ya12 -macro-dynamic-1nf427l"');
+    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D12 __Ya12 -macro-static-ZCkud"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D12 __Ya12 -macro-dynamic-1pnuhyr"');
   });
 
   it('should support allowed overrides for shorthands', () => {
@@ -168,9 +176,9 @@ describe('style-macro', () => {
       padding: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  Tk12 Qk12 Sk12 Rk12"');
-    expect(overrides).toMatchInlineSnapshot('" Tm12 Qm12 Sm12 Rm12"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm12 Qm12 Sm12 Rm12"');
+    expect(js()).toMatchInlineSnapshot('"  Tk12 Qk12 Sk12 Rk12 -macro-dynamic-1w5dwn"');
+    expect(overrides).toMatchInlineSnapshot('" Tm12 Qm12 Sm12 Rm12 -macro-static-FQziuc"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm12 Qm12 Sm12 Rm12 -macro-dynamic-p1i90v"');
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -185,9 +193,9 @@ describe('style-macro', () => {
       minWidth: 32
     });
 
-    expect(js()).toMatchInlineSnapshot('"  gE12"');
-    expect(overrides).toMatchInlineSnapshot('" Nk12"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk12 gE12"');
+    expect(js()).toMatchInlineSnapshot('"  gE12 -macro-dynamic-nl2mms"');
+    expect(overrides).toMatchInlineSnapshot('" Nk12 -macro-static-pDx0l"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk12 gE12 -macro-dynamic-11y5vdc"');
   });
 
   it('should support runtime conditions', () => {
@@ -241,9 +249,9 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  gH12 pt12"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF12 po12"');
-    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE12 pm12"');
+    expect(js({})).toMatchInlineSnapshot('"  gH12 pt12 -macro-dynamic-179ovcu"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF12 po12 -macro-dynamic-1i83kjb"');
+    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE12 pm12 -macro-dynamic-1npaxjo"');
   });
 
   it('should support nested runtime conditions', () => {
@@ -284,10 +292,10 @@ describe('style-macro', () => {
 
 "
 `);
-    expect(js({})).toMatchInlineSnapshot('"  gH12"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF12"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h12"');
-    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g312"');
+    expect(js({})).toMatchInlineSnapshot('"  gH12 -macro-dynamic-nl2p5j"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF12 -macro-dynamic-nl2nh1"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h12 -macro-dynamic-1w0viba"');
+    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g312 -macro-dynamic-nl27ia"');
   });
 
   it('should support variant runtime conditions', () => {
@@ -301,9 +309,9 @@ describe('style-macro', () => {
       }
     });
 
-    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY12"');
-    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe12"');
-    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw12"');
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY12 -macro-dynamic-nl33fs"');
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe12 -macro-dynamic-enz676"');
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw12 -macro-dynamic-nl3sna"');
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -337,16 +345,16 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  plb12"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple12"');
+    expect(js({})).toMatchInlineSnapshot('"  plb12 -macro-dynamic-1w7i5ba"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple12 -macro-dynamic-1w7i7u1"');
   });
 
   it('should expand shorthand properties to longhands', () => {
     let {js, css} = testStyle({
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" Th12 Qh12 Sh12 Rh12"');
+    expect(js).toMatchInlineSnapshot('" Th12 Qh12 Sh12 Rh12 -macro-static-V268ld"');
     expect(css).toMatchInlineSnapshot(`
 "@layer _.a;
 
@@ -371,6 +379,10 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-V268ld {
+        --macro-data: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
   });
@@ -389,6 +401,10 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-MvZuec {
+        --macro-data: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
   });
@@ -410,6 +426,10 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-2pvxid {
+        --macro-data: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
   });

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;