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

package/style/style-macro.ts

@@ -10,84 +10,115 @@
  * governing permissions and limitations under the License.
  */
 
-import type {Condition, CSSProperties, CSSValue, CustomValue, PropertyFunction, PropertyValueDefinition, PropertyValueMap, RenderProps, ShorthandProperty, StyleFunction, StyleValue, Theme, ThemeProperties, Value} from './types';
+import type {Condition, CSSProperties, CSSValue, CustomValue, Property, PropertyValueDefinition, PropertyValueMap, RenderProps, ShorthandProperty, StyleFunction, StyleValue, Theme, ThemeProperties, Value} from './types';
+import * as propertyInfo from './properties.json';
 
-let defaultArbitraryProperty = <T>(value: T, property: string) => ({[property]: value} as CSSProperties);
-export function createArbitraryProperty<T>(fn: (value: T, property: string) => CSSProperties = defaultArbitraryProperty): PropertyFunction<T> {
-  return (value, property) => {
-    let selector = Array.isArray(value) ? generateArbitraryValueSelector(value.map(v => JSON.stringify(v)).join('')) : generateArbitraryValueSelector(JSON.stringify(value));
-    return {default: [fn(value, property), selector]};
-  };
-}
+export class ArbitraryProperty<T extends Value> implements Property<T> {
+  property: string;
+  toCSS: (value: T) => CSSValue;
 
-function recursiveValues(obj: object): string[] {
-  return Object.values(obj).flatMap(v => typeof v === 'object' ? recursiveValues(v) : [v]);
+  constructor(property: string, toCSS?: (value: T) => CSSValue) {
+    this.property = property;
+    this.toCSS = toCSS || ((value) => String(value));
+  }
+
+  get cssProperties(): string[] {
+    return [this.property];
+  }
+
+  toCSSValue(value: T): PropertyValueDefinition<Value> {
+    return this.toCSS(value);
+  }
+
+  toCSSProperties(customProperty: string | null, value: PropertyValueDefinition<Value>): PropertyValueDefinition<[CSSProperties]> {
+    return mapConditionalValue(value, value => [{[customProperty || this.property]: String(value)}]);
+  }
 }
 
-export function createMappedProperty<T extends CSSValue>(fn: (value: string, property: string) => CSSProperties, values: PropertyValueMap<T> | string[]): PropertyFunction<T> {
-  let valueMap = createValueLookup(Array.isArray(values) ? values : recursiveValues(values));
-  return (value, property) => {
-    let v = parseArbitraryValue(value);
-    if (v) {
-      return {default: [fn(v[0], property), v[1]]};
-    }
+export class MappedProperty<T extends CSSValue> extends ArbitraryProperty<T> implements Property<T> {
+  mapping: PropertyValueMap<T> | string[];
 
-    let val = Array.isArray(values) ? value : values[String(value)];
-    return mapConditionalValue(val, value => {
-      return [fn(value, property), valueMap.get(value)!];
-    });
-  };
+  constructor(property: string, mapping: PropertyValueMap<T> | string[]) {
+    super(property);
+    this.mapping = mapping;
+  }
+
+  toCSSValue(value: T): PropertyValueDefinition<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;
+    }
+  }
 }
 
