react-email 6.11.1 → 6.11.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # react-email
 
+## 6.11.3
+
+### Patch Changes
+
+- Updated dependencies [f356e81]
+  - @react-email/render@2.1.1
+
+## 6.11.2
+
+### Patch Changes
+
+- 7190dca: Leave the direction marks U+200E and U+200F out of the `<Preview>` padding, so spam filters such as rspamd no longer score it as hidden text. The padding sequence is now `\xa0‌​‍`; if you post-process rendered HTML by matching the old sequence, update it.
+- 63f159a: `<Tailwind>` now inlines the default color for `shadow`, `shadow-md`, `ring-2` and similar classes, so these shadows show in email clients.
+
 ## 6.11.1
 
 ### Patch Changes

package/dist/cli/index.mjs

@@ -6533,7 +6533,7 @@ const getTracingRootDir = async (usersProjectLocation) => {
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.11.1",
+	version: "6.11.3",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
@@ -6573,7 +6573,7 @@ var package_default = {
 	dependencies: {
 		"@babel/parser": "catalog:",
 		"@babel/traverse": "catalog:",
-		"@react-email/render": "workspace:>=2.1.0",
+		"@react-email/render": "workspace:>=2.1.1",
 		"chokidar": "^5.0.0",
 		"commander": "catalog:",
 		"conf": "^15.0.2",

package/dist/components/preview/preview.cjs

@@ -24,7 +24,7 @@ const Preview = react.forwardRef(({ children = "", useTitleTag = true, ...props
 });
 Preview.displayName = "Preview";
 require_element_marker.markAsElement(Preview);
-const whiteSpaceCodes = "\xA0‌​‍‎‏";
+const whiteSpaceCodes = "\xA0‌​‍";
 const renderWhiteSpace = (text) => {
 	if (text.length >= PREVIEW_MAX_LENGTH) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: whiteSpaceCodes.repeat(PREVIEW_MAX_LENGTH - text.length) });

package/dist/components/preview/preview.mjs

@@ -22,7 +22,7 @@ const Preview = React$1.forwardRef(({ children = "", useTitleTag = true, ...prop
 });
 Preview.displayName = "Preview";
 markAsElement(Preview);
-const whiteSpaceCodes = "\xA0‌​‍‎‏";
+const whiteSpaceCodes = "\xA0‌​‍";
 const renderWhiteSpace = (text) => {
 	if (text.length >= PREVIEW_MAX_LENGTH) return null;
 	return /* @__PURE__ */ jsx("div", { children: whiteSpaceCodes.repeat(PREVIEW_MAX_LENGTH - text.length) });

package/dist/components/tailwind/sanitize-stylesheet.cjs

@@ -1,6 +1,6 @@
-const require_resolve_all_css_variables = require("./utils/css/resolve-all-css-variables.cjs");
 const require_resolve_calc_expressions = require("./utils/css/resolve-calc-expressions.cjs");
 const require_sanitize_declarations = require("./utils/css/sanitize-declarations.cjs");
+const require_resolve_all_css_variables = require("./utils/css/resolve-all-css-variables.cjs");
 //#region src/components/tailwind/sanitize-stylesheet.ts
 function sanitizeStyleSheet(styleSheet) {
 	require_resolve_all_css_variables.resolveAllCssVariables(styleSheet);

package/dist/components/tailwind/sanitize-stylesheet.mjs

@@ -1,6 +1,6 @@
-import { resolveAllCssVariables } from "./utils/css/resolve-all-css-variables.mjs";
 import { resolveCalcExpressions } from "./utils/css/resolve-calc-expressions.mjs";
 import { sanitizeDeclarations } from "./utils/css/sanitize-declarations.mjs";
+import { resolveAllCssVariables } from "./utils/css/resolve-all-css-variables.mjs";
 //#region src/components/tailwind/sanitize-stylesheet.ts
 function sanitizeStyleSheet(styleSheet) {
 	resolveAllCssVariables(styleSheet);

package/dist/components/tailwind/utils/css/make-inline-styles-for.cjs

@@ -1,9 +1,24 @@
 require("../../../../_virtual/_rolldown/runtime.cjs");
 const require_get_react_property = require("../compatibility/get-react-property.cjs");
+const require_resolve_calc_expressions = require("./resolve-calc-expressions.cjs");
+const require_sanitize_declarations = require("./sanitize-declarations.cjs");
 const require_strip_empty_tailwind_vars = require("./strip-empty-tailwind-vars.cjs");
 const require_unwrap_value = require("./unwrap-value.cjs");
 let css_tree = require("css-tree");
 //#region src/components/tailwind/utils/css/make-inline-styles-for.ts
+function hasVarFunction(node) {
+	let found = false;
+	(0, css_tree.walk)(node, {
+		visit: "Function",
+		enter(func) {
+			if (func.name === "var") {
+				found = true;
+				return this.break;
+			}
+		}
+	});
+	return found;
+}
 function makeInlineStylesFor(inlinableRules, customProperties) {
 	const styles = {};
 	const localVariableDeclarations = /* @__PURE__ */ new Map();
@@ -13,39 +28,48 @@ function makeInlineStylesFor(inlinableRules, customProperties) {
 			if (declaration.property.startsWith("--")) localVariableDeclarations.set(declaration.property, declaration);
 		}
 	});
-	for (const rule of inlinableRules) {
-		(0, css_tree.walk)(rule, {
+	const resolveValue = (value, resolving = /* @__PURE__ */ new Set()) => {
+		const resolved = (0, css_tree.parse)((0, css_tree.generate)(value), { context: "value" });
+		(0, css_tree.walk)(resolved, {
 			visit: "Function",
-			enter(func, funcParentListItem) {
-				if (func.name === "var") {
-					let variableName;
-					(0, css_tree.walk)(func, {
-						visit: "Identifier",
-						enter(identifier) {
-							variableName = identifier.name;
-							return this.break;
-						}
-					});
-					if (variableName) {
-						const definition = localVariableDeclarations.get(variableName);
-						if (definition) funcParentListItem.data = require_unwrap_value.unwrapValue(definition.value);
-						else {
-							const customProperty = customProperties.get(variableName);
-							if (customProperty?.initialValue) funcParentListItem.data = require_unwrap_value.unwrapValue(customProperty.initialValue.value);
-						}
-					}
+			leave(func, item) {
+				if (func.name !== "var") return;
+				const children = func.children.toArray();
+				const name = children[0] ? (0, css_tree.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 ? void 0 : children.slice(comma + 1).map((child) => (0, css_tree.generate)(child)).join("");
+				const replacement = definition?.value ?? initialValue?.value;
+				if (replacement) item.data = require_unwrap_value.unwrapValue(resolveValue(replacement, new Set([...resolving, name])));
+				else if (fallback) {
+					const declaration = {
+						type: "Declaration",
+						property: "value",
+						important: false,
+						value: resolveValue((0, css_tree.parse)(fallback, { context: "value" }), resolving)
+					};
+					require_sanitize_declarations.sanitizeDeclarations(declaration);
+					item.data = require_unwrap_value.unwrapValue(declaration.value);
 				}
 			}
 		});
-		(0, css_tree.walk)(rule, {
-			visit: "Declaration",
-			enter(declaration) {
-				if (declaration.property.startsWith("--")) return;
-				require_strip_empty_tailwind_vars.stripEmptyTailwindVars(declaration.value);
-				styles[require_get_react_property.getReactProperty(declaration.property)] = (0, css_tree.generate)(declaration.value).trim() + (declaration.important ? "!important" : "");
+		return resolved;
+	};
+	for (const rule of inlinableRules) (0, css_tree.walk)(rule, {
+		visit: "Declaration",
+		enter(declaration) {
+			if (declaration.property.startsWith("--")) return;
+			let value = declaration.value;
+			if (hasVarFunction(value)) {
+				value = resolveValue(value);
+				require_resolve_calc_expressions.resolveCalcExpressions(value);
+				require_strip_empty_tailwind_vars.stripEmptyTailwindVars(value);
 			}
-		});
-	}
+			styles[require_get_react_property.getReactProperty(declaration.property)] = (0, css_tree.generate)(value).trim() + (declaration.important ? "!important" : "");
+		}
+	});
 	return styles;
 }
 //#endregion

package/dist/components/tailwind/utils/css/make-inline-styles-for.mjs

@@ -1,8 +1,23 @@
 import { getReactProperty } from "../compatibility/get-react-property.mjs";
+import { resolveCalcExpressions } from "./resolve-calc-expressions.mjs";
+import { sanitizeDeclarations } from "./sanitize-declarations.mjs";
 import { stripEmptyTailwindVars } from "./strip-empty-tailwind-vars.mjs";
 import { unwrapValue } from "./unwrap-value.mjs";
-import { generate, walk } from "css-tree/dist/csstree.esm";
+import { generate, parse, walk } from "css-tree/dist/csstree.esm";
 //#region src/components/tailwind/utils/css/make-inline-styles-for.ts
+function hasVarFunction(node) {
+	let found = false;
+	walk(node, {
+		visit: "Function",
+		enter(func) {
+			if (func.name === "var") {
+				found = true;
+				return this.break;
+			}
+		}
+	});
+	return found;
+}
 function makeInlineStylesFor(inlinableRules, customProperties) {
 	const styles = {};
 	const localVariableDeclarations = /* @__PURE__ */ new Map();
@@ -12,39 +27,48 @@ function makeInlineStylesFor(inlinableRules, customProperties) {
 			if (declaration.property.startsWith("--")) localVariableDeclarations.set(declaration.property, declaration);
 		}
 	});
-	for (const rule of inlinableRules) {
-		walk(rule, {
+	const resolveValue = (value, resolving = /* @__PURE__ */ new Set()) => {
+		const resolved = parse(generate(value), { context: "value" });
+		walk(resolved, {
 			visit: "Function",
-			enter(func, funcParentListItem) {
-				if (func.name === "var") {
-					let variableName;
-					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 {
-							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 ? void 0 : 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])));
+				else if (fallback) {
+					const declaration = {
+						type: "Declaration",
+						property: "value",
+						important: false,
+						value: resolveValue(parse(fallback, { context: "value" }), resolving)
+					};
+					sanitizeDeclarations(declaration);
+					item.data = unwrapValue(declaration.value);
 				}
 			}
 		});
-		walk(rule, {
-			visit: "Declaration",
-			enter(declaration) {
-				if (declaration.property.startsWith("--")) return;
-				stripEmptyTailwindVars(declaration.value);
-				styles[getReactProperty(declaration.property)] = generate(declaration.value).trim() + (declaration.important ? "!important" : "");
+		return resolved;
+	};
+	for (const rule of inlinableRules) walk(rule, {
+		visit: "Declaration",
+		enter(declaration) {
+			if (declaration.property.startsWith("--")) return;
+			let value = declaration.value;
+			if (hasVarFunction(value)) {
+				value = resolveValue(value);
+				resolveCalcExpressions(value);
+				stripEmptyTailwindVars(value);
 			}
-		});
-	}
+			styles[getReactProperty(declaration.property)] = generate(value).trim() + (declaration.important ? "!important" : "");
+		}
+	});
 	return styles;
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "6.11.1",
+  "version": "6.11.3",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"
@@ -38,7 +38,7 @@
   "dependencies": {
     "@babel/parser": "7.29.2",
     "@babel/traverse": "7.29.0",
-    "@react-email/render": ">=2.1.0",
+    "@react-email/render": ">=2.1.1",
     "chokidar": "^5.0.0",
     "commander": "^13.0.0",
     "conf": "^15.0.2",
@@ -67,7 +67,7 @@
     "@types/mime-types": "2.1.4",
     "@types/prompts": "2.4.9",
     "@types/shelljs": "0.10.0",
-    "next": "16.3.3",
+    "next": "16.4.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "shelljs": "0.10.0",
@@ -75,7 +75,7 @@
     "tsx": "4.21.0",
     "typescript": "5.9.3",
     "yalc": "1.0.0-pre.53",
-    "@react-email/render": "2.1.0"
+    "@react-email/render": "2.1.1"
   },
   "scripts": {
     "build": "tsdown",

package/src/components/preview/preview.spec.tsx

@@ -5,7 +5,7 @@ describe('<Preview> component', () => {
   it('renders correctly', async () => {
     const actualOutput = await render(<Preview>Email preview text</Preview>);
     expect(actualOutput).toMatchInlineSnapshot(
-      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><title>Email preview text</title><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Email preview text<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><!--/$-->"`,
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><title>Email preview text</title><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Email preview text<div> ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍</div></div><!--/$-->"`,
     );
   });
 
@@ -14,10 +14,19 @@ describe('<Preview> component', () => {
       <Preview>Email preview text</Preview>,
     );
     expect(actualOutputArray).toMatchInlineSnapshot(
-      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><title>Email preview text</title><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Email preview text<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><!--/$-->"`,
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><title>Email preview text</title><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Email preview text<div> ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍ ‌​‍</div></div><!--/$-->"`,
     );
   });
 
+  it('pads only with characters spam filters ignore as preview padding', async () => {
+    const actualOutput = await render(<Preview>Short text</Preview>);
+    const padding = actualOutput.match(/<div>([^<]*)<\/div>/)?.[1];
+
+    // rspamd's HIDDEN_TEXT rule counts any other hidden character, so padding
+    // made of anything else gets scored as hidden text
+    expect(padding).toMatch(/^[\s\p{Z}​-‍]+$/u);
+  });
+
   it('renders correctly with really long text', async () => {
     const longText = 'really long'.repeat(100);
     const actualOutputLong = await render(<Preview>{longText}</Preview>);
@@ -37,7 +46,7 @@ describe('renderWhiteSpace', () => {
 
   it('renders white space characters when text length is less than PREVIEW_MAX_LENGTH', () => {
     const text = 'Short text';
-    const whiteSpaceCharacters = '\xa0\u200C\u200B\u200D\u200E\u200F\uFEFF';
+    const whiteSpaceCharacters = '\xa0\u200C\u200B\u200D\uFEFF';
 
     const html = renderWhiteSpace(text);
     expect(html).not.toBeNull();

package/src/components/preview/preview.tsx

@@ -46,7 +46,9 @@ export const Preview = React.forwardRef<HTMLDivElement, PreviewProps>(
 Preview.displayName = 'Preview';
 markAsElement(Preview);
 
-const whiteSpaceCodes = '\xa0\u200C\u200B\u200D\u200E\u200F\uFEFF';
+// Spam filters such as rspamd ignore these as preview padding, but count the
+// direction marks U+200E and U+200F as hidden text, so those are left out.
+const whiteSpaceCodes = '\xa0\u200C\u200B\u200D\uFEFF';
 export const renderWhiteSpace = (text: string) => {
   if (text.length >= PREVIEW_MAX_LENGTH) {
     return null;

package/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;

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