Function compileRule

packages/@react-spectrum/s2/style/style-macro.ts:682–776

(
    property: string,
    themeProperty: string,
    value: Value,
    priority: number,
    conditions: Set<string>,
    skipConditions: Set<string>
  )

  }

  function compileRule(
    property: string,
    themeProperty: string,
    value: Value,
    priority: number,
    conditions: Set<string>,
    skipConditions: Set<string>
  ): [number, Rule[]] {
    let propertyFunction = properties.get(themeProperty);
    if (propertyFunction) {
      // Expand value to conditional CSS values, and then to rules.
      let propertyValue = value;
      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];
            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(--${shortCSSPropertyName(cssProperties[0])}`;
              });
            }

            // Generate selector. This consists of three parts: property, conditions, value.
            let cssProperty = key;
            if (property.startsWith('--')) {
              cssProperty = propertyFunction.cssProperties[0];
            }

            let className = classNamePrefix(key, cssProperty);