@react-spectrum/s2 1.0.0 → 1.1.0

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

@@ -40,22 +40,26 @@ describe('style-macro', () => {
 "@layer _.a, _.b, _.c;
 
 @layer _.b {
-  .Jbs12:first-child {
+  .Jbs1:first-child {
     margin-top: 0.25rem;
   }
 }
 
 @layer _.c.p {
   @media (min-width: 64rem) {
-    .Jbpv12:first-child {
+    .Jbpv1:first-child {
       margin-top: 0.5rem;
     }
   }
 }
 
+.-macro-static-E8tar {
+        --macro-data-E8tar: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
-    expect(js).toMatchInlineSnapshot('" Jbs12 Jbpv12"');
+    expect(js).toMatchInlineSnapshot('" Jbs1 Jbpv1 -macro-static-E8tar"');
   });
 
   it('should support self references', () => {
@@ -69,55 +73,59 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  ._kc12 {
+  ._kc1 {
     border-top-width: 2px;
   }
 
 
-  .hc12 {
+  .hc1 {
     border-bottom-width: 2px;
   }
 
 
-  .mCPFGYc12 {
+  .mCPFGYc1 {
     border-inline-start-width: var(--m);
   }
 
 
-  .lc12 {
+  .lc1 {
     border-inline-end-width: 2px;
   }
 
 
-  .SMBFGYc12 {
+  .SMBFGYc1 {
     padding-inline-start: var(--S);
   }
 
 
-  .Rv12 {
+  .Rv1 {
     padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
   }
 
 
-  .ZjUQgKd12 {
+  .ZjUQgKd1 {
     width: calc(200px - var(--m) - var(--S));
   }
 
 
-  .-m_-mc12 {
+  .-m_-mc1 {
     --m: 2px;
   }
 
 
-  .-S_-Sv12 {
+  .-S_-Sv1 {
     --S: calc(var(--F, var(--M)) * 3 / 8);
   }
 }
 
+.-macro-static-ootVze {
+        --macro-data-ootVze: {"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('" _kc1 hc1 mCPFGYc1 lc1 SMBFGYc1 Rv1 ZjUQgKd1 -m_-mc1 -S_-Sv1 -macro-static-ootVze"');
   });
 
   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('"  gw1 pg1 -macro-dynamic-1g1t5qe"');
+    expect(overrides).toMatchInlineSnapshot('" g8tmWqb1 pHJ3AUd1 -macro-static-YWkqh"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb1 pg1 -macro-dynamic-w1re4y"');
   });
 
   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-B1 __Ya1 -macro-dynamic-1g21iuv"');
+    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D1 __Ya1 -macro-static-JbY0Pb"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D1 __Ya1 -macro-dynamic-7es7uh"');
   });
 
   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('"  Tk1 Qk1 Sk1 Rk1 -macro-dynamic-ov9j7t"');
+    expect(overrides).toMatchInlineSnapshot('" Tm1 Qm1 Sm1 Rm1 -macro-static-JNxqEe"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm1 Qm1 Sm1 Rm1 -macro-dynamic-x7v9g1"');
   });
 
   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-woabcc1 vx1 -macro-dynamic-4vhxg6"');
+    expect(overrides).toMatchInlineSnapshot('" -_6BNtrc-a1 vx1 -macro-static-mgSTCe"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_6BNtrc-a1 vx1 -macro-dynamic-wufo3s"');
   });
 
   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('"  gE1 -macro-dynamic-6mjybw"');
+    expect(overrides).toMatchInlineSnapshot('" Nk1 -macro-static-TMcWFd"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk1 gE1 -macro-dynamic-1255f06"');
   });
 
   it('should support runtime conditions', () => {
@@ -225,32 +233,32 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH12 {
+  .gH1 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF12 {
+  .gF1 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .gE12 {
+  .gE1 {
     background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 
 
-  .pt12 {
+  .pt1 {
     color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
   }
 
 
-  .po12 {
+  .po1 {
     color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
   }
 
 
-  .pm12 {
+  .pm1 {
     color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
   }
 }
@@ -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('"  gH1 pt1 -macro-dynamic-1e9ks2s"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF1 po1 -macro-dynamic-fs3pp9"');
+    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE1 pm1 -macro-dynamic-qy1zq2"');
   });
 
   it('should support nested runtime conditions', () => {
@@ -279,32 +287,32 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gH12 {
+  .gH1 {
     background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
   }
 
 
-  .gF12 {
+  .gF1 {
     background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
   }
 
 
-  .g_h12 {
+  .g_h1 {
     background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
   }
 
 
-  .g312 {
+  .g31 {
     background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
   }
 }
 
 "
 `);
-    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('"  gH1 -macro-dynamic-z0gpn3"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF1 -macro-dynamic-1rfxkr1"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h1 -macro-dynamic-tk9x4e"');
+    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('"  g31 -macro-dynamic-1defke2"');
   });
 
   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('"  gY1 -macro-dynamic-6gbj4w"');
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe1 -macro-dynamic-aqv4wq"');
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw1 -macro-dynamic-66ywce"');
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -338,14 +346,14 @@ describe('style-macro', () => {
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .plb12 {
+    .plb1 {
       color: ButtonText;
     }
   }
 
 
   @media (forced-colors: active) {
-    .ple12 {
+    .ple1 {
       color: HighlightText;
     }
   }
@@ -354,8 +362,8 @@ describe('style-macro', () => {
 "
 `);
 
-    expect(js({})).toMatchInlineSnapshot('"  plb12"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple12"');
+    expect(js({})).toMatchInlineSnapshot('"  plb1 -macro-dynamic-qa0mhq"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple1 -macro-dynamic-1inxdsx"');
   });
 
   it('should expand shorthand properties to longhands', () => {
@@ -363,31 +371,35 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" Th12 Qh12 Sh12 Rh12"');
+    expect(js).toMatchInlineSnapshot('" Th1 Qh1 Sh1 Rh1 -macro-static-tfFFV"');
     expect(css).toMatchInlineSnapshot(`
 "@layer _.a;
 
 @layer _.a {
-  .Th12 {
+  .Th1 {
     padding-top: 24px;
   }
 
 
-  .Qh12 {
+  .Qh1 {
     padding-bottom: 24px;
   }
 
 
-  .Sh12 {
+  .Sh1 {
     padding-inline-start: 24px;
   }
 
 
-  .Rh12 {
+  .Rh1 {
     padding-inline-end: 24px;
   }
 }
 
+.-macro-static-tfFFV {
+        --macro-data-tfFFV: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
   });
@@ -401,11 +413,15 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .gpQzfVb12 {
+  .gpQzfVb1 {
     background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
   }
 }
 
+.-macro-static-S2MtWd {
+        --macro-data-S2MtWd: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
+      }
+
 "
 `);
   });
@@ -422,11 +438,15 @@ describe('style-macro', () => {
 "@layer _.a;
 
 @layer _.a {
-  .-FUeYm-gE12 {
+  .-FUeYm-gE1 {
     --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
   }
 }
 
+.-macro-static-sFmj5 {
+        --macro-data-sFmj5: {"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} {