fix(tailwind): Declarations with multiple variables not being resolved (#2089)

Author: gabrielmfern

.changeset/wet-guests-share.md

@@ -0,0 +1,5 @@
+---
+"@react-email/tailwind": patch
+---
+
+Fix multiple variables in the same declaration not being replaced properly

packages/tailwind/src/utils/css/resolve-all-css-variables.spec.ts

@@ -16,6 +16,23 @@ describe('resolveAllCSSVariables', () => {
 }`);
   });
 
+  it('should work with multiple variables in the same declaration', () => {
+    const root = parse(`:root {
+      --top: 101px;
+      --bottom: 102px;
+      --right: 103px;
+      --left: 104px;
+    }
+
+    .box {
+      margin: var(--top) var(--right) var(--bottom) var(--left);
+    }`);
+
+    expect(resolveAllCSSVariables(root).toString()).toBe(`.box {
+      margin: 101px 103px 102px 104px;
+    }`);
+  });
+
   it('should keep variable usages if it cant find their declaration', () => {
     const root = parse(`.box {
   width: var(--width);

packages/tailwind/src/utils/css/resolve-all-css-variables.ts

@@ -26,35 +26,39 @@ export const resolveAllCSSVariables = (root: Root) => {
     const declarationsForAtRules = new Map<AtRule, Set<Declaration>>();
     const valueReplacingInformation = new Set<{
       declaration: Declaration;
-      newValue: string;
+      replacing: string;
+      replacement: string;
     }>();
 
-    rule.walkDecls((decl) => {
-      if (/var\(--[^\s)]+\)/.test(decl.value)) {
+    rule.walkDecls((declaration) => {
+      if (/var\(--[^\s)]+\)/.test(declaration.value)) {
         /**
          * @example ['var(--width)', 'var(--length)']
          */
-        const variablesUsed = /var\(--[^\s)]+\)/gm.exec(decl.value);
+        const variablesUsed = [
+          ...declaration.value.matchAll(/var\(--[^\s)]+\)/gm),
+        ].map((match) => match.toString());
+
         root.walkDecls((otherDecl) => {
           if (/--[^\s]+/.test(otherDecl.prop)) {
             const variable = `var(${otherDecl.prop})`;
             if (
               variablesUsed?.includes(variable) &&
-              doNodesMatch(decl.parent, otherDecl.parent)
+              doNodesMatch(declaration.parent, otherDecl.parent)
             ) {
               if (
                 otherDecl.parent?.parent instanceof AtRule &&
-                otherDecl.parent !== decl.parent
+                otherDecl.parent !== declaration.parent
               ) {
                 const atRule = otherDecl.parent.parent;
 
                 const clonedDeclaration = createDeclaration();
-                clonedDeclaration.prop = decl.prop;
-                clonedDeclaration.value = decl.value.replaceAll(
+                clonedDeclaration.prop = declaration.prop;
+                clonedDeclaration.value = declaration.value.replaceAll(
                   variable,
                   otherDecl.value,
                 );
-                clonedDeclaration.important = decl.important;
+                clonedDeclaration.important = declaration.important;
 
                 const declarationForAtRule = declarationsForAtRules.get(atRule);
                 if (declarationForAtRule) {
@@ -69,17 +73,22 @@ export const resolveAllCSSVariables = (root: Root) => {
               }
 
               valueReplacingInformation.add({
-                declaration: decl,
-                newValue: decl.value.replaceAll(variable, otherDecl.value),
+                declaration,
+                replacing: variable,
+                replacement: otherDecl.value,
               });
             }
           }
         });
       }
     });
 
-    for (const { declaration, newValue } of valueReplacingInformation) {
-      declaration.value = newValue;
+    for (const {
+      declaration,
+      replacing,
+      replacement,
+    } of valueReplacingInformation) {
+      declaration.value = declaration.value.replaceAll(replacing, replacement);
     }
 
     for (const [atRule, declarations] of declarationsForAtRules.entries()) {