react-email 6.0.4 → 6.0.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # react-email
 
+## 6.0.6
+
+### Patch Changes
+
+- 84bb7ab: collapse empty-fallback var() refs in inline styles
+
+## 6.0.5
+
 ## 6.0.4
 
 ### Patch Changes

package/dist/cli/index.mjs

@@ -6522,7 +6522,7 @@ const getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFil
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.0.4",
+	version: "6.0.6",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",

package/dist/index.cjs

@@ -37790,7 +37790,35 @@ function makeInlineStylesFor(inlinableRules, customProperties) {
 			visit: "Declaration",
 			enter(declaration) {
 				if (declaration.property.startsWith("--")) return;
-				styles[getReactProperty(declaration.property)] = generate(declaration.value) + (declaration.important ? "!important" : "");
+				walk(declaration.value, {
+					visit: "Function",
+					leave(func, funcItem, funcList) {
+						if (func.name !== "var") return;
+						let variableName;
+						walk(func, {
+							visit: "Identifier",
+							enter(identifier) {
+								variableName = identifier.name;
+								return this.break;
+							}
+						});
+						if (!variableName?.startsWith("--tw-")) return;
+						let sawComma = false;
+						let hasFallbackContent = false;
+						func.children.forEach((child) => {
+							if (!sawComma) {
+								if (child.type === "Operator" && child.value === ",") sawComma = true;
+								return;
+							}
+							let childValue = generate(child).trim();
+							if (child.type === "Raw") childValue = childValue.replaceAll(/var\(--tw-[^,()]+,\s*\)/g, "").trim();
+							if (childValue.length > 0) hasFallbackContent = true;
+						});
+						if (!sawComma || hasFallbackContent) return;
+						funcList.remove(funcItem);
+					}
+				});
+				styles[getReactProperty(declaration.property)] = generate(declaration.value).trim() + (declaration.important ? "!important" : "");
 			}
 		});
 	}

package/dist/index.mjs

@@ -37769,7 +37769,35 @@ function makeInlineStylesFor(inlinableRules, customProperties) {
 			visit: "Declaration",
 			enter(declaration) {
 				if (declaration.property.startsWith("--")) return;
-				styles[getReactProperty(declaration.property)] = generate(declaration.value) + (declaration.important ? "!important" : "");
+				walk(declaration.value, {
+					visit: "Function",
+					leave(func, funcItem, funcList) {
+						if (func.name !== "var") return;
+						let variableName;
+						walk(func, {
+							visit: "Identifier",
+							enter(identifier) {
+								variableName = identifier.name;
+								return this.break;
+							}
+						});
+						if (!variableName?.startsWith("--tw-")) return;
+						let sawComma = false;
+						let hasFallbackContent = false;
+						func.children.forEach((child) => {
+							if (!sawComma) {
+								if (child.type === "Operator" && child.value === ",") sawComma = true;
+								return;
+							}
+							let childValue = generate(child).trim();
+							if (child.type === "Raw") childValue = childValue.replaceAll(/var\(--tw-[^,()]+,\s*\)/g, "").trim();
+							if (childValue.length > 0) hasFallbackContent = true;
+						});
+						if (!sawComma || hasFallbackContent) return;
+						funcList.remove(funcItem);
+					}
+				});
+				styles[getReactProperty(declaration.property)] = generate(declaration.value).trim() + (declaration.important ? "!important" : "");
 			}
 		});
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "6.0.4",
+  "version": "6.0.6",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"

package/src/components/tailwind/utils/css/make-inline-styles-for.spec.ts

@@ -41,11 +41,84 @@ describe('makeInlineStylesFor()', async () => {
       ),
     ).toMatchInlineSnapshot(`
       {
-        "backgroundColor": " #3490dc",
+        "backgroundColor": "#3490dc",
         "borderRadius": "0.25rem",
-        "color": " #fff",
+        "color": "#fff",
         "padding": "0.5rem 1rem",
       }
     `);
   });