-export function createRenamedProperty<T extends CSSValue>(name: string, values: PropertyValueMap<T> | string[]): PropertyFunction<T> {
-  return createMappedProperty((value, property) => ({[property.startsWith('--') ? property : name]: value}), values);
+export type Color<C extends string> = C | `${string}/${number}`;
+export class ColorProperty<C extends string> extends MappedProperty<C> implements Property<Color<C>> {
+  toCSSValue(value: Color<C>): PropertyValueDefinition<Value> {
+    let [color, opacity] = value.split('/');
+    return mapConditionalValue(this.mapping[color], value => {
+      return opacity ? `rgb(from ${value} r g b / ${opacity}%)` : value;
+    });
+  }
 }
 
-export function createSizingProperty<T extends CSSValue>(values: PropertyValueMap<T>, fn: (value: number) => string): PropertyFunction<T | (number & {})> {
-  let valueMap = createValueLookup(Array.isArray(values) ? values : recursiveValues(values));
-  return (value, property) => {
-    let v = parseArbitraryValue(value);
-    if (v) {
-      return {default: [{[property]: v[0]}, v[1]]};
-    }
+export class SizingProperty<T extends CSSValue> extends MappedProperty<T> implements Property<T | number> {
+  numberToCSS: (value: number) => string;
 
-    let val = values[String(value)];
-    if (val != null) {
-      return mapConditionalValue(val, value => {
-        return [{[property]: value}, valueMap.get(value)!];
-      });
-    }
+  constructor(property: string, mapping: PropertyValueMap<T> | string[], numberToCSS: (value: number) => string) {
+    super(property, mapping);
+    this.numberToCSS = numberToCSS;
+  }
 
+  toCSSValue(value: T | number): PropertyValueDefinition<Value> {
     if (typeof value === 'number') {
-      let cssValue = value === 0 ? '0px' : fn(value);
-      return {default: [{[property]: cssValue}, generateName(value + valueMap.size)]};
+      return value === 0 ? '0px' : this.numberToCSS(value);
     }
 
-    throw new Error('Invalid sizing value: ' + value);
-  };
+    return super.toCSSValue(value);
+  }
 }
 
-export type Color<C extends string> = C | `${string}/${number}`;
-export function createColorProperty<C extends string>(colors: PropertyValueMap<C>, property?: keyof CSSProperties): PropertyFunction<Color<C>> {
-  let valueMap = createValueLookup(Object.values(colors).flatMap((v: any) => typeof v === 'object' ? Object.values(v) : [v]));
-  return (value: Color<C>, key: string) => {
-    let v = parseArbitraryValue(value);
-    if (v) {
-      return {default: [{[property || key]: v[0]}, v[1]]};
+export class ExpandedProperty<T extends Value> implements Property<T> {
+  cssProperties: string[];
+  mapping: PropertyValueMap<CSSValue> | null;
+  expand: (v: T | CSSValue) => CSSProperties;
+
+  constructor(properties: string[], expand: (v: T | CSSValue) => CSSProperties, mapping?: PropertyValueMap<CSSValue>) {
+    this.cssProperties = properties;
+    this.expand = expand;
+    this.mapping = mapping || null;
+  }
+
+  toCSSValue(value: T): PropertyValueDefinition<Value> {
+    if (!this.mapping) {
+      return value;
     }
 
-    let [color, opacity] = value.split('/');
-    let c = colors[color];
-    return 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];
-    });
-  };
+    let res = this.mapping[String(value)];
+    if (res == null) {
+      throw new Error('Invalid style value: ' + value);
+    }
+    return res;
+  }
+
+  toCSSProperties(customProperty: string | null, value: PropertyValueDefinition<T>): PropertyValueDefinition<[CSSProperties]> {
+    if (customProperty) {
+      throw new Error('Style properties that expand into multiple CSS properties cannot be set as CSS variables.');
+    }
+    return mapConditionalValue(value, value => [this.expand(value)]);
+  }
 }
 
 function mapConditionalValue<T, U>(value: PropertyValueDefinition<T>, fn: (value: T) => U): PropertyValueDefinition<U> {
-  if (typeof value === 'object') {
+  if (typeof value === 'object' && !Array.isArray(value)) {
     let res: PropertyValueDefinition<U> = {};
     for (let condition in value) {
       res[condition] = mapConditionalValue((value as any)[condition], fn);
@@ -114,23 +145,29 @@ function mapConditionalShorthand<T, C extends string, R extends RenderProps<stri
   }
 }
 
-function createValueLookup(values: Array<CSSValue>, atStart = false) {
-  let map = new Map<CSSValue, string>();
-  for (let value of values) {
-    if (!map.has(value)) {
-      map.set(value, generateName(map.size, atStart));
-    }
+export function parseArbitraryValue(value: Value): string | undefined {
+  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);
   }
-  return map;
 }
 
-export function parseArbitraryValue(value: string | number): string[] | undefined {
-  if (typeof value === 'string' && value.startsWith('--')) {
-    return [`var(${value})`, generateArbitraryValueSelector(value)];
-  } else if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') {
-    let s = generateArbitraryValueSelector(value.slice(1, -1));
-    return [value.slice(1, -1), s];
+function shortCSSPropertyName(property: string) {
+  return propertyInfo.properties[property] ?? generateArbitraryValueSelector(property, true);
+}
+
+function classNamePrefix(property: string, cssProperty: string) {
+  let className = propertyInfo.properties[cssProperty];
+  if (className && property === '--' + className) {
+    return '-' + className + '_-';
   }
+
+  if (className && !property.startsWith('--')) {
+    return className;
+  }
+
+  return '-' + generateArbitraryValueSelector(property, true) + '-';
 }
 
 interface MacroContext {
@@ -138,13 +175,12 @@ interface MacroContext {
 }
 
 export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemeProperties<T>, 'default' | Extract<keyof T['conditions'], string>> {
-  let themePropertyMap = createValueLookup(Object.keys(theme.properties), true);
-  let themeConditionMap = createValueLookup(Object.keys(theme.conditions), true);
-  let propertyFunctions = new Map(Object.entries(theme.properties).map(([k, v]) => {
-    if (typeof v === 'function') {
-      return [k, v];
+  let properties = new Map<string, Property<any>>(Object.entries(theme.properties).map(([k, v]) => {
+    if (!Array.isArray(v) && v.cssProperties) {
+      return [k, v as Property<any>];
     }
-    return [k, createMappedProperty((value, p) => ({[p]: value}), v) as PropertyFunction<Value>];
+
+    return [k, new MappedProperty(k, v as any)];
   }));
 
   let dependencies = new Set<string>();
@@ -160,13 +196,13 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     }
 
     // Generate rules for each property.
-    let rules = new Map<string, Rule[]>();
+    let rules = new Map<string, Rule>();
     let values =  new Map();
     dependencies.clear();
-    let usedPriorities = 1;
+    let usedPriorities = 0;
     let setRules = (key: string, value: [number, Rule[]]) => {
       usedPriorities = Math.max(usedPriorities, value[0]);
-      rules.set(key, value[1]);
+      rules.set(key, new GroupRule(value[1]));
     };
 
     hasConditions = false;
@@ -210,7 +246,8 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
         if (!(dep in theme.properties)) {
           throw new Error(`Unknown dependency ${dep}`);
         }
-        let name = `--${themePropertyMap.get(dep)}`;
+        let prop = properties.get(dep)!;
+        let name = `--${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));
@@ -218,10 +255,6 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     }
     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.
@@ -241,28 +274,46 @@ 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 = " ";\n';
     if (allowedOverrides?.length) {
       for (let property of allowedOverrides) {
-        if (themePropertyMap.has(property as string)) {
-          allowedOverridesSet.add(themePropertyMap.get(property as string)!);
+        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);
+          }
         }
       }
 
-      js += `let matches = (overrides || '').match(/(?:^|\\s)(?:${[...allowedOverridesSet].join('|')})[^\\s]+/g) || [];\n`;
-      js += 'rules += matches.join(\'\');\n';
       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 = 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 => 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`;
       }
     }
 
@@ -270,25 +321,13 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     let isStatic = !(hasConditions || allowedOverrides);
     let className = '';
     let rulesByLayer = new Map<string, string[]>();
-    for (let [property, propertyRules] of rules) {
-      if (isStatic) {
-        className += 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 += printJS(propertyRules) + '\n';
-        if (allowsOverrides) {
-          js += '}\n';
-        }
-      }
-      for (let rule of propertyRules) {
-        printRule(rule, rulesByLayer);
-      }
+    let rootRule = new 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 ${layerName(layer)} {\n`;
@@ -352,7 +391,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
         // 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}];
+          rules = [new GroupRule(rules)];
         }
         wasCSSCondition = isCSSCondition;
 
@@ -390,56 +429,42 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
 
   function compileCondition(conditions: Set<string>, condition: string, priority: number, rules: Rule[]): Rule[] {
     if (condition === 'default' || conditions.has(condition)) {
-      return [{prelude: '', condition: '', layer: '', body: rules}];
+      return [new 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: generateName(priority, true),
-          body: rules.map(rule => nestRule(rule, prelude)),
-          condition: ''
-        }];
+        for (let rule of rules) {
+          rule.addPseudo(prelude);
+        }
+
+        return [new GroupRule(rules, generateName(priority, true))];
       }
 
       // Otherwise, wrap the rule in the condition (e.g. @media).
-      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: `${generateName(priority, true)}.${themeConditionMap.get(condition) || generateArbitraryValueSelector(condition, true)}`,
-        prelude,
-        body: rules,
-        condition: ''
-      }];
+      // 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[theme.conditions[condition] || condition] || generateArbitraryValueSelector(condition, true)}`;
+      return [new AtRule(rules, prelude, layer)];
     }
 
     hasConditions = true;
-    return [{prelude: '', layer: '', condition, body: rules}];
+    return [new ConditionalRule(rules, condition)];
   }
 
   function compileRule(property: string, themeProperty: string, value: Value, priority: number, conditions: Set<string>, skipConditions: Set<string>): [number, Rule[]] {
-    // 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 += 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 = parseArbitraryValue(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: Rule[] = [];
         for (let key in obj) {
           let k = key as any;
           let value = obj[k];
@@ -449,26 +474,39 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
           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(--${shortCSSPropertyName(cssProperties[0])}`;
             });
           }
-          body += `${kebab(key)}: ${value};`;
-        }
 
-        let selector = prelude;
-        if (conditions.size > 0) {
-          for (let condition of conditions) {
-            selector += themeConditionMap.get(condition) || generateArbitraryValueSelector(condition);
+          // Generate selector. This consists of three parts: property, conditions, value.
+          let cssProperty = key;
+          if (property.startsWith('--')) {
+            cssProperty = propertyFunction.cssProperties[0];
           }
-        }
 
-        let rules: Rule[] = [{
-          condition: '',
-          layer: '',
-          prelude: selector + p,
-          body
-        }];
+          let className = classNamePrefix(key, cssProperty);
+          if (conditions.size > 0) {
+            for (let condition of conditions) {
+              className += propertyInfo.conditions[theme.conditions[condition] || condition] || generateArbitraryValueSelector(condition);
+            }
+          }
+
+          if (cssProperty !== key) {
+            className += shortCSSPropertyName(cssProperty);
+          }
+
+          className += propertyInfo.values[cssProperty]?.[String(value)] ?? generateArbitraryValueSelector(String(value));
+          rules.push(new StyleRule(className, key, String(value)));
+        }
 
         return [0, rules];
       });
@@ -478,24 +516,6 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
   }
 }
 
-function nestRule(rule: Rule, prelude: string): Rule {
-  if (Array.isArray(rule.body)) {
-    return {
-      prelude: rule.prelude,
-      layer: rule.layer,
-      body: rule.body.map(r => nestRule(r, prelude)),
-      condition: rule.condition
-    };
-  } else {
-    return {
-      prelude: rule.prelude,
-      layer: rule.layer,
-      body: [{...rule, prelude: '&' + prelude}],
-      condition: ''
-    };
-  }
-}
-
 function kebab(property: string) {
   if (property.startsWith('--')) {
     return property;
@@ -503,13 +523,6 @@ function kebab(property: string) {
   return property.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`);
 }
 
-interface Rule {
-  prelude: string,
-  layer: string,
-  condition: string,
-  body: string | Rule[]
-}
-
 // Generate a class name from a number, e.g. index within the theme.
 // This maps to an alphabet containing lower case letters, upper case letters, and numbers.
 // For numbers larger than 62, an underscore is prepended.
@@ -535,11 +548,26 @@ function generateName(index: number, atStart = false): string {
 
 // For arbitrary values, we use a hash of the string to generate the class name.
 function generateArbitraryValueSelector(v: string, atStart = false) {
-  let c = hash(v).toString(36);
+  let c = toBase62(hash(v));
   if (atStart && /^[0-9]/.test(c)) {
     c = `_${c}`;
   }
-  return `-${c}`;
+  return c;
+}
+
+function toBase62(value: number) {
+  if (value === 0) {
+    return generateName(value);
+  }
+
+  let res = '';
+  while (value) {
+    let remainder = value % 62;
+    res += generateName(remainder);
+    value = Math.floor((value - remainder) / 62);
+  }
+
+  return res;
 }
 
 // djb2 hash function.
@@ -558,75 +586,146 @@ function layerName(name: string) {
   return `_.${name}`;
 }
 
-function printRule(rule: Rule, rulesByLayer: Map<string, string[]>, preludes: string[] = [], layer = 'a') {
-  if (rule.prelude) {
-    preludes.push(rule.prelude);
+interface Rule {
+  addPseudo(prelude: string): void,
+  getStaticClassName(): string,
+  toCSS(rulesByLayer: Map<string, string[]>, preludes?: string[], layer?: string): void,
+  toJS(allowedOverridesSet: Set<string>, indent?: string): string
+}
+
+/** A CSS style rule. */
+class StyleRule implements Rule {
+  className: string;
+  pseudos: string;
+  property: string;
+  value: string;
+
+  constructor(className: string, property: string, value: string) {
+    this.className = className;
+    this.pseudos = '';
+    this.property = property;
+    this.value = value;
   }
 
-  if (typeof rule.body === 'string') {
+  addPseudo(prelude: string) {
+    this.pseudos += prelude;
+  }
+
+  getStaticClassName(): string {
+    return ' ' + this.className;
+  }
+
+  toCSS(rulesByLayer: Map<string, string[]>, preludes: string[] = [], 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 += `${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) {
-      printRule(b, rulesByLayer, preludes, rule.layer || layer);
-    }
+    preludes.pop();
   }
 
-  if (rule.prelude) {
-    preludes.pop();
+  toJS(allowedOverridesSet: Set<string>, indent = ''): string {
+    let res = '';
+    if (allowedOverridesSet.has(this.property)) {
+      res += `${indent}if (!${this.property.replace('--', '__')}) `;
+    }
+    res +=  `${indent}rules += ' ${this.className}';`;
+    return res;
   }
 }
 
-function printJS(rules: Rule[], indent = ''): string {
-  rules = rules.slice().reverse();
+/** Base class for rules that contain other rules. */
+class GroupRule implements Rule {
+  rules: Rule[];
+  layer: string | null;
 
-  let conditional = rules.filter(rule => rule.condition).map((rule, i) => {
-    return `${i > 0 ? ' else ' : ''}if (props.${rule.condition}) {\n${indent}  ${printRuleChildren(rule, indent + '  ')}\n${indent}}`;
-  });
+  constructor(rules: Rule[], layer?: string) {
+    this.rules = rules;
+    this.layer = layer ?? null;
+  }
 
-  let elseCases = rules.filter(rule => !rule.condition).map(rule => printRuleChildren(rule, indent + '  '));
+  addPseudo(prelude: string) {
+    for (let rule of this.rules) {
+      rule.addPseudo(prelude);
+    }
+  }
 
-  if (conditional.length && elseCases.length) {
-    return `${conditional.join('')} else {\n${indent}  ${elseCases.join('\n' + indent + '  ')}\n${indent}}`;
+  getStaticClassName(): string {
+    return this.rules.map(rule => rule.getStaticClassName()).join('');
   }
 
-  if (conditional.length) {
-    return conditional.join('');
+  toCSS(rulesByLayer: Map<string, string[]>, preludes?: string[], layer?: string) {
+    for (let rule of this.rules) {
+      rule.toCSS(rulesByLayer, preludes, this.layer || layer);
+    }
   }
 
-  return elseCases.join('\n' + indent);
-}
+  toJS(allowedOverridesSet: Set<string>, indent = ''): string {
+    let rules = this.rules.slice();
+    let conditional = rules.filter(rule => rule instanceof ConditionalRule).reverse().map((rule, i) => {
+      return `${i > 0 ? ' else ' : ''}${rule.toJS(allowedOverridesSet, indent)}`;
+    });
 
-function printRuleChildren(rule: Rule, indent = '') {
-  let res = '';
-  if (rule.prelude.startsWith('.')) {
-    res +=  `rules += ' ${rule.prelude.slice(1)}';`;
+    let elseCases = rules.filter(rule => !(rule instanceof 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);
   }
+}
+
+/** A rule that applies conditionally in CSS (e.g. @media). */
+class AtRule extends GroupRule {
+  prelude: string;
 
-  if (Array.isArray(rule.body)) {
-    res += printJS(rule.body, indent);
+  constructor(rules: Rule[], prelude: string, layer: string) {
+    super(rules, layer);
+    this.prelude = prelude;
   }
 
-  return res;
+  toCSS(rulesByLayer: Map<string, string[]>, preludes: string[] = [], layer?: string): void {
+    preludes.push(this.prelude);
+    super.toCSS(rulesByLayer, preludes, layer);
+    preludes?.pop();
+  }
 }
 
-function getStaticClassName(rules: Rule[]): string {
-  return rules.map(rule => (rule.prelude.startsWith('.') ? ' ' + rule.prelude.slice(1) : '') + (Array.isArray(rule.body) ? getStaticClassName(rule.body) : '')).join('');
+/** A rule that applies conditionally at runtime. */
+class ConditionalRule extends GroupRule {
+  condition: string;
+
+  constructor(rules: Rule[], condition: string) {
+    super(rules);
+    this.condition = condition;
+  }
+
+  getStaticClassName(): string {
+    throw new Error('Conditional rules cannot be compiled to a static class name. This is a bug.');
+  }
+
+  toJS(allowedOverridesSet: Set<string>, indent = ''): string {
+    return `${indent}if (props.${this.condition}) {\n${super.toJS(allowedOverridesSet, indent + '  ')}\n${indent}}`;
+  }
 }
 
 export function raw(this: MacroContext | void, css: string, layer = '_.a'): string {