@react-spectrum/s2 3.0.0-nightly-63d4359d6-250428 → 3.0.0-nightly-1dd65ffc5-250430

package/style/dist/style-macro.mjs

@@ -1,3 +1,5 @@
+import $cXXcU$propertiesmjs2 from "./properties.mjs";
+
 /*
  * Copyright 2024 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -8,114 +10,83 @@
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ let $1d6343f16443be39$var$defaultArbitraryProperty = (value, property)=>({
-        [property]: value
-    });
-function $1d6343f16443be39$export$e33e260cb0fb20f7(fn = $1d6343f16443be39$var$defaultArbitraryProperty) {
-    return (value, property)=>{
-        let selector = Array.isArray(value) ? $1d6343f16443be39$var$generateArbitraryValueSelector(value.map((v)=>JSON.stringify(v)).join('')) : $1d6343f16443be39$var$generateArbitraryValueSelector(JSON.stringify(value));
-        return {
-            default: [
-                fn(value, property),
-                selector
-            ]
-        };
-    };
-}
-function $1d6343f16443be39$var$recursiveValues(obj) {
-    return Object.values(obj).flatMap((v)=>typeof v === 'object' ? $1d6343f16443be39$var$recursiveValues(v) : [
-            v
-        ]);
-}
-function $1d6343f16443be39$export$40f4ff17b27355ab(fn, values) {
-    let valueMap = $1d6343f16443be39$var$createValueLookup(Array.isArray(values) ? values : $1d6343f16443be39$var$recursiveValues(values));
-    return (value, property)=>{
-        let v = $1d6343f16443be39$export$22a8270399010c94(value);
-        if (v) return {
-            default: [
-                fn(v[0], property),
-                v[1]
-            ]
-        };
-        let val = Array.isArray(values) ? value : values[String(value)];
-        return $1d6343f16443be39$var$mapConditionalValue(val, (value)=>{
-            return [
-                fn(value, property),
-                valueMap.get(value)
-            ];
-        });
-    };
-}
-function $1d6343f16443be39$export$7fdf8c7af26ba416(name, values) {
-    return $1d6343f16443be39$export$40f4ff17b27355ab((value, property)=>({
-            [property.startsWith('--') ? property : name]: value
-        }), values);
-}
-function $1d6343f16443be39$export$fa08b74e8bc1d2a7(values, fn) {
-    let valueMap = $1d6343f16443be39$var$createValueLookup(Array.isArray(values) ? values : $1d6343f16443be39$var$recursiveValues(values));
-    return (value, property)=>{
-        let v = $1d6343f16443be39$export$22a8270399010c94(value);
-        if (v) return {
-            default: [
-                {
-                    [property]: v[0]
-                },
-                v[1]
-            ]
-        };
-        let val = values[String(value)];
-        if (val != null) return $1d6343f16443be39$var$mapConditionalValue(val, (value)=>{
-            return [
+ */ 
+class $1d6343f16443be39$export$d03475ad9df06cd2 {
+    constructor(property, toCSS){
+        this.property = property;
+        this.toCSS = toCSS || ((value)=>String(value));
+    }
+    get cssProperties() {
+        return [
+            this.property
+        ];
+    }
+    toCSSValue(value) {
+        return this.toCSS(value);
+    }
+    toCSSProperties(customProperty, value) {
+        return $1d6343f16443be39$var$mapConditionalValue(value, (value)=>[
                 {
-                    [property]: value
-                },
-                valueMap.get(value)
-            ];
-        });
-        if (typeof value === 'number') {
-            let cssValue = value === 0 ? '0px' : fn(value);
-            return {
-                default: [
-                    {
-                        [property]: cssValue
-                    },
-                    $1d6343f16443be39$var$generateName(value + valueMap.size)
-                ]
-            };
+                    [customProperty || this.property]: String(value)
+                }
+            ]);
+    }
+}
+class $1d6343f16443be39$export$965169194d2485f7 extends $1d6343f16443be39$export$d03475ad9df06cd2 {
+    constructor(property, mapping){
+        super(property);
+        this.mapping = mapping;
+    }
+    toCSSValue(value) {
+        if (Array.isArray(this.mapping)) {
+            if (!this.mapping.includes(String(value))) throw new Error('Invalid style value: ' + value);
+            return value;
+        } else {
+            let res = this.mapping[String(value)];
+            if (res == null) throw new Error('Invalid style value: ' + value);
+            return res;
         }
-        throw new Error('Invalid sizing value: ' + value);
-    };
+    }
 }
