react-email 6.11.0 → 6.11.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # react-email
 
+## 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
+
+- 54769fc: Prevent `email export` from deleting the project, the home directory, the email templates or the static assets when `--outDir` points at them.
+- 6926bac: `<Markdown>` now applies `markdownCustomStyles.th` to table header cells. Header cells were previously styled with `td`, so any `th` styles were ignored.
+
 ## 6.11.0
 
 ### Minor 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.0",
+	version: "6.11.2",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
@@ -7580,6 +7580,19 @@ const getEmailTemplatesFromDirectory = (emailDirectory) => {
 	for (const directory of emailDirectory.subDirectories) templatePaths.push(...getEmailTemplatesFromDirectory(directory));
 	return templatePaths;
 };
+const isInside = (parent, child) => child.startsWith(`${parent}${path.sep}`);
+const getUnsafeOutDirMessage = (outDir, emailsDirectoryPath, { cwd, homeDirectory }) => {
+	const resolvedOutDir = path.resolve(cwd, outDir);
+	const resolvedEmailsDirectory = path.resolve(cwd, emailsDirectoryPath);
+	const staticDirectory = path.join(resolvedEmailsDirectory, "static");
+	if (resolvedOutDir === path.parse(resolvedOutDir).root) return "--outDir can't be the filesystem root.";
+	if (resolvedOutDir === homeDirectory) return "--outDir can't be your home directory.";
+	if (isInside(resolvedOutDir, homeDirectory)) return "--outDir can't contain your home directory.";
+	if (resolvedOutDir === cwd) return "--outDir can't be the project directory.";
+	if (isInside(resolvedOutDir, cwd)) return "--outDir can't contain the project directory.";
+	if (resolvedOutDir === resolvedEmailsDirectory || isInside(resolvedOutDir, resolvedEmailsDirectory)) return "--outDir can't contain your email templates.";
+	if (resolvedOutDir === staticDirectory || isInside(staticDirectory, resolvedOutDir)) return "--outDir can't be your static assets directory.";
+};
 const BUILD_BATCH_SIZE = 10;
 const RENDER_BATCH_SIZE = 25;
 const renderWorkerSource = `
@@ -7627,7 +7640,23 @@ const exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirec
 		else console.error(`Could not find the directory at ${emailsDirectoryPath}`);
 		process.exit(1);
 	}
-	if (fs.existsSync(pathToWhereEmailMarkupShouldBeDumped)) fs.rmSync(pathToWhereEmailMarkupShouldBeDumped, { recursive: true });
+	const resolvedPathToWhereEmailMarkupShouldBeDumped = path.resolve(process.cwd(), pathToWhereEmailMarkupShouldBeDumped);
+	if (fs.existsSync(resolvedPathToWhereEmailMarkupShouldBeDumped)) {
+		const unsafeOutDirMessage = getUnsafeOutDirMessage(resolvedPathToWhereEmailMarkupShouldBeDumped, emailsDirectoryPath, {
+			cwd: process.cwd(),
+			homeDirectory: os.homedir()
+		});
+		if (unsafeOutDirMessage) {
+			const message = `${unsafeOutDirMessage} Choose a different --outDir, such as "out".`;
+			if (spinner) stopSpinnerAndPersist(spinner, {
+				symbol: logSymbols.error,
+				text: message
+			});
+			else console.error(message);
+			process.exit(1);
+		}
+		fs.rmSync(resolvedPathToWhereEmailMarkupShouldBeDumped, { recursive: true });
+	}
 	const allTemplates = getEmailTemplatesFromDirectory(emailsDirectoryMetadata);
 	try {
 		const userPlugins = options.esbuildPlugins ? await loadEsbuildPlugins(path.resolve(process.cwd(), options.esbuildPlugins)) : [];

package/dist/components/markdown/markdown.cjs

@@ -80,7 +80,8 @@ const Markdown = react.forwardRef(({ children, markdownContainerStyles, markdown
 	renderer.tablecell = ({ tokens, align, header }) => {
 		const text = renderer.parser.parseInline(tokens);
 		const type = header ? "th" : "td";
-		return `${align ? `<${type} align="${align}"${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>` : `<${type}${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>`}${text}</${type}>\n`;
+		const style = require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles[type]);
+		return `${`<${type}${align ? ` align="${align}"` : ""}${style !== "" ? ` style="${style}"` : ""}>`}${text}</${type}>\n`;
 	};
 	renderer.tablerow = ({ text }) => {
 		return `<tr${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.tr) !== "" ? ` style="${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.tr)}"` : ""}>\n${text}</tr>\n`;

package/dist/components/markdown/markdown.mjs

@@ -78,7 +78,8 @@ const Markdown = React$1.forwardRef(({ children, markdownContainerStyles, markdo
 	renderer.tablecell = ({ tokens, align, header }) => {
 		const text = renderer.parser.parseInline(tokens);
 		const type = header ? "th" : "td";
-		return `${align ? `<${type} align="${align}"${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>` : `<${type}${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>`}${text}</${type}>\n`;
+		const style = parseCssInJsToInlineCss(finalStyles[type]);
+		return `${`<${type}${align ? ` align="${align}"` : ""}${style !== "" ? ` style="${style}"` : ""}>`}${text}</${type}>\n`;
 	};
 	renderer.tablerow = ({ text }) => {
 		return `<tr${parseCssInJsToInlineCss(finalStyles.tr) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.tr)}"` : ""}>\n${text}</tr>\n`;

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.0",
+  "version": "6.11.2",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"

package/src/components/markdown/markdown.spec.tsx

@@ -218,4 +218,33 @@ console.log(\`Hello, $\{name}!\`);
       </div><!--/$-->"
     `);
   });
+  it('applies th styles to table header cells and td styles to body cells', async () => {
+    const actualOutput = await render(
+      <Markdown
+        markdownCustomStyles={{
+          th: { fontWeight: 'bold' },
+          td: { color: 'gray' },
+        }}
+      >
+        {`| Name | Qty |
+| ---- | --: |
+| Apples | 3 |`}
+      </Markdown>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><table role="presentation">
+      <thead>
+      <tr>
+      <th style="font-weight:bold">Name</th>
+      <th align="right" style="font-weight:bold">Qty</th>
+      </tr>
+      </thead>
+      <tbody><tr>
+      <td style="color:gray">Apples</td>
+      <td align="right" style="color:gray">3</td>
+      </tr>
+      </tbody></table>
+      </div><!--/$-->"
+    `);
+  });
 });

package/src/components/markdown/markdown.tsx

@@ -197,17 +197,10 @@ export const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(
     renderer.tablecell = ({ tokens, align, header }) => {
       const text = renderer.parser.parseInline(tokens);
       const type = header ? 'th' : 'td';
-      const tag = align
-        ? `<${type} align="${align}"${
-            parseCssInJsToInlineCss(finalStyles.td) !== ''
-              ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"`
-              : ''
-          }>`
-        : `<${type}${
-            parseCssInJsToInlineCss(finalStyles.td) !== ''
-              ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"`
-              : ''
-          }>`;
+      const style = parseCssInJsToInlineCss(finalStyles[type]);
+      const tag = `<${type}${align ? ` align="${align}"` : ''}${
+        style !== '' ? ` style="${style}"` : ''
+      }>`;
       return `${tag}${text}</${type}>\n`;
     };
 

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