Class StyleRule

packages/@react-spectrum/s2/style/style-macro.ts:860–958

A CSS style rule.

/** A CSS style rule. */
class StyleRule implements Rule {
  className: string;
  pseudos: string;
  property: string;
  value: string;
  themeProperty: string | undefined;
  themeValue: Value | undefined;

  constructor(
    className: string,
    property: string,
    value: string,
    themeProperty: string | undefined,
    themeValue: Value | undefined
  ) {
    this.className = className;
    this.pseudos = '';
    this.property = property;
    this.value = value;
    if (process.env.NODE_ENV !== 'production' && isCompilingDependencies !== null) {
      this.themeProperty = themeProperty;
      this.themeValue = themeValue;
    }
  }

  copy(): Rule {
    let rule = new StyleRule(
      this.className,
      this.property,
      this.value,
      this.themeProperty,
      this.themeValue
    );
    rule.pseudos = this.pseudos;
    return rule;
  }

  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 += `${kebab(this.property)}: ${this.value};\n`;
    preludes.map((_, i) => {
      content += `${' '.repeat((preludes.length - i) * 2)}}\n`;
    });