+
+  it('strips Tailwind v4 variant-stacking var() refs with empty fallbacks', () => {
+    // Tailwind v4 compiles `tabular-nums` to a font-variant-numeric value
+    // where every optional variant slot is represented by an unresolved
+    // var(--tw-..., ) with an empty fallback. Email clients do not support
+    // CSS custom properties reliably, so these must collapse at inline time
+    // (per CSS spec, an empty fallback resolves to empty string).
+    const tailwindStyles = parse(`
+      .tabular-nums {
+        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) tabular-nums var(--tw-numeric-fraction,);
+      }
+    `) as StyleSheet;
+
+    expect(
+      makeInlineStylesFor(
+        tailwindStyles.children.toArray(),
+        getCustomProperties(tailwindStyles),
+      ),
+    ).toMatchInlineSnapshot(`
+      {
+        "fontVariantNumeric": "tabular-nums",
+      }
+    `);
+  });
+
+  it('preserves user-authored empty-fallback var() refs (non --tw- prefix)', () => {
+    // The collapse is scoped to Tailwind's --tw-* variant-stacking idiom.
+    // A user-authored var(--my-color,) with an empty fallback must pass
+    // through unchanged even though it syntactically matches the idiom --
+    // the user opted into that semantic and the render target may define
+    // --my-color at a higher scope.
+    const userStyles = parse(`
+      .thing {
+        color: var(--my-color,);
+        background: var(--brand,) var(--tw-custom,);
+      }
+    `) as StyleSheet;
+
+    expect(
+      makeInlineStylesFor(
+        userStyles.children.toArray(),
+        getCustomProperties(userStyles),
+      ),
+    ).toMatchInlineSnapshot(`
+      {
+        "background": "var(--brand,)",
+        "color": "var(--my-color,)",
+      }
+    `);
+  });
+
+  it('collapses outer --tw-* var() that becomes empty after inner --tw-* var() collapses', () => {
+    // Regression test for cubic-dev-ai P2 review on PR #3359:
+    // pre-order traversal misses outer var(--tw-X, var(--tw-Y,)) because the
+    // outer's fallback only becomes empty AFTER the inner collapses. Post-order
+    // traversal fixes this.
+    const tailwindStyles = parse(`
+      .nested {
+        font-variant-numeric: var(--tw-outer, var(--tw-inner,)) tabular-nums;
+      }
+    `) as StyleSheet;
+
+    expect(
+      makeInlineStylesFor(
+        tailwindStyles.children.toArray(),
+        getCustomProperties(tailwindStyles),
+      ),
+    ).toMatchInlineSnapshot(`
+      {
+        "fontVariantNumeric": "tabular-nums",
+      }
+    `);
+  });
 });

package/src/components/tailwind/utils/css/make-inline-styles-for.ts

@@ -59,8 +59,71 @@ export function makeInlineStylesFor(
         if (declaration.property.startsWith('--')) {
           return;
         }
+        // Tailwind v4 emits variant-stacking idioms like
+        //   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) tabular-nums var(--tw-numeric-fraction,)
+        // where each var() has an empty fallback so missing variants collapse to nothing.
+        // The walker above replaces var() calls with an initialValue when one is defined,
+        // but Tailwind deliberately leaves these variant vars undefined until used, so they
+        // stay in the output here and produce unresolvable custom properties in email HTML
+        // (no email client supports CSS custom properties reliably). Per the CSS spec
+        // (https://www.w3.org/TR/css-variables-1/#using-variables) an empty fallback means
+        // "use empty string if the variable is undefined", which is exactly what we want at
+        // inline-style time.
+        //
+        // Scoped to the `--tw-` prefix so any user-authored empty-fallback var() refs
+        // (even ones used inside tailwind utilities) are left untouched.
+        walk(declaration.value, {
+          visit: 'Function',
+          leave(func, funcItem, funcList) {
+            if (func.name !== 'var') {
+              return;
+            }
+
+            let variableName: string | undefined;
+            walk(func, {
+              visit: 'Identifier',
+              enter(identifier) {
+                variableName = identifier.name;
+                return this.break;
+              },
+            });
+            if (!variableName?.startsWith('--tw-')) {
+              return;
+            }
+
+            let sawComma = false;
+            let hasFallbackContent = false;
+            func.children.forEach((child) => {
+              if (!sawComma) {
+                if (child.type === 'Operator' && child.value === ',') {
+                  sawComma = true;
+                }
+                return;
+              }
+
+              let childValue = generate(child).trim();
+              if (child.type === 'Raw') {
+                const emptyTailwindVarPattern = /var\(--tw-[^,()]+,\s*\)/g;
+                childValue = childValue
+                  .replaceAll(emptyTailwindVarPattern, '')
+                  .trim();
+              }
+
+              if (childValue.length > 0) {
+                hasFallbackContent = true;
+              }
+            });
+
+            if (!sawComma || hasFallbackContent) {
+              return;
+            }
+
+            funcList.remove(funcItem);
+          },
+        });
+
         styles[getReactProperty(declaration.property)] =
-          generate(declaration.value) +
+          generate(declaration.value).trim() +
           (declaration.important ? '!important' : '');
       },
     });