packages/build-tools/plugins/postcss-themify/src/index.js
function processRules(root) {
  root.walkRules(rule => {
    if (!hasThemify(rule.toString())) {
      return;
    }

    let aggragatedSelectorsMap = {};
    let aggragatedSelectors = [];

    let createdRules = [];
    const variationRules = {
      [defaultVariation]: rule,
    };

    rule.walkDecls(decl => {
      const propertyValue = decl.value;
      if (!hasThemify(propertyValue)) return;

      const property = decl.prop;

      const variationValueMap = getThemifyValue(
        propertyValue,
        ExecutionMode.CSS_VAR,
      );
      const defaultVariationValue = variationValueMap[defaultVariation];
      decl.value = defaultVariationValue;

      // indicate if we have a global rule, that cannot be nested
      const createNonDefaultVariationRules = isAtRule(rule);

      // don't create extra CSS for global rules
      if (createNonDefaultVariationRules) {
        return;
      }

      // create a new declaration and append it to each rule
      nonDefaultVariations.forEach(variationName => {
        const currentValue = variationValueMap[variationName];

        // variable for non-default variation is optional
        if (!currentValue || currentValue === 'null') {
          return;
        }

        // when the declaration is the same as the default variation,
        // we just need to concatenate our selector to the default rule
        if (currentValue === defaultVariationValue) {
          const selector = getSelectorName(rule, variationName);

          // append the selector once
          if (!aggragatedSelectorsMap[variationName]) {
            aggragatedSelectorsMap[variationName] = true;
            aggragatedSelectors.push(selector);
          }
        } else {
          // creating the rule for the first time
          if (!variationRules[variationName]) {
            const clonedRule = createRuleWithVariation(rule, variationName);
            variationRules[variationName] = clonedRule;
            // append the new rule to the array, so we can append it later
            createdRules.push(clonedRule);
          }

          const variationDecl = createDecl(
            property,
            variationValueMap[variationName],
          );
          variationRules[variationName].append(variationDecl);
        }
      });
    });

    if (aggragatedSelectors.length) {
      rule.selectors = [...rule.selectors];

      // Don't add extra redundant CSS selectors to every component using CSS vars
      // rule.selectors = [...rule.selectors, ...aggragatedSelectors];
    }

    // append each created rule
    if (createdRules.length) {
      createdRules.forEach(r => root.append(r));
    }
  });
}
function processRules(root) {
  root.walkRules(rule => {
    if (!hasThemify(rule.toString())) {
      return;
    }

    let aggragatedSelectorsMap = {};
    let aggragatedSelectors = [];

    let createdRules = [];
    const variationRules = {
      [defaultVariation]: rule,
    };

    rule.walkDecls(decl => {
      const propertyValue = decl.value;
      if (!hasThemify(propertyValue)) return;

      const property = decl.prop;

      const variationValueMap = getThemifyValue(
        propertyValue,
        ExecutionMode.CSS_VAR,
      );
      const defaultVariationValue = variationValueMap[defaultVariation];
      decl.value = defaultVariationValue;

      // indicate if we have a global rule, that cannot be nested
      const createNonDefaultVariationRules = isAtRule(rule);

      // don't create extra CSS for global rules
      if (createNonDefaultVariationRules) {
        return;
      }

      // create a new declaration and append it to each rule
      nonDefaultVariations.forEach(variationName => {
        const currentValue = variationValueMap[variationName];

        // variable for non-default variation is optional
        if (!currentValue || currentValue === 'null') {
          return;
        }

        // when the declaration is the same as the default variation,
        // we just need to concatenate our selector to the default rule
        if (currentValue === defaultVariationValue) {
          const selector = getSelectorName(rule, variationName);

          // append the selector once
          if (!aggragatedSelectorsMap[variationName]) {
            aggragatedSelectorsMap[variationName] = true;
            aggragatedSelectors.push(selector);
          }
        } else {
          // creating the rule for the first time
          if (!variationRules[variationName]) {
            const clonedRule = createRuleWithVariation(rule, variationName);
            variationRules[variationName] = clonedRule;
            // append the new rule to the array, so we can append it later
            createdRules.push(clonedRule);
          }

          const variationDecl = createDecl(
            property,
            variationValueMap[variationName],
          );
          variationRules[variationName].append(variationDecl);
        }
      });
    });

    if (aggragatedSelectors.length) {
      rule.selectors = [...rule.selectors];

      // Don't add extra redundant CSS selectors to every component using CSS vars
      // rule.selectors = [...rule.selectors, ...aggragatedSelectors];
    }

    // append each created rule
    if (createdRules.length) {
      createdRules.forEach(r => root.append(r));
    }
  });
}
function processRules ( root ) { root . walkRules ( rule => { if ( ! hasThemify ( rule . toString ( ) ) ) { return ; } let aggragatedSelectorsMap = { } ; let aggragatedSelectors = [ ] ; let createdRules = [ ] ; const variationRules = { [ defaultVariation ] : rule , } ; rule . walkDecls ( decl => { const propertyValue = decl . value ; if ( ! hasThemify ( propertyValue ) ) return ; const property = decl . prop ; const variationValueMap = getThemifyValue ( propertyValue , ExecutionMode . CSS_VAR , ) ; const defaultVariationValue = variationValueMap [ defaultVariation ] ; decl . value = defaultVariationValue ; // indicate if we have a global rule, that cannot be nested const createNonDefaultVariationRules = isAtRule ( rule ) ; // don't create extra CSS for global rules if ( createNonDefaultVariationRules ) { return ; } // create a new declaration and append it to each rule nonDefaultVariations . forEach ( variationName => { const currentValue = variationValueMap [ variationName ] ; // variable for non-default variation is optional if ( ! currentValue || currentValue === 'null' ) { return ; } // when the declaration is the same as the default variation, // we just need to concatenate our selector to the default rule if ( currentValue === defaultVariationValue ) { const selector = getSelectorName ( rule , variationName ) ; // append the selector once if ( ! aggragatedSelectorsMap [ variationName ] ) { aggragatedSelectorsMap [ variationName ] = true ; aggragatedSelectors . push ( selector ) ; } } else { // creating the rule for the first time if ( ! variationRules [ variationName ] ) { const clonedRule = createRuleWithVariation ( rule , variationName ) ; variationRules [ variationName ] = clonedRule ; // append the new rule to the array, so we can append it later createdRules . push ( clonedRule ) ; } const variationDecl = createDecl ( property , variationValueMap [ variationName ] , ) ; variationRules [ variationName ] . append ( variationDecl ) ; } } ) ; } ) ; if ( aggragatedSelectors . length ) { rule . selectors = [ ... rule . selectors ] ; // Don't add extra redundant CSS selectors to every component using CSS vars // rule.selectors = [...rule.selectors, ...aggragatedSelectors]; } // append each created rule if ( createdRules . length ) { createdRules . forEach ( r => root . append ( r ) ) ; } } ) ; }
Walk through all rules, and replace each themify occurrence with the corresponding CSS variable.
@example background-color: themify(primary-300, 0.5) => background-color: rgba(var(--primary-300),0.6)
@param root
Walk through all rules and replace each themify occurrence with the corresponding CSS variable .