react-email 6.0.5 → 6.0.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # react-email
 
+## 6.0.7
+
+### Patch Changes
+
+- 87a2486: undo nesting of all media queries, and replace >= <= exxpressions with min-width/max-width on the Tailwind component
+
+## 6.0.6
+
+### Patch Changes
+
+- 84bb7ab: collapse empty-fallback var() refs in inline styles
+
 ## 6.0.5
 
 ## 6.0.4

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.5",
+	version: "6.0.7",
 	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" : "");
 			}
 		});
 	}
@@ -38288,6 +38316,129 @@ function useSuspensedPromise(promiseFn, key) {
 	throw state.promise;
 }
 //#endregion
+//#region src/components/tailwind/utils/css/downlevel-for-email-clients.ts
+/**
+* Downlevels modern CSS features that email clients don't support,
+* operating on a css-tree StyleSheet AST.
+*
+* 1. CSS Nesting: unnests @media rules from inside selectors
+*    `.sm_p-4{@media (min-width:40rem){padding:1rem!important}}`
+*    → `@media (min-width:40rem){.sm_p-4{padding:1rem!important}}`
+*
+* 2. Media Queries Level 4 range syntax → legacy min-width/max-width
+*    `(width>=40rem)` → `(min-width:40rem)`
+*
+* Gmail, Outlook, Yahoo, and most email clients don't support either feature.
+* See: https://www.caniemail.com/features/css-at-media/
+*      https://www.caniemail.com/features/css-nesting/
+*/
+/**
+* Unnest @media at-rules from inside regular rules, and downlevel
+* range media query syntax to legacy min-width/max-width.
+*
+* Mutates the stylesheet in place.
+*/
+function downlevelForEmailClients(styleSheet) {
+	unnestMediaQueries(styleSheet);
+	downlevelRangeMediaQueries(styleSheet);
+}
+/**
+* Walk the stylesheet and unnest any @media/@supports rules that are nested
+* inside regular rules. For each, the parent Rule's selector wraps the
+* at-rule's body.
+*
+* Before: `.sm_p-4 { @media (...) { padding: 1rem } }`
+* After:  `@media (...) { .sm_p-4 { padding: 1rem } }`
+*/
+function unnestMediaQueries(styleSheet) {
+	const transforms = [];
+	walk(styleSheet, {
+		visit: "Rule",
+		enter(rule, item, list) {
+			if (!rule.block || !item) return;
+			const nestedAtrules = [];
+			const remainingChildren = [];
+			rule.block.children.forEach((child) => {
+				if (child.type === "Atrule" && (child.name === "media" || child.name === "supports")) nestedAtrules.push(child);
+				else remainingChildren.push(child);
+			});
+			if (nestedAtrules.length > 0) transforms.push({
+				parentRule: rule,
+				parentItem: item,
+				parentList: list,
+				nestedAtrules,
+				remainingChildren
+			});
+		}
+	});
+	for (let i = transforms.length - 1; i >= 0; i--) {
+		const { parentRule, parentItem, parentList, nestedAtrules, remainingChildren } = transforms[i];
+		const replacements = new List();
+		if (remainingChildren.length > 0) {
+			parentRule.block.children = new List().fromArray(remainingChildren);
+			replacements.appendData(parentRule);
+		}
+		for (const atrule of nestedAtrules) {
+			const wrappedRule = {
+				type: "Rule",
+				prelude: clone(parentRule.prelude),
+				block: {
+					type: "Block",
+					children: atrule.block ? atrule.block.children : new List()
+				}
+			};
+			const newAtrule = {
+				type: "Atrule",
+				name: atrule.name,
+				prelude: atrule.prelude,
+				block: {
+					type: "Block",
+					children: new List().fromArray([wrappedRule])
+				}
+			};
+			replacements.appendData(newAtrule);
+		}
+		parentList.replace(parentItem, replacements);
+	}
+}
+/**
+* Walk all nodes and downlevel range syntax (`FeatureRange`) inside @media
+* preludes to legacy `Feature` nodes (`min-width` / `max-width`).
+*/
+function downlevelRangeMediaQueries(styleSheet) {
+	const replacements = [];
+	walk(styleSheet, { enter(originalNode, item) {
+		const node = originalNode;
+		if (item && node.type === "FeatureRange") {
+			const replacement = downlevelFeatureRange(node);
+			if (replacement) replacements.push({
+				item,
+				replacement
+			});
+		}
+	} });
+	for (const { item, replacement } of replacements) item.data = replacement;
+}
+/**
+* Convert a `FeatureRange` node to a `Feature` node (legacy min-/max- syntax).
+*
+* For `width >= 40rem`: left=Identifier("width"), leftComparison=">=", middle=Dimension("40","rem")
+* Result: { type: "Feature", name: "min-width", value: Dimension("40","rem") }
+*/
+function downlevelFeatureRange(range) {
+	if (range.left.type !== "Identifier") return null;
+	let prefix;
+	if (range.leftComparison === ">=" || range.leftComparison === ">") prefix = "min-";
+	else if (range.leftComparison === "<=" || range.leftComparison === "<") prefix = "max-";
+	else return null;
+	return {
+		type: "Feature",
+		kind: "media",
+		name: `${prefix}${range.left.name}`,
+		value: range.middle
+	};
+}
+//#endregion
 //#region src/components/tailwind/utils/compatibility/sanitize-class-name.ts
 const digitToNameMap = {
 	"0": "zero",
@@ -40411,6 +40562,7 @@ function Tailwind({ children, config }) {
 		children: new List().fromArray(Array.from(nonInlinableRules.values()))
 	};
 	sanitizeNonInlinableRules(nonInlineStyles);
+	downlevelForEmailClients(nonInlineStyles);
 	const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
 	let appliedNonInlineStyles = false;
 	mappedChildren = mapReactTree(mappedChildren, (node) => {

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" : "");
 			}
 		});
 	}
