Class GroupRule

packages/@react-spectrum/s2/style/style-macro.ts:961–1015

Base class for rules that contain other rules.

/** Base class for rules that contain other rules. */
class GroupRule implements Rule {
  rules: Rule[];
  layer: string | null;

  constructor(rules: Rule[], layer?: string | null) {
    this.rules = rules;
    this.layer = layer ?? null;
  }

  copy(): Rule {
    return new GroupRule(
      this.rules.map(rule => rule.copy()),
      this.layer
    );
  }

  addPseudo(prelude: string) {
    for (let rule of this.rules) {
      rule.addPseudo(prelude);
    }
  }

  getStaticClassName(): string {
    return this.rules.map(rule => rule.getStaticClassName()).join('');
  }

  toCSS(rulesByLayer: Map<string, string[]>, preludes?: string[], layer?: string) {
    for (let rule of this.rules) {
      rule.toCSS(rulesByLayer, preludes, this.layer || layer);
    }
  }

  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)}`;
      });

    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 {