@react-spectrum/s2 1.0.0 → 1.2.0

package/style/__tests__/style-macro.test.js

@@ -53,9 +53,13 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-a9a4ic {
+        --macro-data-a9a4ic: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
-    expect(js).toMatchInlineSnapshot('" Jbs12 Jbpv12"');
+    expect(js).toMatchInlineSnapshot('" Jbs12 Jbpv12 -macro-static-a9a4ic"');
   });
 
   it('should support self references', () => {
@@ -114,10 +118,14 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-K2u2od {
+        --macro-data-K2u2od: {"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-K2u2od"');
   });
 
   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-4ucsx6"');
+    expect(overrides).toMatchInlineSnapshot('" g8tmWqb12 pHJ3AUd12 -macro-static-kcgSLc"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb12 pg12 -macro-dynamic-tuhvna"');
   });
 
   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-czb8u3"');
+    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D12 __Ya12 -macro-static-3ZdUX"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D12 __Ya12 -macro-dynamic-1dkyr5p"');
   });
 
   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-wnhub5"');
+    expect(overrides).toMatchInlineSnapshot('" Tm12 Qm12 Sm12 Rm12 -macro-static-VnXYtc"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm12 Qm12 Sm12 Rm12 -macro-dynamic-1jhfsp"');
   });
 
   it('should support allowed overrides for fontSize', () => {
@@ -185,9 +193,9 @@ describe('style-macro', () => {
       fontSize: 'ui-xs'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_6BNtrc-woabcc12 vx12"');
-    expect(overrides).toMatchInlineSnapshot('" -_6BNtrc-a12 vx12"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_6BNtrc-a12 vx12"');
+    expect(js()).toMatchInlineSnapshot('"  -_6BNtrc-woabcc12 vx12 -macro-dynamic-y6spui"');
+    expect(overrides).toMatchInlineSnapshot('" -_6BNtrc-a12 vx12 -macro-static-uYVOMc"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_6BNtrc-a12 vx12 -macro-dynamic-ls4ioc"');
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -202,9 +210,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-1fo9npa"');
+    expect(overrides).toMatchInlineSnapshot('" Nk12 -macro-static-zdsIUb"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk12 gE12 -macro-dynamic-384ibe"');
   });
 
   it('should support runtime conditions', () => {
@@ -258,9 +266,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-1y322w8"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF12 po12 -macro-dynamic-194mta9"');
+    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE12 pm12 -macro-dynamic-b757r2"');
   });
 
   it('should support nested runtime conditions', () => {
@@ -301,10 +309,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-1t0tza9"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF12 -macro-dynamic-8rpq8v"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h12 -macro-dynamic-r8ty3k"');
+    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g312 -macro-dynamic-16lzs6k"');
   });
 
   it('should support variant runtime conditions', () => {
@@ -318,9 +326,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-19yjqaa"');
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe12 -macro-dynamic-19kakuk"');
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw12 -macro-dynamic-11dyu5s"');
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -354,8 +362,8 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  plb12"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple12"');
+    expect(js({})).toMatchInlineSnapshot('"  plb12 -macro-dynamic-1owjb9s"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple12 -macro-dynamic-37zkvn"');
   });
 
   it('should expand shorthand properties to longhands', () => {
@@ -363,7 +371,7 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" Th12 Qh12 Sh12 Rh12"');
+    expect(js).toMatchInlineSnapshot('" Th12 Qh12 Sh12 Rh12 -macro-static-1ohgA"');
     expect(css).toMatchInlineSnapshot(`
 "@layer _.a;
 
@@ -388,6 +396,10 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-1ohgA {
+        --macro-data-1ohgA: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
   });
@@ -406,6 +418,10 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-Ukgglb {
+        --macro-data-Ukgglb: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
   });
@@ -427,6 +443,10 @@ describe('style-macro', () => {
   }
 }
 
+.-macro-static-mL70N {
+        --macro-data-mL70N: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
   });

package/style/dist/style-macro.cjs

@@ -152,6 +152,7 @@ function $cf0b57705fca33e1$var$classNamePrefix(property, cssProperty) {
     if (className && !property.startsWith('--')) return className;
     return '-' + $cf0b57705fca33e1$var$generateArbitraryValueSelector(property, true) + '-';
 }
+let $cf0b57705fca33e1$var$isCompilingDependencies = false;
 function $cf0b57705fca33e1$export$25d302a5b900a763(theme) {
     let properties = new Map(Object.entries(theme.properties).map(([k, v])=>{
         if (!Array.isArray(v) && v.cssProperties) return [
@@ -170,7 +171,6 @@ function $cf0b57705fca33e1$export$25d302a5b900a763(theme) {
         // We also check if this is globalThis, which happens in non-strict mode bundles.
         // Also allow style to be called as a normal function in tests.
         // @ts-ignore
-        // eslint-disable-next-line
         if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The style macro must be imported with {type: "macro"}.');
         // Generate rules for each property.
         let rules = new Map();
@@ -216,8 +216,11 @@ function $cf0b57705fca33e1$export$25d302a5b900a763(theme) {
                 let prop = properties.get(dep);
                 let name = `--${$cf0b57705fca33e1$var$shortCSSPropertyName(prop.cssProperties[0])}`;
                 // Could potentially use @property to prevent the var from inheriting in children.
+                $cf0b57705fca33e1$var$isCompilingDependencies = dep;
                 setRules(name, compileValue(name, dep, value));
+                $cf0b57705fca33e1$var$isCompilingDependencies = null;
                 setRules(dep, compileValue(dep, dep, name));
+                $cf0b57705fca33e1$var$isCompilingDependencies = false;
             }
         }
         dependencies.clear();
@@ -235,7 +238,7 @@ function $cf0b57705fca33e1$export$25d302a5b900a763(theme) {
         // 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();
-        let js = 'let rules = " ";\n';
+        let js = process.env.NODE_ENV !== 'production' ? 'let rules = " ", currentRules = {};\n' : 'let rules = " ";\n';
         if (allowedOverrides?.length) {
             for (let property of allowedOverrides){
                 let shorthand = theme.shorthands[property];
@@ -269,16 +272,17 @@ function $cf0b57705fca33e1$export$25d302a5b900a763(theme) {
                     loop += `  if (p[1] === ${JSON.stringify(selector)}) ${p} = true;\n`;
                 }
             }
+            let macroPart = process.env.NODE_ENV !== 'production' ? '|-macro\\$' : '';
             let regex = `/(?:^|\\s)(${[
                 ...allowedOverridesSet
-            ].map((p)=>$cf0b57705fca33e1$var$classNamePrefix(p, p)).join('|')})[^\\s]+/g`;
+            ].map((p)=>$cf0b57705fca33e1$var$classNamePrefix(p, p)).join('|')}${macroPart})[^\\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`;
+            } else js += `rules += (String(overrides || '').match(${regex}) || []).join('')\n`;
         }
         // Generate JS and CSS for each rule.
         let isStatic = !(hasConditions || allowedOverrides);
@@ -295,11 +299,29 @@ function $cf0b57705fca33e1$export$25d302a5b900a763(theme) {
             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 = $cf0b57705fca33e1$var$toBase62($cf0b57705fca33e1$var$hash(className + loc));
+            css += `.-macro-static-${id} {
+        --macro-data-${id}: ${JSON.stringify({
+                style: style,
+                loc: loc
+            })};
+      }\n\n`;
+            className += ` -macro-static-${id}`;
+        }
         if (this && typeof this.addAsset === 'function') this.addAsset({
             type: 'css',
             content: css
         });
         if (isStatic) 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: 'stylemacro-update-macros', hash: hash.toString(36), loc: ${JSON.stringify(loc)}, style: currentRules}, "*");\n`;
+        }
         js += 'return rules;';
         if (allowedOverrides) return new Function('props', 'overrides', js);
         return new Function('props', js);
@@ -384,7 +406,7 @@ function $cf0b57705fca33e1$export$25d302a5b900a763(theme) {
                 // 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 = `${$cf0b57705fca33e1$var$generateName(priority, true)}.${$09b3dbf96fabdf23$exports.conditions[prelude] || $cf0b57705fca33e1$var$generateArbitraryValueSelector(condition, true)}`;
-                return new $cf0b57705fca33e1$var$AtRule(rules, prelude, layer);
+                return new $cf0b57705fca33e1$var$AtRule(rules, prelude, layer, condition);
             });
         }
         hasConditions = true;
@@ -396,6 +418,7 @@ function $cf0b57705fca33e1$export$25d302a5b900a763(theme) {
         let propertyFunction = properties.get(themeProperty);
         if (propertyFunction) {
             // Expand value to conditional CSS values, and then to rules.
+            let propertyValue = value;
             let arbitrary = $cf0b57705fca33e1$export$22a8270399010c94(value);
             let cssValue = arbitrary ? arbitrary : propertyFunction.toCSSValue(value);
             let cssProperties = propertyFunction.toCSSProperties(property.startsWith('--') ? property : null, cssValue);
@@ -429,7 +452,7 @@ function $cf0b57705fca33e1$export$25d302a5b900a763(theme) {
                     if (cssProperty !== key) className += $cf0b57705fca33e1$var$shortCSSPropertyName(cssProperty);
                     className += $09b3dbf96fabdf23$exports.values[cssProperty]?.[String(value)] ?? $cf0b57705fca33e1$var$generateArbitraryValueSelector(String(value));
                     className += $cf0b57705fca33e1$var$POSTFIX;
-                    rules.push(new $cf0b57705fca33e1$var$StyleRule(className, key, String(value)));
+                    rules.push(new $cf0b57705fca33e1$var$StyleRule(className, key, String(value), $cf0b57705fca33e1$var$isCompilingDependencies ? themeProperty : property, propertyValue));
                 }
                 return [
                     0,
@@ -484,15 +507,20 @@ function $cf0b57705fca33e1$var$layerName(name) {
     // the unsafe overrides layer always comes after.
     return `_.${name}`;
 }
+let $cf0b57705fca33e1$var$conditionStack = [];
 /** A CSS style rule. */ class $cf0b57705fca33e1$var$StyleRule {
-    constructor(className, property, value){
+    constructor(className, property, value, themeProperty, themeValue){
         this.className = className;
         this.pseudos = '';
         this.property = property;
         this.value = value;
+        if (process.env.NODE_ENV !== 'production' && $cf0b57705fca33e1$var$isCompilingDependencies !== null) {
+            this.themeProperty = themeProperty;
+            this.themeValue = themeValue;
+        }
     }
     copy() {
-        let rule = new $cf0b57705fca33e1$var$StyleRule(this.className, this.property, this.value);
+        let rule = new $cf0b57705fca33e1$var$StyleRule(this.className, this.property, this.value, this.themeProperty, this.themeValue);
         rule.pseudos = this.pseudos;
         return rule;
     }
@@ -527,6 +555,21 @@ function $cf0b57705fca33e1$var$layerName(name) {
         let res = '';
         if (allowedOverridesSet.has(this.property)) res += `${indent}if (!${this.property.replace('--', '__')}) `;
         res += `${indent}rules += ' ${this.className}';`;
+        if (process.env.NODE_ENV !== 'production' && this.themeProperty) {
+            let name = this.themeProperty;
+            if (this.pseudos) $cf0b57705fca33e1$var$conditionStack.push(this.pseudos);
+            let propertyName = JSON.stringify(name);
+            let valueJson = JSON.stringify(this.themeValue);
+            if ($cf0b57705fca33e1$var$conditionStack.length) {
+                // name += ` (${conditionStack.join(', ')})`;
+                let conditionKey = JSON.stringify($cf0b57705fca33e1$var$conditionStack.join(' && '));
+                // Ensure currentRules[name] is an object, converting from simple value if needed
+                res += ` currentRules[${propertyName}] = typeof currentRules[${propertyName}] === 'object' ? currentRules[${propertyName}] : {"default": currentRules[${propertyName}]};`;
+                // Set the value for this specific condition
+                res += ` currentRules[${propertyName}][${conditionKey}] = ${valueJson};`;
+            } else res += ` currentRules[${propertyName}] = ${valueJson};`;
+            if (this.pseudos) $cf0b57705fca33e1$var$conditionStack.pop();
+        }
         return res;
     }
 }
@@ -559,18 +602,25 @@ function $cf0b57705fca33e1$var$layerName(name) {
     }
 }
 /** A rule that applies conditionally in CSS (e.g. @media). */ class $cf0b57705fca33e1$var$AtRule extends $cf0b57705fca33e1$var$GroupRule {
-    constructor(rules, prelude, layer){
+    constructor(rules, prelude, layer, themeCondition){
         super(rules, layer);
         this.prelude = prelude;
+        this.themeCondition = themeCondition;
     }
     copy() {
-        return new $cf0b57705fca33e1$var$AtRule(this.rules.map((rule)=>rule.copy()), this.prelude, this.layer);
+        return new $cf0b57705fca33e1$var$AtRule(this.rules.map((rule)=>rule.copy()), this.prelude, this.layer, this.themeCondition);
     }
     toCSS(rulesByLayer, preludes = [], layer) {
         preludes.push(this.prelude);
         super.toCSS(rulesByLayer, preludes, layer);
         preludes?.pop();
     }
+    toJS(allowedOverridesSet, indent) {
+        $cf0b57705fca33e1$var$conditionStack.push(this.themeCondition || this.prelude);
+        let res = super.toJS(allowedOverridesSet, indent);
+        $cf0b57705fca33e1$var$conditionStack.pop();
+        return res;
+    }
 }
 /** A rule that applies conditionally at runtime. */ class $cf0b57705fca33e1$var$ConditionalRule extends $cf0b57705fca33e1$var$GroupRule {
     constructor(rules, condition){
@@ -584,7 +634,10 @@ function $cf0b57705fca33e1$var$layerName(name) {
         throw new Error('Conditional rules cannot be compiled to a static class name. This is a bug.');
     }
     toJS(allowedOverridesSet, indent = '') {
-        return `${indent}if (props.${this.condition}) {\n${super.toJS(allowedOverridesSet, indent + '  ')}\n${indent}}`;
+        $cf0b57705fca33e1$var$conditionStack.push(this.condition);
+        let res = `${indent}if (props.${this.condition}) {\n${super.toJS(allowedOverridesSet, indent + '  ')}\n${indent}}`;
+        $cf0b57705fca33e1$var$conditionStack.pop();
+        return res;
     }
 }
 function $cf0b57705fca33e1$export$1776c186c69df29e(css, layer = '_.a') {
@@ -592,7 +645,6 @@ function $cf0b57705fca33e1$export$1776c186c69df29e(css, layer = '_.a') {
     // We also check if this is globalThis, which happens in non-strict mode bundles.
     // Also allow style to be called as a normal function in tests.
     // @ts-ignore
-    // eslint-disable-next-line
     if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The raw macro must be imported with {type: "macro"}.');
     let className = $cf0b57705fca33e1$var$generateArbitraryValueSelector(css, true);
     css = `@layer ${layer} {
@@ -613,7 +665,6 @@ function $cf0b57705fca33e1$export$d25ddfdf17c3ad3e(css) {
     // We also check if this is globalThis, which happens in non-strict mode bundles.
     // Also allow style to be called as a normal function in tests.
     // @ts-ignore
-    // eslint-disable-next-line
     if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The keyframes macro must be imported with {type: "macro"}.');
     let name = $cf0b57705fca33e1$var$generateArbitraryValueSelector(css, true);
     css = `@keyframes ${name} {