-function $1d6343f16443be39$export$852145629bb0d58b(colors, property) {
-    let valueMap = $1d6343f16443be39$var$createValueLookup(Object.values(colors).flatMap((v)=>typeof v === 'object' ? Object.values(v) : [
-            v
-        ]));
-    return (value, key)=>{
-        let v = $1d6343f16443be39$export$22a8270399010c94(value);
-        if (v) return {
-            default: [
-                {
-                    [property || key]: v[0]
-                },
-                v[1]
-            ]
-        };
+class $1d6343f16443be39$export$40ae678e65d951f2 extends $1d6343f16443be39$export$965169194d2485f7 {
+    toCSSValue(value) {
         let [color, opacity] = value.split('/');
-        let c = colors[color];
-        return $1d6343f16443be39$var$mapConditionalValue(c, (value)=>{
-            let css = opacity ? `rgb(from ${value} r g b / ${opacity}%)` : value;
-            let selector = valueMap.get(value) + (opacity ? opacity.replace('.', '-') : '');
-            return [
-                {
-                    [property || key]: css
-                },
-                selector
-            ];
+        return $1d6343f16443be39$var$mapConditionalValue(this.mapping[color], (value)=>{
+            return opacity ? `rgb(from ${value} r g b / ${opacity}%)` : value;
         });
-    };
+    }
+}
+class $1d6343f16443be39$export$8c6b4dc3755476bb extends $1d6343f16443be39$export$965169194d2485f7 {
+    constructor(property, mapping, numberToCSS){
+        super(property, mapping);
+        this.numberToCSS = numberToCSS;
+    }
+    toCSSValue(value) {
+        if (typeof value === 'number') return value === 0 ? '0px' : this.numberToCSS(value);
+        return super.toCSSValue(value);
+    }
+}
+class $1d6343f16443be39$export$1b6028cfca42adca {
+    constructor(properties, expand, mapping){
+        this.cssProperties = properties;
+        this.expand = expand;
+        this.mapping = mapping || null;
+    }
+    toCSSValue(value) {
+        if (!this.mapping) return value;
+        let res = this.mapping[String(value)];
+        if (res == null) throw new Error('Invalid style value: ' + value);
+        return res;
+    }
+    toCSSProperties(customProperty, value) {
+        if (customProperty) throw new Error('Style properties that expand into multiple CSS properties cannot be set as CSS variables.');
+        return $1d6343f16443be39$var$mapConditionalValue(value, (value)=>[
+                this.expand(value)
+            ]);
+    }
 }
 function $1d6343f16443be39$var$mapConditionalValue(value, fn) {
-    if (typeof value === 'object') {
+    if (typeof value === 'object' && !Array.isArray(value)) {
         let res = {};
         for(let condition in value)res[condition] = $1d6343f16443be39$var$mapConditionalValue(value[condition], fn);
         return res;
@@ -134,37 +105,28 @@ function $1d6343f16443be39$var$mapConditionalShorthand(value, fn) {
         return res;
     } else return fn(value);
 }
-function $1d6343f16443be39$var$createValueLookup(values, atStart = false) {
-    let map = new Map();
-    for (let value of values)if (!map.has(value)) map.set(value, $1d6343f16443be39$var$generateName(map.size, atStart));
-    return map;
-}
 function $1d6343f16443be39$export$22a8270399010c94(value) {
-    if (typeof value === 'string' && value.startsWith('--')) return [
-        `var(${value})`,
-        $1d6343f16443be39$var$generateArbitraryValueSelector(value)
-    ];
-    else if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') {
-        let s = $1d6343f16443be39$var$generateArbitraryValueSelector(value.slice(1, -1));
-        return [
-            value.slice(1, -1),
-            s
-        ];
-    }
+    if (typeof value === 'string' && value.startsWith('--')) return `var(${value})`;
+    else if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') return value.slice(1, -1);
+}
+function $1d6343f16443be39$var$shortCSSPropertyName(property) {
+    return $cXXcU$propertiesmjs1.properties[property] ?? $1d6343f16443be39$var$generateArbitraryValueSelector(property, true);
+}
+function $1d6343f16443be39$var$classNamePrefix(property, cssProperty) {
+    let className = $cXXcU$propertiesmjs1.properties[cssProperty];
+    if (className && property === '--' + className) return '-' + className + '_-';
+    if (className && !property.startsWith('--')) return className;
+    return '-' + $1d6343f16443be39$var$generateArbitraryValueSelector(property, true) + '-';
 }
 function $1d6343f16443be39$export$25d302a5b900a763(theme) {
-    let themePropertyMap = $1d6343f16443be39$var$createValueLookup(Object.keys(theme.properties), true);
-    let themeConditionMap = $1d6343f16443be39$var$createValueLookup(Object.keys(theme.conditions), true);
-    let propertyFunctions = new Map(Object.entries(theme.properties).map(([k, v])=>{
-        if (typeof v === 'function') return [
+    let properties = new Map(Object.entries(theme.properties).map(([k, v])=>{
+        if (!Array.isArray(v) && v.cssProperties) return [
             k,
             v
         ];
         return [
             k,
-            $1d6343f16443be39$export$40f4ff17b27355ab((value, p)=>({
-                    [p]: value
-                }), v)
+            new $1d6343f16443be39$export$965169194d2485f7(k, v)
         ];
     }));
     let dependencies = new Set();
@@ -180,10 +142,10 @@ function $1d6343f16443be39$export$25d302a5b900a763(theme) {
         let rules = new Map();
         let values = new Map();
         dependencies.clear();
-        let usedPriorities = 1;
+        let usedPriorities = 0;
         let setRules = (key, value)=>{
             usedPriorities = Math.max(usedPriorities, value[0]);
-            rules.set(key, value[1]);
+            rules.set(key, new $1d6343f16443be39$var$GroupRule(value[1]));
         };
         hasConditions = false;
         for(let key in style){
@@ -217,17 +179,14 @@ function $1d6343f16443be39$export$25d302a5b900a763(theme) {
             let value = values.get(dep);
             if (value != null) {
                 if (!(dep in theme.properties)) throw new Error(`Unknown dependency ${dep}`);
-                let name = `--${themePropertyMap.get(dep)}`;
+                let prop = properties.get(dep);
+                let name = `--${$1d6343f16443be39$var$shortCSSPropertyName(prop.cssProperties[0])}`;
                 // Could potentially use @property to prevent the var from inheriting in children.
                 setRules(name, compileValue(name, dep, value));
                 setRules(dep, compileValue(dep, dep, name));
             }
         }
         dependencies.clear();
-        // Prevent all global styles from leaking into this element.
-        // The :not(#a#b) raises the specificity of the selector by 2 ids,
-        // which can never occur on a real element, and will win over other
-        // selectors such as class and element selectors.
         let css = '';
         // Declare layers for each priority ahead of time so the order is always correct.
         css += '@layer ';
@@ -242,43 +201,52 @@ function $1d6343f16443be39$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 = 'let rules = " ";\n';
         if (allowedOverrides?.length) {
-            for (let property of allowedOverrides)if (themePropertyMap.has(property)) allowedOverridesSet.add(themePropertyMap.get(property));
-            js += `let matches = (overrides || '').match(/(?:^|\\s)(?:${[
-                ...allowedOverridesSet
-            ].join('|')})[^\\s]+/g) || [];\n`;
-            js += 'rules += matches.join(\'\');\n';
+            for (let property of allowedOverrides){
+                let shorthand = theme.shorthands[property];
+                let props = Array.isArray(shorthand) ? shorthand : [
+                    property
+                ];
+                for (let property of props){
+                    let prop = properties.get(property);
+                    if (!prop) throw new Error(`Invalid property ${property} in allowedOverrides`);
+                    for (let property of prop.cssProperties)allowedOverridesSet.add(property);
+                }
+            }
             let loop = '';
             for (let property of rules.keys()){
-                let themeProperty = themePropertyMap.get(property);
-                if (themeProperty && allowedOverridesSet.has(themeProperty)) {
-                    js += `let $${themeProperty} = false;\n`;
-                    loop += `  if (/^\\s*${themeProperty}/.test(p)) $${themeProperty} = true;\n`;
+                let prop = properties.get(property);
+                if (prop) {
+                    for (let property of prop.cssProperties)if (property && allowedOverridesSet.has(property)) {
+                        let selector = $1d6343f16443be39$var$classNamePrefix(property, property);
+                        let p = property.replace('--', '__');
+                        js += `let ${p} = false;\n`;
+                        loop += `  if (p[1] === ${JSON.stringify(selector)}) ${p} = true;\n`;
+                    }
                 }
             }
+            let regex = `/(?:^|\\s)(${[
+                ...allowedOverridesSet
+            ].map((p)=>$1d6343f16443be39$var$classNamePrefix(p, p)).join('|')})[^\\s]+/g`;
             if (loop) {
+                js += `let matches = (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`;
         }
         // Generate JS and CSS for each rule.
         let isStatic = !(hasConditions || allowedOverrides);
         let className = '';
         let rulesByLayer = new Map();
-        for (let [property, propertyRules] of rules){
-            if (isStatic) className += $1d6343f16443be39$var$getStaticClassName(propertyRules);
-            else {
-                let themeProperty = themePropertyMap.get(property);
-                let allowsOverrides = themeProperty && allowedOverridesSet.has(themeProperty);
-                if (allowsOverrides) // Omit the value if an override was passed in.
-                js += `if (!$${themeProperty}) {\n`;
-                js += $1d6343f16443be39$var$printJS(propertyRules) + '\n';
-                if (allowsOverrides) js += '}\n';
-            }
-            for (let rule of propertyRules)$1d6343f16443be39$var$printRule(rule, rulesByLayer);
-        }
+        let rootRule = new $1d6343f16443be39$var$GroupRule([
+            ...rules.values()
+        ]);
+        if (isStatic) className += rootRule.getStaticClassName();
+        else js += rootRule.toJS(allowedOverridesSet) + '\n';
+        rootRule.toCSS(rulesByLayer);
         for (let [layer, rules] of rulesByLayer){
             css += `@layer ${$1d6343f16443be39$var$layerName(layer)} {\n`;
             css += rules.join('\n\n');
@@ -320,12 +288,7 @@ function $1d6343f16443be39$export$25d302a5b900a763(theme) {
                 // The @layer order in the generated CSS will ensure that it overrides classes applied by runtime conditions.
                 let isCSSCondition = condition in theme.conditions || /^[@:]/.test(condition);
                 if (!wasCSSCondition && isCSSCondition && rules.length) rules = [
-                    {
-                        prelude: '',
-                        condition: '',
-                        layer: '',
-                        body: rules
-                    }
+                    new $1d6343f16443be39$var$GroupRule(rules)
                 ];
                 wasCSSCondition = isCSSCondition;
                 // Increment the current priority whenever we see a new CSS condition.
@@ -357,83 +320,62 @@ function $1d6343f16443be39$export$25d302a5b900a763(theme) {
     }
     function compileCondition(conditions, condition, priority, rules) {
         if (condition === 'default' || conditions.has(condition)) return [
-            {
-                prelude: '',
-                condition: '',
-                layer: '',
-                body: rules
-            }
+            new $1d6343f16443be39$var$GroupRule(rules)
         ];
         if (condition in theme.conditions || /^[@:]/.test(condition)) {
             // Conditions starting with : are CSS pseudo classes. Nest them inside the parent rule.
             let prelude = theme.conditions[condition] || condition;
-            if (prelude.startsWith(':')) return [
-                {
-                    prelude: '',
-                    layer: $1d6343f16443be39$var$generateName(priority, true),
-                    body: rules.map((rule)=>$1d6343f16443be39$var$nestRule(rule, prelude)),
-                    condition: ''
-                }
-            ];
+            if (prelude.startsWith(':')) {
+                for (let rule of rules)rule.addPseudo(prelude);
+                return [
+                    new $1d6343f16443be39$var$GroupRule(rules, $1d6343f16443be39$var$generateName(priority, true))
+                ];
+            }
             // Otherwise, wrap the rule in the condition (e.g. @media).
+            // 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 = `${$1d6343f16443be39$var$generateName(priority, true)}.${$cXXcU$propertiesmjs.conditions[theme.conditions[condition] || condition] || $1d6343f16443be39$var$generateArbitraryValueSelector(condition, true)}`;
             return [
-                {
-                    // 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.
-                    layer: `${$1d6343f16443be39$var$generateName(priority, true)}.${themeConditionMap.get(condition) || $1d6343f16443be39$var$generateArbitraryValueSelector(condition, true)}`,
-                    prelude: prelude,
-                    body: rules,
-                    condition: ''
-                }
+                new $1d6343f16443be39$var$AtRule(rules, prelude, layer)
             ];
         }
         hasConditions = true;
         return [
-            {
-                prelude: '',
-                layer: '',
-                condition: condition,
-                body: rules
-            }
+            new $1d6343f16443be39$var$ConditionalRule(rules, condition)
         ];
     }
     function compileRule(property, themeProperty, value, priority, conditions, skipConditions) {
-        // Generate selector. This consists of three parts:
-        // 1. Property. For custom properties we use a hash. For theme properties, we use the index within the theme.
-        // 2. Conditions. This uses the index within the theme.
-        // 3. Value. The index in the theme, or a hash for arbitrary values.
-        let prelude = '.';
-        if (property.startsWith('--')) // Include both custom property name and theme property in case the same var is reused between multiple theme properties.
-        prelude += $1d6343f16443be39$var$generateArbitraryValueSelector(property, true) + '_' + themePropertyMap.get(themeProperty) + '-';
-        else prelude += themePropertyMap.get(themeProperty);
-        let propertyFunction = propertyFunctions.get(themeProperty);
+        let propertyFunction = properties.get(themeProperty);
         if (propertyFunction) {
             // Expand value to conditional CSS values, and then to rules.
-            let res = propertyFunction(value, property);
-            return conditionalToRules(res, priority, conditions, skipConditions, (value, priority, conditions)=>{
-                let [obj, p] = value;
-                let body = '';
+            let arbitrary = $1d6343f16443be39$export$22a8270399010c94(value);
+            let cssValue = arbitrary ? arbitrary : propertyFunction.toCSSValue(value);
+            let cssProperties = propertyFunction.toCSSProperties(property.startsWith('--') ? property : null, cssValue);
+            return conditionalToRules(cssProperties, priority, conditions, skipConditions, (value, priority, conditions)=>{
+                let [obj] = value;
+                let rules = [];
                 for(let key in obj){
                     let k = key;
                     let value = obj[k];
                     if (value === undefined) continue;
                     if (typeof value === 'string') // Replace self() references with variables and track the dependencies.
                     value = value.replace(/self\(([a-zA-Z]+)/g, (_, v)=>{
+                        let prop = properties.get(v);
+                        if (!prop) throw new Error(`self(${v}) is invalid. ${v} is not a known property.`);
+                        let cssProperties = prop.cssProperties;
+                        if (cssProperties.length !== 1) throw new Error(`self(${v}) is not supported. ${v} expands to multiple CSS properties.`);
                         dependencies.add(v);
-                        return `var(--${themePropertyMap.get(v)}`;
+                        return `var(--${$1d6343f16443be39$var$shortCSSPropertyName(cssProperties[0])}`;
                     });
-                    body += `${$1d6343f16443be39$var$kebab(key)}: ${value};`;
+                    // Generate selector. This consists of three parts: property, conditions, value.
+                    let cssProperty = key;
+                    if (property.startsWith('--')) cssProperty = propertyFunction.cssProperties[0];
+                    let className = $1d6343f16443be39$var$classNamePrefix(key, cssProperty);
+                    if (conditions.size > 0) for (let condition of conditions)className += $cXXcU$propertiesmjs.conditions[theme.conditions[condition] || condition] || $1d6343f16443be39$var$generateArbitraryValueSelector(condition);
+                    if (cssProperty !== key) className += $1d6343f16443be39$var$shortCSSPropertyName(cssProperty);
+                    className += $cXXcU$propertiesmjs2.values[cssProperty]?.[String(value)] ?? $1d6343f16443be39$var$generateArbitraryValueSelector(String(value));
+                    rules.push(new $1d6343f16443be39$var$StyleRule(className, key, String(value)));
                 }
-                let selector = prelude;
-                if (conditions.size > 0) for (let condition of conditions)selector += themeConditionMap.get(condition) || $1d6343f16443be39$var$generateArbitraryValueSelector(condition);
-                let rules = [
-                    {
-                        condition: '',
-                        layer: '',
-                        prelude: selector + p,
-                        body: body
-                    }
-                ];
                 return [
                     0,
                     rules
@@ -442,25 +384,6 @@ function $1d6343f16443be39$export$25d302a5b900a763(theme) {
         } else throw new Error('Unknown property ' + themeProperty);
     }
 }
-function $1d6343f16443be39$var$nestRule(rule, prelude) {
-    if (Array.isArray(rule.body)) return {
-        prelude: rule.prelude,
-        layer: rule.layer,
-        body: rule.body.map((r)=>$1d6343f16443be39$var$nestRule(r, prelude)),
-        condition: rule.condition
-    };
-    else return {
-        prelude: rule.prelude,
-        layer: rule.layer,
-        body: [
-            {
-                ...rule,
-                prelude: '&' + prelude
-            }
-        ],
-        condition: ''
-    };
-}
 function $1d6343f16443be39$var$kebab(property) {
     if (property.startsWith('--')) return property;
     return property.replace(/([a-z])([A-Z])/g, (_, a, b)=>`${a}-${b.toLowerCase()}`);
@@ -480,9 +403,19 @@ function $1d6343f16443be39$var$generateName(index, atStart = false) {
 }
 // For arbitrary values, we use a hash of the string to generate the class name.
 function $1d6343f16443be39$var$generateArbitraryValueSelector(v, atStart = false) {
-    let c = $1d6343f16443be39$var$hash(v).toString(36);
+    let c = $1d6343f16443be39$var$toBase62($1d6343f16443be39$var$hash(v));
     if (atStart && /^[0-9]/.test(c)) c = `_${c}`;
-    return `-${c}`;
+    return c;
+}
+function $1d6343f16443be39$var$toBase62(value) {
+    if (value === 0) return $1d6343f16443be39$var$generateName(value);
+    let res = '';
+    while(value){
+        let remainder = value % 62;
+        res += $1d6343f16443be39$var$generateName(remainder);
+        value = Math.floor((value - remainder) / 62);
+    }
+    return res;
 }
 // djb2 hash function.
 // http://www.cse.yorku.ca/~oz/hash.html
@@ -496,46 +429,94 @@ function $1d6343f16443be39$var$layerName(name) {
     // the unsafe overrides layer always comes after.
     return `_.${name}`;
 }
-function $1d6343f16443be39$var$printRule(rule, rulesByLayer, preludes = [], layer = 'a') {
-    if (rule.prelude) preludes.push(rule.prelude);
-    if (typeof rule.body === 'string') {
+/** A CSS style rule. */ class $1d6343f16443be39$var$StyleRule {
+    constructor(className, property, value){
+        this.className = className;
+        this.pseudos = '';
+        this.property = property;
+        this.value = value;
+    }
+    addPseudo(prelude) {
+        this.pseudos += prelude;
+    }
+    getStaticClassName() {
+        return ' ' + this.className;
+    }
+    toCSS(rulesByLayer, preludes = [], layer = 'a') {
+        let prelude = `.${this.className}${this.pseudos}`;
+        preludes.push(prelude);
         // Nest rule in our stack of preludes (e.g. media queries/selectors).
         let content = '  ';
         preludes.forEach((p, i)=>{
             content += `${p} {\n${' '.repeat((i + 2) * 2)}`;
         });
-        content += rule.body + '\n';
+        content += `${$1d6343f16443be39$var$kebab(this.property)}: ${this.value};\n`;
         preludes.map((_, i)=>{
             content += `${' '.repeat((preludes.length - i) * 2)}}\n`;
         });
         // Group rule into the appropriate layer.
-        let rules = rulesByLayer.get(rule.layer || layer);
+        let rules = rulesByLayer.get(layer);
         if (!rules) {
             rules = [];
-            rulesByLayer.set(rule.layer || layer, rules);
+            rulesByLayer.set(layer, rules);
         }
         rules.push(content);
-    } else for (let b of rule.body)$1d6343f16443be39$var$printRule(b, rulesByLayer, preludes, rule.layer || layer);
-    if (rule.prelude) preludes.pop();
+        preludes.pop();
+    }
+    toJS(allowedOverridesSet, indent = '') {
+        let res = '';
+        if (allowedOverridesSet.has(this.property)) res += `${indent}if (!${this.property.replace('--', '__')}) `;
+        res += `${indent}rules += ' ${this.className}';`;
+        return res;
+    }
 }
-function $1d6343f16443be39$var$printJS(rules, indent = '') {
-    rules = rules.slice().reverse();
-    let conditional = rules.filter((rule)=>rule.condition).map((rule, i)=>{
-        return `${i > 0 ? ' else ' : ''}if (props.${rule.condition}) {\n${indent}  ${$1d6343f16443be39$var$printRuleChildren(rule, indent + '  ')}\n${indent}}`;
-    });
-    let elseCases = rules.filter((rule)=>!rule.condition).map((rule)=>$1d6343f16443be39$var$printRuleChildren(rule, indent + '  '));
-    if (conditional.length && elseCases.length) return `${conditional.join('')} else {\n${indent}  ${elseCases.join('\n' + indent + '  ')}\n${indent}}`;
-    if (conditional.length) return conditional.join('');
-    return elseCases.join('\n' + indent);
+/** Base class for rules that contain other rules. */ class $1d6343f16443be39$var$GroupRule {
+    constructor(rules, layer){
+        this.rules = rules;
+        this.layer = layer ?? null;
+    }
+    addPseudo(prelude) {
+        for (let rule of this.rules)rule.addPseudo(prelude);
+    }
+    getStaticClassName() {
+        return this.rules.map((rule)=>rule.getStaticClassName()).join('');
+    }
+    toCSS(rulesByLayer, preludes, layer) {
+        for (let rule of this.rules)rule.toCSS(rulesByLayer, preludes, this.layer || layer);
+    }
+    toJS(allowedOverridesSet, indent = '') {
+        let rules = this.rules.slice();
+        let conditional = rules.filter((rule)=>rule instanceof $1d6343f16443be39$var$ConditionalRule).reverse().map((rule, i)=>{
+            return `${i > 0 ? ' else ' : ''}${rule.toJS(allowedOverridesSet, indent)}`;
+        });
+        let elseCases = rules.filter((rule)=>!(rule instanceof $1d6343f16443be39$var$ConditionalRule)).map((rule)=>rule.toJS(allowedOverridesSet, indent));
+        if (conditional.length && elseCases.length) return `${conditional.join('')} else {\n${indent}  ${elseCases.join('\n' + indent + '  ')}\n${indent}}`;
+        if (conditional.length) return conditional.join('');
+        return elseCases.join('\n' + indent);
+    }
 }
-function $1d6343f16443be39$var$printRuleChildren(rule, indent = '') {
-    let res = '';
-    if (rule.prelude.startsWith('.')) res += `rules += ' ${rule.prelude.slice(1)}';`;
-    if (Array.isArray(rule.body)) res += $1d6343f16443be39$var$printJS(rule.body, indent);
-    return res;
+/** A rule that applies conditionally in CSS (e.g. @media). */ class $1d6343f16443be39$var$AtRule extends $1d6343f16443be39$var$GroupRule {
+    constructor(rules, prelude, layer){
+        super(rules, layer);
+        this.prelude = prelude;
+    }
+    toCSS(rulesByLayer, preludes = [], layer) {
+        preludes.push(this.prelude);
+        super.toCSS(rulesByLayer, preludes, layer);
+        preludes?.pop();
+    }
 }
-function $1d6343f16443be39$var$getStaticClassName(rules) {
-    return rules.map((rule)=>(rule.prelude.startsWith('.') ? ' ' + rule.prelude.slice(1) : '') + (Array.isArray(rule.body) ? $1d6343f16443be39$var$getStaticClassName(rule.body) : '')).join('');
+/** A rule that applies conditionally at runtime. */ class $1d6343f16443be39$var$ConditionalRule extends $1d6343f16443be39$var$GroupRule {
+    constructor(rules, condition){
+        super(rules);
+        this.condition = condition;
+    }
+    getStaticClassName() {
+        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}}`;
+    }
 }
 function $1d6343f16443be39$export$1776c186c69df29e(css, layer = '_.a') {
     // Check if `this` is undefined, which means style was not called as a macro but as a normal function.
@@ -577,5 +558,5 @@ function $1d6343f16443be39$export$d25ddfdf17c3ad3e(css) {
 }
 
 
-export {$1d6343f16443be39$export$e33e260cb0fb20f7 as createArbitraryProperty, $1d6343f16443be39$export$40f4ff17b27355ab as createMappedProperty, $1d6343f16443be39$export$22a8270399010c94 as parseArbitraryValue, $1d6343f16443be39$export$7fdf8c7af26ba416 as createRenamedProperty, $1d6343f16443be39$export$fa08b74e8bc1d2a7 as createSizingProperty, $1d6343f16443be39$export$852145629bb0d58b as createColorProperty, $1d6343f16443be39$export$25d302a5b900a763 as createTheme, $1d6343f16443be39$export$1776c186c69df29e as raw, $1d6343f16443be39$export$d25ddfdf17c3ad3e as keyframes};
+export {$1d6343f16443be39$export$d03475ad9df06cd2 as ArbitraryProperty, $1d6343f16443be39$export$965169194d2485f7 as MappedProperty, $1d6343f16443be39$export$40ae678e65d951f2 as ColorProperty, $1d6343f16443be39$export$8c6b4dc3755476bb as SizingProperty, $1d6343f16443be39$export$1b6028cfca42adca as ExpandedProperty, $1d6343f16443be39$export$22a8270399010c94 as parseArbitraryValue, $1d6343f16443be39$export$25d302a5b900a763 as createTheme, $1d6343f16443be39$export$1776c186c69df29e as raw, $1d6343f16443be39$export$d25ddfdf17c3ad3e as keyframes};
 //# sourceMappingURL=style-macro.mjs.map