fix(tailwind): resolve var() fallbacks inside variable definitions (#3768)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Felipe Freitag <felipe.freitag@resend.com>

Author: 3 people

.changeset/tailwind-resolve-var-fallbacks.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+`<Tailwind>` now inlines the default color for `shadow`, `shadow-md`, `ring-2` and similar classes, so these shadows show in email clients.

packages/react-email/src/components/tailwind/tailwind.spec.tsx

@@ -89,6 +89,64 @@ describe('Tailwind component', () => {
     `);
   });
 
+  it('resolves variables nested inside the definitions of other variables', async () => {
+    const html = await render(
+      <Tailwind>
+        <div className="shadow-md ring-2">default shadow color</div>
+      </Tailwind>,
+    );
+
+    expect(html).not.toContain('var(');
+    expect(html).toContain('0 4px 6px -1px rgb(0,0,0,0.1)');
+    expect(html).toContain('currentcolor');
+  });
+
+  it("uses each element's default shadow and ring colors independently", async () => {
+    const html = await render(
+      <Tailwind>
+        <div className="shadow-md ring-2">card</div>
+        <div className="shadow-red-500 ring-blue-500">button</div>
+      </Tailwind>,
+    );
+
+    expect(html).not.toContain('var(');
+    expect(html).toContain('0 4px 6px -1px rgb(0,0,0,0.1)');
+    expect(html).toContain('currentcolor');
+  });
+
+  it('preserves local colors without changing a sibling with the same utilities', async () => {
+    const html = await render(
+      <Tailwind>
+        <div className="shadow-md ring-2 shadow-[#ff0000] ring-[#0000ff]">
+          colored
+        </div>
+        <div className="shadow-md ring-2">default</div>
+      </Tailwind>,
+    );
+    const document = new DOMParser().parseFromString(html, 'text/html');
+    const [colored, defaultElement] = document.querySelectorAll('div');
+
+    expect(html).not.toContain('var(');
+    expect(colored?.style.boxShadow).toContain('rgb(255,0,0');
+    expect(colored?.style.boxShadow).toContain('rgb(0,0,255');
+    expect(defaultElement?.style.boxShadow).toContain('rgb(0,0,0,0.1)');
+    expect(defaultElement?.style.boxShadow).toContain('currentcolor');
+    expect(defaultElement?.style.boxShadow).not.toContain('rgb(255,0,0');
+  });
+
+  it('does not use hover shadow colors for the inline default', async () => {
+    const html = await render(
+      <Tailwind>
+        <Head />
+        <div className="shadow-md hover:shadow-red-500">card</div>
+      </Tailwind>,
+    );
+
+    expect(html).not.toContain('var(');
+    expect(html).toContain('0 4px 6px -1px rgb(0,0,0,0.1)');
+    expect(html).toContain('hover_shadow-red-500');
+  });
+
   it('works with class manipulation done on components', async () => {
     const MyComponnt = (props: {
       className?: string;

packages/react-email/src/components/tailwind/utils/css/make-inline-styles-for.ts

@@ -1,9 +1,32 @@
-import { type CssNode, type Declaration, generate, walk } from 'css-tree';
+import {
+  type CssNode,
+  type Declaration,
+  generate,
+  parse,
+  type Value,
+  walk,
+} from 'css-tree';
 import { getReactProperty } from '../compatibility/get-react-property.js';
 import type { CustomProperties } from './get-custom-properties.js';
+import { resolveCalcExpressions } from './resolve-calc-expressions.js';
+import { sanitizeDeclarations } from './sanitize-declarations.js';
 import { stripEmptyTailwindVars } from './strip-empty-tailwind-vars.js';
 import { unwrapValue } from './unwrap-value.js';
 
+function hasVarFunction(node: CssNode) {
+  let found = false;
+  walk(node, {
+    visit: 'Function',
+    enter(func) {
+      if (func.name === 'var') {
+        found = true;
+        return this.break;
+      }
+    },
+  });
+  return found;
+}
+
 export function makeInlineStylesFor(
   inlinableRules: CssNode[],
   customProperties: CustomProperties,
@@ -22,49 +45,70 @@ export function makeInlineStylesFor(
     });
   }
 
-  for (const rule of inlinableRules) {
-    walk(rule, {
+  const resolveValue = (
+    value: CssNode,
+    resolving = new Set<string>(),
+  ): CssNode => {
+    const resolved = parse(generate(value), { context: 'value' }) as Value;
+    walk(resolved, {
       visit: 'Function',
-      enter(func, funcParentListItem) {
-        if (func.name === 'var') {
-          let variableName: string | undefined;
-          walk(func, {
-            visit: 'Identifier',
-            enter(identifier) {
-              variableName = identifier.name;
-              return this.break;
-            },
-          });
-          if (variableName) {
-            const definition = localVariableDeclarations.get(variableName);
-            if (definition) {
-              funcParentListItem.data = unwrapValue(definition.value);
-            } else {
-              // For most variables tailwindcss defines, they also define a custom
-              // property for them with an initial value that we can inline here
-              const customProperty = customProperties.get(variableName);
-              if (customProperty?.initialValue) {
-                funcParentListItem.data = unwrapValue(
-                  customProperty.initialValue.value,
-                );
-              }
-            }
-          }
+      leave(func, item) {
+        if (func.name !== 'var') return;
+        const children = func.children.toArray();
+        const name = children[0] ? generate(children[0]).trim() : '';
+        if (resolving.has(name)) return;
+
+        const definition = localVariableDeclarations.get(name);
+        const initialValue = customProperties.get(name)?.initialValue;
+        const comma = children.findIndex(
+          (child) => child.type === 'Operator' && child.value === ',',
+        );
+        const fallback =
+          comma === -1
+            ? undefined
+            : children
+                .slice(comma + 1)
+                .map((child) => generate(child))
+                .join('');
+        const replacement = definition?.value ?? initialValue?.value;
+        if (replacement) {
+          item.data = unwrapValue(
+            resolveValue(replacement, new Set([...resolving, name])) as Value,
+          );
+        } else if (fallback) {
+          const declaration: Declaration = {
+            type: 'Declaration',
+            property: 'value',
+            important: false,
+            value: resolveValue(
+              parse(fallback, { context: 'value' }),
+              resolving,
+            ) as Value,
+          };
+          sanitizeDeclarations(declaration);
+          item.data = unwrapValue(declaration.value);
         }
       },
     });
+    return resolved;
+  };
 
+  for (const rule of inlinableRules) {
     walk(rule, {
       visit: 'Declaration',
       enter(declaration) {
         if (declaration.property.startsWith('--')) {
           return;
         }
-        stripEmptyTailwindVars(declaration.value);
+        let value: CssNode = declaration.value;
+        if (hasVarFunction(value)) {
+          value = resolveValue(value);
+          resolveCalcExpressions(value);
+          stripEmptyTailwindVars(value);
+        }
 
         styles[getReactProperty(declaration.property)] =
-          generate(declaration.value).trim() +
-          (declaration.important ? '!important' : '');
+          generate(value).trim() + (declaration.important ? '!important' : '');
       },
     });
   }