docs: 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));
      }
    });
  }