@@ -38267,6 +38295,129 @@ function useSuspensedPromise(promiseFn, key) {
 	throw state.promise;
 }
 //#endregion
+//#region src/components/tailwind/utils/css/downlevel-for-email-clients.ts
+/**
+* Downlevels modern CSS features that email clients don't support,
+* operating on a css-tree StyleSheet AST.
+*
+* 1. CSS Nesting: unnests @media rules from inside selectors
+*    `.sm_p-4{@media (min-width:40rem){padding:1rem!important}}`
+*    → `@media (min-width:40rem){.sm_p-4{padding:1rem!important}}`
+*
+* 2. Media Queries Level 4 range syntax → legacy min-width/max-width
+*    `(width>=40rem)` → `(min-width:40rem)`
+*
+* Gmail, Outlook, Yahoo, and most email clients don't support either feature.
+* See: https://www.caniemail.com/features/css-at-media/
+*      https://www.caniemail.com/features/css-nesting/
+*/
+/**
+* Unnest @media at-rules from inside regular rules, and downlevel
+* range media query syntax to legacy min-width/max-width.
+*
+* Mutates the stylesheet in place.
+*/
+function downlevelForEmailClients(styleSheet) {
+	unnestMediaQueries(styleSheet);
+	downlevelRangeMediaQueries(styleSheet);
+}
+/**
+* Walk the stylesheet and unnest any @media/@supports rules that are nested
+* inside regular rules. For each, the parent Rule's selector wraps the
+* at-rule's body.
+*
+* Before: `.sm_p-4 { @media (...) { padding: 1rem } }`
+* After:  `@media (...) { .sm_p-4 { padding: 1rem } }`
+*/
+function unnestMediaQueries(styleSheet) {
+	const transforms = [];
+	walk(styleSheet, {
+		visit: "Rule",
+		enter(rule, item, list) {
+			if (!rule.block || !item) return;
+			const nestedAtrules = [];
+			const remainingChildren = [];
+			rule.block.children.forEach((child) => {
+				if (child.type === "Atrule" && (child.name === "media" || child.name === "supports")) nestedAtrules.push(child);
+				else remainingChildren.push(child);
+			});
+			if (nestedAtrules.length > 0) transforms.push({
+				parentRule: rule,
+				parentItem: item,
+				parentList: list,
+				nestedAtrules,
+				remainingChildren
+			});
+		}
+	});
+	for (let i = transforms.length - 1; i >= 0; i--) {
+		const { parentRule, parentItem, parentList, nestedAtrules, remainingChildren } = transforms[i];
+		const replacements = new List();
+		if (remainingChildren.length > 0) {
+			parentRule.block.children = new List().fromArray(remainingChildren);
+			replacements.appendData(parentRule);
+		}
+		for (const atrule of nestedAtrules) {
+			const wrappedRule = {
+				type: "Rule",
+				prelude: clone(parentRule.prelude),
+				block: {
+					type: "Block",
+					children: atrule.block ? atrule.block.children : new List()
+				}
+			};
+			const newAtrule = {
+				type: "Atrule",
+				name: atrule.name,
+				prelude: atrule.prelude,
+				block: {
+					type: "Block",
+					children: new List().fromArray([wrappedRule])
+				}
+			};
+			replacements.appendData(newAtrule);
+		}
+		parentList.replace(parentItem, replacements);
+	}
+}
+/**
+* Walk all nodes and downlevel range syntax (`FeatureRange`) inside @media
+* preludes to legacy `Feature` nodes (`min-width` / `max-width`).
+*/
+function downlevelRangeMediaQueries(styleSheet) {
+	const replacements = [];
+	walk(styleSheet, { enter(originalNode, item) {
+		const node = originalNode;
+		if (item && node.type === "FeatureRange") {
+			const replacement = downlevelFeatureRange(node);
+			if (replacement) replacements.push({
+				item,
+				replacement
+			});
+		}
+	} });
+	for (const { item, replacement } of replacements) item.data = replacement;
+}
+/**
+* Convert a `FeatureRange` node to a `Feature` node (legacy min-/max- syntax).
+*
+* For `width >= 40rem`: left=Identifier("width"), leftComparison=">=", middle=Dimension("40","rem")
+* Result: { type: "Feature", name: "min-width", value: Dimension("40","rem") }
+*/
+function downlevelFeatureRange(range) {
+	if (range.left.type !== "Identifier") return null;
+	let prefix;
+	if (range.leftComparison === ">=" || range.leftComparison === ">") prefix = "min-";
+	else if (range.leftComparison === "<=" || range.leftComparison === "<") prefix = "max-";
+	else return null;
+	return {
+		type: "Feature",
+		kind: "media",
+		name: `${prefix}${range.left.name}`,
+		value: range.middle
+	};
+}
+//#endregion
 //#region src/components/tailwind/utils/compatibility/sanitize-class-name.ts
 const digitToNameMap = {
 	"0": "zero",
@@ -40390,6 +40541,7 @@ function Tailwind({ children, config }) {
 		children: new List().fromArray(Array.from(nonInlinableRules.values()))
 	};
 	sanitizeNonInlinableRules(nonInlineStyles);
+	downlevelForEmailClients(nonInlineStyles);
 	const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
 	let appliedNonInlineStyles = false;
 	mappedChildren = mapReactTree(mappedChildren, (node) => {

package/package.json

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

package/src/components/tailwind/tailwind.spec.tsx

@@ -50,7 +50,7 @@ describe('Tailwind component', () => {
         <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
         <meta name="x-apple-disable-message-reformatting" />
         <style>
-          .md_p-4{@media (width>=48rem){padding:1rem!important}}
+          @media (min-width:48rem){.md_p-4{padding:1rem!important}}
         </style>
       </head>
       <body>
@@ -353,7 +353,7 @@ describe('Tailwind component', () => {
           <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
           <meta name="x-apple-disable-message-reformatting" />
           <style>
-            .sm_bg-red-50{@media (width>=40rem){background-color:rgb(254,242,242)!important}}.sm_text-sm{@media (width>=40rem){font-size:0.875rem!important;line-height:1.4285714285714286!important}}.md_text-lg{@media (width>=48rem){font-size:1.125rem!important;line-height:1.5555555555555556!important}}
+            @media (min-width:40rem){.sm_bg-red-50{background-color:rgb(254,242,242)!important}}@media (min-width:40rem){.sm_text-sm{font-size:0.875rem!important;line-height:1.4285714285714286!important}}@media (min-width:48rem){.md_text-lg{font-size:1.125rem!important;line-height:1.5555555555555556!important}}
           </style></head
         ><!--$--><!--html--><!--head--><span
           ><!--[if mso]><i style="letter-spacing: 10px;mso-font-width:-100%;" hidden>&nbsp;</i><![endif]--></span
@@ -391,7 +391,7 @@ describe('Tailwind component', () => {
     );
 
     expect(actualOutput).toMatchInlineSnapshot(
-      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><style>.text-body{@media (prefers-color-scheme:dark){color:orange!important}}</style></head><body class="text-body"><!--$--><!--html--><!--head--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="color:green">this is the body</td></tr></tbody></table><!--/$--></body></html>"`,
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><style>@media (prefers-color-scheme:dark){.text-body{color:orange!important}}</style></head><body class="text-body"><!--$--><!--html--><!--head--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="color:green">this is the body</td></tr></tbody></table><!--/$--></body></html>"`,
     );
   });
 
@@ -425,7 +425,7 @@ describe('Tailwind component', () => {
           <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
           <meta name="x-apple-disable-message-reformatting" />
           <style>
-            .xl_bg-green-500{@media (width>=1280px){background-color:rgb(0,201,80)!important}}.twoxl_bg-blue-500{@media (width>=1536px){background-color:rgb(43,127,255)!important}}
+            @media (min-width:1280px){.xl_bg-green-500{background-color:rgb(0,201,80)!important}}@media (min-width:1536px){.twoxl_bg-blue-500{background-color:rgb(43,127,255)!important}}
           </style></head
         ><!--$--><!--html--><!--head-->
         <div class="xl_bg-green-500" style="background-color:rgb(255,226,226)">
@@ -452,7 +452,7 @@ describe('Tailwind component', () => {
       "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
       <head>
         <style>
-          .lg_max-h-calc50pxplus5rem{@media (width>=64rem){max-height:calc(50px + 5rem)!important}}
+          @media (min-width:64rem){.lg_max-h-calc50pxplus5rem{max-height:calc(50px + 5rem)!important}}
         </style></head
       ><!--$--><!--head-->
       <div
@@ -494,7 +494,7 @@ describe('Tailwind component', () => {
         <html lang="en">
           <head>
             <style>
-              .sm_bg-red-300{@media (width>=40rem){background-color:rgb(255,162,162)!important}}.md_bg-red-400{@media (width>=48rem){background-color:rgb(255,100,103)!important}}.lg_bg-red-500{@media (width>=64rem){background-color:rgb(251,44,54)!important}}
+              @media (min-width:40rem){.sm_bg-red-300{background-color:rgb(255,162,162)!important}}@media (min-width:48rem){.md_bg-red-400{background-color:rgb(255,100,103)!important}}@media (min-width:64rem){.lg_bg-red-500{background-color:rgb(251,44,54)!important}}
             </style>
           </head>
           <body>
@@ -524,7 +524,7 @@ describe('Tailwind component', () => {
           </Tailwind>,
         ),
       ).toMatchInlineSnapshot(
-        `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head><style>.sm_bg-red-300{@media (width>=40rem){background-color:rgb(255,162,162)!important}}.md_bg-red-400{@media (width>=48rem){background-color:rgb(255,100,103)!important}}.lg_bg-red-500{@media (width>=64rem){background-color:rgb(251,44,54)!important}}</style></head><body><!--$--><!--html--><!--head--><!--body--><div class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(255,201,201)"></div><!--/$--></body></html>"`,
+        `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head><style>@media (min-width:40rem){.sm_bg-red-300{background-color:rgb(255,162,162)!important}}@media (min-width:48rem){.md_bg-red-400{background-color:rgb(255,100,103)!important}}@media (min-width:64rem){.lg_bg-red-500{background-color:rgb(251,44,54)!important}}</style></head><body><!--$--><!--html--><!--head--><!--body--><div class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(255,201,201)"></div><!--/$--></body></html>"`,
       );
     });
 
@@ -558,7 +558,7 @@ describe('Tailwind component', () => {
         <html lang="en">
           <head>
             <style>
-              .text-body{@media (width>=40rem){color:darkgreen!important}}
+              @media (min-width:40rem){.text-body{color:darkgreen!important}}
             </style>
           </head>
           <body>
@@ -588,7 +588,7 @@ describe('Tailwind component', () => {
         <html lang="en">
           <head>
             <style>
-              .hover_bg-red-600{&:hover{@media (hover:hover){background-color:rgb(231,0,11)!important}}}.focus_bg-red-700{&:focus{background-color:rgb(193,0,7)!important}}.sm_bg-red-300{@media (width>=40rem){background-color:rgb(255,162,162)!important}}.sm_hover_bg-red-200{@media (width>=40rem){&:hover{@media (hover:hover){background-color:rgb(255,201,201)!important}}}}.md_bg-red-400{@media (width>=48rem){background-color:rgb(255,100,103)!important}}.lg_bg-red-500{@media (width>=64rem){background-color:rgb(251,44,54)!important}}
+              .hover_bg-red-600{@media (hover:hover){&:hover{background-color:rgb(231,0,11)!important}}}.focus_bg-red-700{&:focus{background-color:rgb(193,0,7)!important}}@media (min-width:40rem){.sm_bg-red-300{background-color:rgb(255,162,162)!important}}@media (min-width:40rem){.sm_hover_bg-red-200{@media (hover:hover){&:hover{background-color:rgb(255,201,201)!important}}}}@media (min-width:48rem){.md_bg-red-400{background-color:rgb(255,100,103)!important}}@media (min-width:64rem){.lg_bg-red-500{background-color:rgb(251,44,54)!important}}
             </style>
           </head>
           <body>
@@ -659,7 +659,7 @@ describe('Tailwind component', () => {
           <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
           <meta name="x-apple-disable-message-reformatting" />
           <style>
-            .max-sm_text-red-600{@media (width<40rem){color:rgb(231,0,11)!important}}
+            @media (max-width:40rem){.max-sm_text-red-600{color:rgb(231,0,11)!important}}
           </style></head
         ><!--$--><!--head-->
         <p class="max-sm_text-red-600" style="color:rgb(20,71,230)">I am some text</p>
@@ -702,7 +702,7 @@ describe('Tailwind component', () => {
         <html lang="en">
           <head>
             <style>
-              .sm_bg-red-500{@media (width>=40rem){background-color:rgb(251,44,54)!important}}
+              @media (min-width:40rem){.sm_bg-red-500{background-color:rgb(251,44,54)!important}}
             </style>
             <style></style>
             <link />
@@ -923,7 +923,7 @@ describe('Tailwind component', () => {
         <html lang="en">
           <head>
             <style>
-              .sm_border-custom{@media (width>=40rem){border:2px solid!important}}
+              @media (min-width:40rem){.sm_border-custom{border:2px solid!important}}
             </style>
           </head>
           <body>

package/src/components/tailwind/tailwind.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import type { Config } from 'tailwindcss';
 import { useSuspensedPromise } from './hooks/use-suspended-promise.js';
 import { sanitizeStyleSheet } from './sanitize-stylesheet.js';
+import { downlevelForEmailClients } from './utils/css/downlevel-for-email-clients.js';
 import { extractRulesPerClass } from './utils/css/extract-rules-per-class.js';
 import { getCustomProperties } from './utils/css/get-custom-properties.js';
 import { sanitizeNonInlinableRules } from './utils/css/sanitize-non-inlinable-rules.js';
@@ -118,6 +119,7 @@ export function Tailwind({ children, config }: TailwindProps) {
     ),
   };
   sanitizeNonInlinableRules(nonInlineStyles);
+  downlevelForEmailClients(nonInlineStyles);
 
   const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
   let appliedNonInlineStyles = false as boolean;

package/src/components/tailwind/utils/css/downlevel-for-email-clients.spec.ts

@@ -0,0 +1,119 @@
+import { generate, parse, type StyleSheet } from 'css-tree';
+import { downlevelForEmailClients } from './downlevel-for-email-clients.js';
+
+function transform(css: string): string {
+  const ast = parse(css) as StyleSheet;
+  downlevelForEmailClients(ast);
+  return generate(ast);
+}
+
+describe('downlevelForEmailClients', () => {
+  describe('range syntax', () => {
+    it('converts width>= to min-width', () => {
+      expect(transform('@media (width>=40rem){.sm_p-4{padding:1rem}}')).toBe(
+        '@media (min-width:40rem){.sm_p-4{padding:1rem}}',
+      );
+    });
+
+    it('converts width<= to max-width', () => {
+      expect(
+        transform('@media (width<=40rem){.max-sm_p-4{padding:1rem}}'),
+      ).toBe('@media (max-width:40rem){.max-sm_p-4{padding:1rem}}');
+    });
+
+    it('converts width< to max-width', () => {
+      expect(
+        transform('@media (width<40rem){.max-sm_text-red{color:red}}'),
+      ).toBe('@media (max-width:40rem){.max-sm_text-red{color:red}}');
+    });
+
+    it('converts width> to min-width', () => {
+      expect(transform('@media (width>40rem){.sm_p-4{padding:1rem}}')).toBe(
+        '@media (min-width:40rem){.sm_p-4{padding:1rem}}',
+      );
+    });
+
+    it('does not affect non-range media queries', () => {
+      expect(
+        transform('@media (prefers-color-scheme:dark){.dark{color:white}}'),
+      ).toBe('@media (prefers-color-scheme:dark){.dark{color:white}}');
+    });
+  });
+
+  describe('unnesting', () => {
+    it('unnests @media from inside a selector', () => {
+      expect(
+        transform(
+          '.sm_bg-red{@media (min-width:40rem){background-color:red!important}}',
+        ),
+      ).toBe(
+        '@media (min-width:40rem){.sm_bg-red{background-color:red!important}}',
+      );
+    });
+
+    it('handles combined range syntax + nesting', () => {
+      expect(
+        transform(
+          '.sm_bg-red{@media (width>=40rem){background-color:rgb(255,162,162)!important}}',
+        ),
+      ).toBe(
+        '@media (min-width:40rem){.sm_bg-red{background-color:rgb(255,162,162)!important}}',
+      );
+    });
+
+    it('handles multiple concatenated rules', () => {
+      const input =
+        '.sm_bg-red{@media (width>=40rem){background-color:red!important}}' +
+        '.md_bg-blue{@media (width>=48rem){background-color:blue!important}}';
+
+      const result = transform(input);
+
+      expect(result).toContain(
+        '@media (min-width:40rem){.sm_bg-red{background-color:red!important}}',
+      );
+      expect(result).toContain(
+        '@media (min-width:48rem){.md_bg-blue{background-color:blue!important}}',
+      );
+    });
+
+    it('unnests dark mode media queries', () => {
+      expect(
+        transform(
+          '.dark_text-white{@media (prefers-color-scheme:dark){color:rgb(255,255,255)!important}}',
+        ),
+      ).toBe(
+        '@media (prefers-color-scheme:dark){.dark_text-white{color:rgb(255,255,255)!important}}',
+      );
+    });
+
+    it('preserves rules without nested @media', () => {
+      expect(transform('.bg-red{background-color:red}')).toBe(
+        '.bg-red{background-color:red}',
+      );
+    });
+
+    it('preserves already top-level @media rules', () => {
+      expect(
+        transform('@media (min-width:40rem){.sm_p-4{padding:1rem!important}}'),
+      ).toBe('@media (min-width:40rem){.sm_p-4{padding:1rem!important}}');
+    });
+
+    it('handles multiple @media nested in one selector', () => {
+      const input =
+        '.multi{@media (width>=40rem){color:red!important}@media (width>=48rem){color:blue!important}}';
+
+      const result = transform(input);
+
+      expect(result).toContain(
+        '@media (min-width:40rem){.multi{color:red!important}}',
+      );
+      expect(result).toContain(
+        '@media (min-width:48rem){.multi{color:blue!important}}',
+      );
+    });
+
+    it('handles empty stylesheet', () => {
+      expect(transform('')).toBe('');
+    });
+  });
+});

package/src/components/tailwind/utils/css/downlevel-for-email-clients.ts

@@ -0,0 +1,244 @@
+/**
+ * Downlevels modern CSS features that email clients don't support,
+ * operating on a css-tree StyleSheet AST.
+ *
+ * 1. CSS Nesting: unnests @media rules from inside selectors
+ *    `.sm_p-4{@media (min-width:40rem){padding:1rem!important}}`
+ *    → `@media (min-width:40rem){.sm_p-4{padding:1rem!important}}`
+ *
+ * 2. Media Queries Level 4 range syntax → legacy min-width/max-width
+ *    `(width>=40rem)` → `(min-width:40rem)`
+ *
+ * Gmail, Outlook, Yahoo, and most email clients don't support either feature.
+ * See: https://www.caniemail.com/features/css-at-media/
+ *      https://www.caniemail.com/features/css-nesting/
+ */
+
+import {
+  type Atrule,
+  type CssNode,
+  clone,
+  type Feature,
+  type FeatureRange,
+  List,
+  type ListItem,
+  type Rule,
+  type StyleSheet,
+  walk,
+} from 'css-tree';
+
+/**
+ * css-tree 3.x introduced new AST node types for query-related at-rules that
+ * `@types/css-tree` (still on 2.x at the time of writing) doesn't expose.
+ * Augmenting the module here lets the rest of this file work with strong
+ * types instead of scattering `as` casts everywhere.
+ *
+ * - `FeatureRange` is what the parser emits for Media Queries Level 4 range
+ *   syntax: `(width >= 40rem)`.
+ * - `Feature` is the legacy form (`(min-width: 40rem)`) we construct as the
+ *   downleveled output.
+ *
+ * Note: we cannot extend the `CssNode` union itself (it's a `type` alias, not
+ * an interface), so two narrow casts remain in this file:
+ *   1. Widening `node` inside `walk()` so we can narrow against
+ *      `FeatureRange.type` (`CssNode` doesn't list `'FeatureRange'`).
+ *   2. Assigning a constructed `Feature` back to `ListItem<CssNode>.data`.
+ *
+ * Both are flagged inline and reference back to this block.
+ *
+ * See:
+ *   https://github.com/csstree/csstree/blob/master/lib/syntax/node/FeatureRange.js
+ *   https://github.com/csstree/csstree/blob/master/lib/syntax/node/Feature.js
+ */
+declare module 'css-tree' {
+  interface FeatureRange extends CssNodeCommon {
+    type: 'FeatureRange';
+    kind: string;
+    left: CssNode;
+    leftComparison: string;
+    middle: CssNode;
+    rightComparison: string | null;
+    right: CssNode | null;
+  }
+
+  interface Feature extends CssNodeCommon {
+    type: 'Feature';
+    kind: string;
+    name: string;
+    value: CssNode | null;
+  }
+}
+
+/**
+ * Unnest @media at-rules from inside regular rules, and downlevel
+ * range media query syntax to legacy min-width/max-width.
+ *
+ * Mutates the stylesheet in place.
+ */
+export function downlevelForEmailClients(styleSheet: StyleSheet): void {
+  unnestMediaQueries(styleSheet);
+  downlevelRangeMediaQueries(styleSheet);
+}
+
+// ---------------------------------------------------------------------------
+// Unnesting
+// ---------------------------------------------------------------------------
+
+interface UnnestTransform {
+  parentRule: Rule;
+  parentItem: ListItem<CssNode>;
+  parentList: List<CssNode>;
+  nestedAtrules: Atrule[];
+  remainingChildren: CssNode[];
+}
+
+/**
+ * Walk the stylesheet and unnest any @media/@supports rules that are nested
+ * inside regular rules. For each, the parent Rule's selector wraps the
+ * at-rule's body.
+ *
+ * Before: `.sm_p-4 { @media (...) { padding: 1rem } }`
+ * After:  `@media (...) { .sm_p-4 { padding: 1rem } }`
+ */
+function unnestMediaQueries(styleSheet: StyleSheet): void {
+  const transforms: UnnestTransform[] = [];
+
+  walk(styleSheet, {
+    visit: 'Rule',
+    enter(rule, item, list) {
+      if (!rule.block || !item) return;
+
+      const nestedAtrules: Atrule[] = [];
+      const remainingChildren: CssNode[] = [];
+
+      rule.block.children.forEach((child) => {
+        if (
+          child.type === 'Atrule' &&
+          (child.name === 'media' || child.name === 'supports')
+        ) {
+          nestedAtrules.push(child);
+        } else {
+          remainingChildren.push(child);
+        }
+      });
+
+      if (nestedAtrules.length > 0) {
+        transforms.push({
+          parentRule: rule,
+          parentItem: item,
+          parentList: list,
+          nestedAtrules,
+          remainingChildren,
+        });
+      }
+    },
+  });
+
+  // Apply in reverse so list positions stay valid
+  for (let i = transforms.length - 1; i >= 0; i--) {
+    const {
+      parentRule,
+      parentItem,
+      parentList,
+      nestedAtrules,
+      remainingChildren,
+    } = transforms[i]!;
+
+    // Build replacement list: [modified parent rule (if any), unnested @media rules...]
+    const replacements = new List<CssNode>();
+
+    if (remainingChildren.length > 0) {
+      parentRule.block.children = new List<CssNode>().fromArray(
+        remainingChildren,
+      );
+      replacements.appendData(parentRule);
+    }
+
+    for (const atrule of nestedAtrules) {
+      const wrappedRule: Rule = {
+        type: 'Rule',
+        prelude: clone(parentRule.prelude) as Rule['prelude'],
+        block: {
+          type: 'Block',
+          children: atrule.block ? atrule.block.children : new List<CssNode>(),
+        },
+      };
+
+      const newAtrule: Atrule = {
+        type: 'Atrule',
+        name: atrule.name,
+        prelude: atrule.prelude,
+        block: {
+          type: 'Block',
+          children: new List<CssNode>().fromArray([wrappedRule]),
+        },
+      };
+
+      replacements.appendData(newAtrule);
+    }
+
+    // Replace the original rule with the entire list of new nodes
+    parentList.replace(parentItem, replacements);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Range media query downleveling
+// ---------------------------------------------------------------------------
+
+/**
+ * Walk all nodes and downlevel range syntax (`FeatureRange`) inside @media
+ * preludes to legacy `Feature` nodes (`min-width` / `max-width`).
+ */
+function downlevelRangeMediaQueries(styleSheet: StyleSheet): void {
+  const replacements: Array<{
+    item: ListItem<CssNode>;
+    replacement: Feature;
+  }> = [];
+
+  walk(styleSheet, {
+    enter(originalNode, item) {
+      // See module augmentation above: `CssNode` (from @types/css-tree 2.x)
+      // doesn't include `FeatureRange`, so widen here to enable narrowing.
+      const node = originalNode as CssNode | FeatureRange;
+      if (item && node.type === 'FeatureRange') {
+        const replacement = downlevelFeatureRange(node);
+        if (replacement) {
+          replacements.push({ item, replacement });
+        }
+      }
+    },
+  });
+
+  for (const { item, replacement } of replacements) {
+    // See module augmentation above: `Feature` is not part of the `CssNode`
+    // union, so a single cast is required when handing it back to the AST.
+    item.data = replacement as unknown as CssNode;
+  }
+}
+
+/**
+ * Convert a `FeatureRange` node to a `Feature` node (legacy min-/max- syntax).
+ *
+ * For `width >= 40rem`: left=Identifier("width"), leftComparison=">=", middle=Dimension("40","rem")
+ * Result: { type: "Feature", name: "min-width", value: Dimension("40","rem") }
+ */
+function downlevelFeatureRange(range: FeatureRange): Feature | null {
+  if (range.left.type !== 'Identifier') return null;
+
+  let prefix: string;
+  if (range.leftComparison === '>=' || range.leftComparison === '>') {
+    prefix = 'min-';
+  } else if (range.leftComparison === '<=' || range.leftComparison === '<') {
+    prefix = 'max-';
+  } else {
+    return null;
+  }
+
+  return {
+    type: 'Feature',
+    kind: 'media',
+    name: `${prefix}${range.left.name}`,
+    value: range.middle,
+  };
+}

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