@react-email/tailwind 2.0.0-tailwindv4.4 → 2.0.1

package/dist/index.mjs

@@ -10,6 +10,7 @@ import { Hr } from "@react-email/hr";
 import { Img } from "@react-email/img";
 import { Link } from "@react-email/link";
 import { Preview } from "@react-email/preview";
+import { Text } from "@react-email/text";
 import { compile } from "tailwindcss";
 import { jsx } from "react/jsx-runtime";
 
@@ -19024,21 +19025,6 @@ const { version } = {
 //#region ../../node_modules/.pnpm/css-tree@3.1.0/node_modules/css-tree/lib/index.js
 const { tokenize, parse, generate, lexer, createLexer, walk, find, findLast, findAll, toPlainObject, fromPlainObject, fork } = syntax_default;
 
-//#endregion
-//#region src/hooks/use-suspended-promise.ts
-const promiseStates = /* @__PURE__ */ new Map();
-function useSuspensedPromise(promiseFn, key) {
-	const previousState = promiseStates.get(key);
-	if (previousState) {
-		if ("error" in previousState) throw previousState.error;
-		if ("result" in previousState) return previousState.result;
-		throw previousState.promise;
-	}
-	const state = { promise: promiseFn().then((result) => state.result = result).catch((error) => state.error = error) };
-	promiseStates.set(key, state);
-	throw state.promise;
-}
-
 //#endregion
 //#region src/utils/css/is-rule-inlinable.ts
 function isRuleInlinable(rule) {
@@ -19075,20 +19061,112 @@ function extractRulesPerClass(root, classes) {
 }
 
 //#endregion
-//#region src/utils/css/populate-parents-for-node-tree.ts
-function populateParentsForNodeTree(node) {
-	const parentPath = [];
+//#region src/utils/css/get-custom-properties.ts
+function getCustomProperties(node) {
+	const customProperties = /* @__PURE__ */ new Map();
 	walk(node, {
-		enter(child, parentListItem, parentList) {
-			child.parent = parentPath[parentPath.length - 1];
-			child.containingItem = parentListItem;
-			child.containedIn = parentList;
-			parentPath.push(child);
-		},
-		leave() {
-			parentPath.pop();
+		visit: "Atrule",
+		enter(atrule) {
+			if (atrule.name === "property" && atrule.prelude) {
+				const prelude = generate(atrule.prelude);
+				if (prelude.startsWith("--")) {
+					let syntax;
+					let inherits;
+					let initialValue;
+					walk(atrule, {
+						visit: "Declaration",
+						enter(declaration) {
+							if (declaration.property === "syntax") syntax = declaration;
+							if (declaration.property === "inherits") inherits = declaration;
+							if (declaration.property === "initial-value") initialValue = declaration;
+						}
+					});
+					customProperties.set(prelude, {
+						syntax,
+						inherits,
+						initialValue
+					});
+				}
+			}
+		}
+	});
+	return customProperties;
+}
+
+//#endregion
+//#region src/utils/text/from-dash-case-to-camel-case.ts
+const fromDashCaseToCamelCase = (text) => {
+	return text.replace(/-(\w|$)/g, (_, p1) => p1.toUpperCase());
+};
+
+//#endregion
+//#region src/utils/compatibility/get-react-property.ts
+function getReactProperty(prop) {
+	const modifiedProp = prop.toLowerCase();
+	if (modifiedProp.startsWith("--")) return modifiedProp;
+	if (modifiedProp.startsWith("-ms-")) return fromDashCaseToCamelCase(modifiedProp.slice(1));
+	return fromDashCaseToCamelCase(modifiedProp);
+}
+
+//#endregion
+//#region src/utils/css/unwrap-value.ts
+function unwrapValue(value) {
+	if (value.type === "Value" && value.children.size === 1) return value.children.first ?? value;
+	return value;
+}
+
+//#endregion
+//#region src/utils/css/make-inline-styles-for.ts
+function makeInlineStylesFor(inlinableRules, customProperties) {
+	const styles = {};
+	const localVariableDeclarations = /* @__PURE__ */ new Map();
+	for (const rule of inlinableRules) walk(rule, {
+		visit: "Declaration",
+		enter(declaration) {
+			if (declaration.property.startsWith("--")) localVariableDeclarations.set(declaration.property, declaration);
 		}
 	});
+	for (const rule of inlinableRules) {
+		walk(rule, {
+			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);
+						}
+					}
+				}
+			}
+		});
+		walk(rule, {
+			visit: "Declaration",
+			enter(declaration) {
+				if (declaration.property.startsWith("--")) return;
+				styles[getReactProperty(declaration.property)] = generate(declaration.value) + (declaration.important ? "!important" : "");
+			}
+		});
+	}
+	return styles;
+}
+
+//#endregion
+//#region src/inline-styles.ts
+function inlineStyles(styleSheet, classes) {
+	const { inlinable: inlinableRules } = extractRulesPerClass(styleSheet, classes);
+	const customProperties = getCustomProperties(styleSheet);
+	return makeInlineStylesFor(Array.from(inlinableRules.values()), customProperties);
 }
 
 //#endregion
@@ -19096,70 +19174,74 @@ function populateParentsForNodeTree(node) {
 function doSelectorsIntersect(first, second) {
 	if (generate(first) === generate(second)) return true;
 	let hasSomeUniversal = false;
-	const walker = (node) => {
+	const walker = (node, _parentListItem, parentList) => {
 		if (hasSomeUniversal) return;
 		if (node.type === "PseudoClassSelector" && node.name === "root") hasSomeUniversal = true;
-		if (node.type === "TypeSelector" && node.name === "*" && node.containedIn?.size === 1) hasSomeUniversal = true;
+		if (node.type === "TypeSelector" && node.name === "*" && parentList.size === 1) hasSomeUniversal = true;
 	};
 	walk(first, walker);
 	walk(second, walker);
 	if (hasSomeUniversal) return true;
 	return false;
 }
-function someParent(node, predicate) {
-	if (node.parent) {
-		if (predicate(node.parent)) return true;
-		return someParent(node.parent, predicate);
-	}
-	return false;
-}
 function resolveAllCssVariables(node) {
-	populateParentsForNodeTree(node);
 	const variableDefinitions = /* @__PURE__ */ new Set();
 	const variableUses = /* @__PURE__ */ new Set();
+	const path = [];
 	walk(node, {
-		visit: "Declaration",
-		enter(declaration) {
-			if (someParent(declaration, (ancestor) => ancestor.type === "Atrule" && ancestor.name === "layer" && ancestor.prelude !== null && generate(ancestor.prelude).includes("properties"))) return;
-			if (/--[\S]+/.test(declaration.property)) variableDefinitions.add({
-				declaration,
-				variableName: declaration.property,
-				definition: generate(declaration.value)
-			});
-			else {
-				function parseVariableUsesFrom(node$1) {
-					walk(node$1, {
-						visit: "Function",
-						enter(funcNode) {
-							if (funcNode.name === "var") {
-								const children = funcNode.children.toArray();
-								const name$49 = generate(children[0]);
-								const fallback = children[2] ? generate(children[2]) : void 0;
-								variableUses.add({
-									declaration,
-									fallback,
-									variableName: name$49,
-									raw: generate(funcNode)
-								});
-								if (fallback?.includes("var(")) parseVariableUsesFrom(parse(fallback, { context: "value" }));
+		leave() {
+			path.shift();
+		},
+		enter(node$1) {
+			if (node$1.type === "Declaration") {
+				const declaration = node$1;
+				if (path.some((ancestor) => ancestor.type === "Atrule" && ancestor.name === "layer" && ancestor.prelude !== null && generate(ancestor.prelude).includes("properties"))) {
+					path.unshift(node$1);
+					return;
+				}
+				if (/--[\S]+/.test(declaration.property)) variableDefinitions.add({
+					declaration,
+					path: [...path],
+					variableName: declaration.property,
+					definition: generate(declaration.value)
+				});
+				else {
+					function parseVariableUsesFrom(node$2) {
+						walk(node$2, {
+							visit: "Function",
+							enter(funcNode) {
+								if (funcNode.name === "var") {
+									const children = funcNode.children.toArray();
+									const name$49 = generate(children[0]);
+									const fallback = children[2] ? generate(children[2]) : void 0;
+									variableUses.add({
+										declaration,
+										path: [...path],
+										fallback,
+										variableName: name$49,
+										raw: generate(funcNode)
+									});
+									if (fallback?.includes("var(")) parseVariableUsesFrom(parse(fallback, { context: "value" }));
+								}
 							}
-						}
-					});
+						});
+					}
+					parseVariableUsesFrom(declaration.value);
 				}
-				parseVariableUsesFrom(declaration.value);
 			}
+			path.unshift(node$1);
 		}
 	});
 	for (const use of variableUses) {
 		let hasReplaced = false;
 		for (const definition of variableDefinitions) {
 			if (use.variableName !== definition.variableName) continue;
-			if (use.declaration.parent?.type === "Block" && use.declaration.parent?.parent?.type === "Atrule" && use.declaration.parent.parent?.parent?.type === "Block" && use.declaration.parent.parent?.parent?.parent?.type === "Rule" && definition.declaration.parent?.type === "Block" && definition.declaration.parent?.parent?.type === "Rule" && doSelectorsIntersect(use.declaration.parent.parent.parent.parent.prelude, definition.declaration.parent.parent.prelude)) {
+			if (use.path[0]?.type === "Block" && use.path[1]?.type === "Atrule" && use.path[2]?.type === "Block" && use.path[3]?.type === "Rule" && definition.path[0].type === "Block" && definition.path[1].type === "Rule" && doSelectorsIntersect(use.path[3].prelude, definition.path[1].prelude)) {
 				use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, definition.definition), { context: "value" });
 				hasReplaced = true;
 				break;
 			}
-			if (use.declaration.parent?.type === "Block" && use.declaration.parent?.parent?.type === "Rule" && definition.declaration.parent?.type === "Block" && definition.declaration.parent?.parent?.type === "Rule" && doSelectorsIntersect(use.declaration.parent.parent.prelude, definition.declaration.parent.parent.prelude)) {
+			if (use.path[0]?.type === "Block" && use.path[1]?.type === "Rule" && definition.path[0]?.type === "Block" && definition.path[1]?.type === "Rule" && doSelectorsIntersect(use.path[1].prelude, definition.path[1].prelude)) {
 				use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, definition.definition), { context: "value" });
 				hasReplaced = true;
 				break;
@@ -19261,6 +19343,44 @@ function resolveCalcExpressions(node) {
 
 //#endregion
 //#region src/utils/css/sanitize-declarations.ts
+function rgbNode(r, g, b, alpha) {
+	const children = new List();
+	children.appendData({
+		type: "Number",
+		value: r.toFixed(0)
+	});
+	children.appendData({
+		type: "Operator",
+		value: ","
+	});
+	children.appendData({
+		type: "Number",
+		value: g.toFixed(0)
+	});
+	children.appendData({
+		type: "Operator",
+		value: ","
+	});
+	children.appendData({
+		type: "Number",
+		value: b.toFixed(0)
+	});
+	if (alpha !== 1 && alpha !== void 0) {
+		children.appendData({
+			type: "Operator",
+			value: ","
+		});
+		children.appendData({
+			type: "Number",
+			value: alpha.toString()
+		});
+	}
+	return {
+		type: "Function",
+		name: "rgb",
+		children
+	};
+}
 const LAB_TO_LMS = {
 	l: [.3963377773761749, .2158037573099136],
 	m: [-.1055613458156586, -.0638541728258133],
@@ -19309,9 +19429,9 @@ function oklchToRgb(oklch) {
 	const g = 255 * lrgbToRgb(LSM_TO_RGB.g[0] * l + LSM_TO_RGB.g[1] * m + LSM_TO_RGB.g[2] * s);
 	const b = 255 * lrgbToRgb(LSM_TO_RGB.b[0] * l + LSM_TO_RGB.b[1] * m + LSM_TO_RGB.b[2] * s);
 	return {
-		r: clamp(r, 0, 255).toFixed(0),
-		g: clamp(g, 0, 255).toFixed(0),
-		b: clamp(b, 0, 255).toFixed(0)
+		r: clamp(r, 0, 255),
+		g: clamp(g, 0, 255),
+		b: clamp(b, 0, 255)
 	};
 }
 function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
@@ -19352,6 +19472,7 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 	walk(nodeContainingDeclarations, {
 		visit: "Declaration",
 		enter(declaration, item, list) {
+			if (declaration.value.type === "Raw") declaration.value = parse(declaration.value.value, { context: "value" });
 			if (/border-radius\s*:\s*calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(generate(declaration))) declaration.value = parse("9999px", { context: "value" });
 			walk(declaration, {
 				visit: "Function",
@@ -19401,8 +19522,7 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 							c,
 							h
 						});
-						const alphaString = a !== void 0 ? `,${a}` : "";
-						funcParentListItem.data = parse(`rgb(${rgb.r},${rgb.g},${rgb.b}${alphaString})`, { context: "value" });
+						funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
 					}
 					if (func.name === "rgb") {
 						let r;
@@ -19445,8 +19565,8 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 							}
 						}
 						if (r === void 0 || g === void 0 || b === void 0) throw new Error("Could not determine the parameters of an rgb() function.", { cause: declaration });
-						if (a === void 0 || a === 1) funcParentListItem.data = parse(`rgb(${r},${g},${b})`, { context: "value" });
-						else funcParentListItem.data = parse(`rgb(${r},${g},${b},${a})`, { context: "value" });
+						if (a === void 0 || a === 1) funcParentListItem.data = rgbNode(r, g, b);
+						else funcParentListItem.data = rgbNode(r, g, b, a);
 					}
 				}
 			});
@@ -19455,45 +19575,42 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 				enter(hash, hashParentListItem) {
 					const hex = hash.value.trim();
 					if (hex.length === 3) {
-						hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.charAt(0) + hex.charAt(0), 16)},${Number.parseInt(hex.charAt(1) + hex.charAt(1), 16)},${Number.parseInt(hex.charAt(2) + hex.charAt(2), 16)})`, { context: "value" });
+						hashParentListItem.data = rgbNode(Number.parseInt(hex.charAt(0) + hex.charAt(0), 16), Number.parseInt(hex.charAt(1) + hex.charAt(1), 16), Number.parseInt(hex.charAt(2) + hex.charAt(2), 16));
 						return;
 					}
 					if (hex.length === 4) {
-						hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.charAt(0) + hex.charAt(0), 16)},${Number.parseInt(hex.charAt(1) + hex.charAt(1), 16)},${Number.parseInt(hex.charAt(2) + hex.charAt(2), 16)},${(Number.parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255).toFixed(1)})`, { context: "value" });
+						hashParentListItem.data = rgbNode(Number.parseInt(hex.charAt(0) + hex.charAt(0), 16), Number.parseInt(hex.charAt(1) + hex.charAt(1), 16), Number.parseInt(hex.charAt(2) + hex.charAt(2), 16), Number.parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255);
 						return;
 					}
 					if (hex.length === 5) {
-						hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.slice(0, 2), 16)},${Number.parseInt(hex.charAt(2) + hex.charAt(2), 16)},${Number.parseInt(hex.charAt(3) + hex.charAt(3), 16)},${(Number.parseInt(hex.charAt(4) + hex.charAt(4), 16) / 255).toFixed(1)})`, { context: "value" });
+						hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.charAt(2) + hex.charAt(2), 16), Number.parseInt(hex.charAt(3) + hex.charAt(3), 16), Number.parseInt(hex.charAt(4) + hex.charAt(4), 16) / 255);
 						return;
 					}
 					if (hex.length === 6) {
-						hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.slice(0, 2), 16)},${Number.parseInt(hex.slice(2, 4), 16)},${Number.parseInt(hex.slice(4, 6), 16)})`, { context: "value" });
+						hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16));
 						return;
 					}
 					if (hex.length === 7) {
-						hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.slice(0, 2), 16)},${Number.parseInt(hex.slice(2, 4), 16)},${Number.parseInt(hex.slice(4, 6), 16)},${(Number.parseInt(hex.charAt(6) + hex.charAt(6), 16) / 255).toFixed(1)})`, { context: "value" });
+						hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16), Number.parseInt(hex.charAt(6) + hex.charAt(6), 16) / 255);
 						return;
 					}
-					hashParentListItem.data = parse(`rgb(${Number.parseInt(hex.slice(0, 2), 16)},${Number.parseInt(hex.slice(2, 4), 16)},${Number.parseInt(hex.slice(4, 6), 16)},${(Number.parseInt(hex.slice(6, 8), 16) / 255).toFixed(1)})`, { context: "value" });
+					hashParentListItem.data = rgbNode(Number.parseInt(hex.slice(0, 2), 16), Number.parseInt(hex.slice(2, 4), 16), Number.parseInt(hex.slice(4, 6), 16), Number.parseInt(hex.slice(6, 8), 16) / 255);
 				}
 			});
 			walk(declaration, {
 				visit: "Function",
 				enter(func, parentListItem) {
 					if (func.name === "color-mix") {
-						const originalColor = find(func, (node) => node.type === "Function" && node.name === "rgb");
-						const percentage$1 = find(func, (node) => node.type === "Percentage");
-						if (func.children.last?.type === "Identifier" && func.children.last.name === "transparent" && originalColor && percentage$1) {
-							const alpha = Number.parseFloat(percentage$1.value) / 100;
-							originalColor.children.appendData({
+						const children = func.children.toArray();
+						const color = children[3];
+						const opacity = children[4];
+						if (func.children.last?.type === "Identifier" && func.children.last.name === "transparent" && color?.type === "Function" && color?.name === "rgb" && opacity) {
+							color.children.appendData({
 								type: "Operator",
 								value: ","
 							});
-							originalColor.children.appendData({
-								type: "Number",
-								value: alpha.toString()
-							});
-							parentListItem.data = originalColor;
+							color.children.appendData(opacity);
+							parentListItem.data = color;
 						}
 					}
 				}
@@ -19518,6 +19635,29 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 	});
 }
 
+//#endregion
+//#region src/sanitize-stylesheet.ts
+function sanitizeStyleSheet(styleSheet) {
+	resolveAllCssVariables(styleSheet);
+	resolveCalcExpressions(styleSheet);
+	sanitizeDeclarations(styleSheet);
+}
+
+//#endregion
+//#region src/hooks/use-suspended-promise.ts
+const promiseStates = /* @__PURE__ */ new Map();
+function useSuspensedPromise(promiseFn, key) {
+	const previousState = promiseStates.get(key);
+	if (previousState) {
+		if ("error" in previousState) throw previousState.error;
+		if ("result" in previousState) return previousState.result;
+		throw previousState.promise;
+	}
+	const state = { promise: promiseFn().then((result) => state.result = result).catch((error) => state.error = error) };
+	promiseStates.set(key, state);
+	throw state.promise;
+}
+
 //#endregion
 //#region src/utils/compatibility/sanitize-class-name.ts
 const digitToNameMap = {
@@ -19586,7 +19726,8 @@ const componentsToTreatAsElements = [
 	Hr,
 	Img,
 	Link,
-	Preview
+	Preview,
+	Text
 ];
 const isComponent = (element) => {
 	return (typeof element.type === "function" || element.type.render !== void 0) && !componentsToTreatAsElements.includes(element.type);
@@ -19620,66 +19761,9 @@ function mapReactTree(value, process) {
 	return mapped && mapped.length === 1 ? mapped[0] : mapped;
 }
 
-//#endregion
-//#region src/utils/text/from-dash-case-to-camel-case.ts
-const fromDashCaseToCamelCase = (text) => {
-	return text.replace(/-(\w|$)/g, (_, p1) => p1.toUpperCase());
-};
-
-//#endregion
-//#region src/utils/compatibility/get-react-property.ts
-function getReactProperty(prop) {
-	const modifiedProp = prop.toLowerCase();
-	if (modifiedProp.startsWith("--")) return modifiedProp;
-	if (modifiedProp.startsWith("-ms-")) return fromDashCaseToCamelCase(modifiedProp.slice(1));
-	return fromDashCaseToCamelCase(modifiedProp);
-}
-
-//#endregion
-//#region src/utils/css/make-inline-styles-for.ts
-function makeInlineStylesFor(inlinableRules) {
-	const styles = {};
-	const localVariableDeclarations = /* @__PURE__ */ new Set();
-	for (const rule of inlinableRules) walk(rule, {
-		visit: "Declaration",
-		enter(declaration) {
-			if (declaration.property.startsWith("--")) localVariableDeclarations.add(declaration);
-		}
-	});
-	for (const rule of inlinableRules) {
-		walk(rule, {
-			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 = Array.from(localVariableDeclarations).find((declaration) => variableName === declaration.property);
-						if (definition) funcParentListItem.data = definition.value;
-					}
-				}
-			}
-		});
-		walk(rule, {
-			visit: "Declaration",
-			enter(declaration) {
-				if (declaration.property.startsWith("--")) return;
-				styles[getReactProperty(declaration.property)] = generate(declaration.value) + (declaration.important ? "!important" : "");
-			}
-		});
-	}
-	return styles;
-}
-
 //#endregion
 //#region src/utils/tailwindcss/clone-element-with-inlined-styles.ts
-function cloneElementWithInlinedStyles(element, inlinableRules, nonInlinableRules) {
+function cloneElementWithInlinedStyles(element, inlinableRules, nonInlinableRules, customProperties) {
 	const propsToOverwrite = {};
 	if (element.props.className && !isComponent(element)) {
 		const classes = element.props.className.trim().split(/\s+/);
@@ -19691,7 +19775,7 @@ function cloneElementWithInlinedStyles(element, inlinableRules, nonInlinableRule
 			else residualClasses.push(className);
 		}
 		propsToOverwrite.style = {
-			...makeInlineStylesFor(rules),
+			...makeInlineStylesFor(rules, customProperties),
 			...element.props.style
 		};
 		if (residualClasses.length > 0) propsToOverwrite.className = residualClasses.map((className) => {
@@ -21594,7 +21678,7 @@ const pixelBasedPreset = { theme: { extend: {
 	}
 } } };
 function Tailwind({ children, config }) {
-	const tailwindSetup = useSuspensedPromise(() => setupTailwind(config ?? {}), JSON.stringify(config));
+	const tailwindSetup = useSuspensedPromise(() => setupTailwind(config ?? {}), JSON.stringify(config, (_key, value) => typeof value === "function" ? value.toString() : value));
 	let classesUsed = [];
 	let mappedChildren = mapReactTree(children, (node) => {
 		if (React$1.isValidElement(node)) {
@@ -21607,20 +21691,19 @@ function Tailwind({ children, config }) {
 		return node;
 	});
 	const styleSheet = tailwindSetup.getStyleSheet();
-	resolveAllCssVariables(styleSheet);
-	resolveCalcExpressions(styleSheet);
-	sanitizeDeclarations(styleSheet);
+	sanitizeStyleSheet(styleSheet);
 	const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classesUsed);
-	sanitizeNonInlinableRules(styleSheet);
+	const customProperties = getCustomProperties(styleSheet);
 	const nonInlineStyles = {
 		type: "StyleSheet",
-		children: new List().fromArray(nonInlinableRules.values().toArray())
+		children: new List().fromArray(Array.from(nonInlinableRules.values()))
 	};
+	sanitizeNonInlinableRules(nonInlineStyles);
 	const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
 	let appliedNonInlineStyles = false;
 	mappedChildren = mapReactTree(mappedChildren, (node) => {
 		if (React$1.isValidElement(node)) {
-			const elementWithInlinedStyles = cloneElementWithInlinedStyles(node, inlinableRules, nonInlinableRules);
+			const elementWithInlinedStyles = cloneElementWithInlinedStyles(node, inlinableRules, nonInlinableRules, customProperties);
 			if (elementWithInlinedStyles.type === "head") {
 				appliedNonInlineStyles = true;
 				const styleElement = /* @__PURE__ */ jsx("style", { children: generate(nonInlineStyles) });
@@ -21630,7 +21713,7 @@ function Tailwind({ children, config }) {
 		}
 		return node;
 	});
-	if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`You are trying to use the following Tailwind classes that cannot be inlined: ${nonInlinableRules.keys().toArray().join(" ")}.
+	if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`You are trying to use the following Tailwind classes that cannot be inlined: ${Array.from(nonInlinableRules.keys()).join(" ")}.
 For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
 the Tailwind component tried finding a <head> element but just wasn't able to find it.
 
@@ -21643,5 +21726,5 @@ please file a bug https://github.com/resend/react-email/issues/new?assignees=&la
 }
 
 //#endregion
-export { Tailwind, pixelBasedPreset };
+export { Tailwind, inlineStyles, pixelBasedPreset, sanitizeStyleSheet, setupTailwind };
 //# sourceMappingURL=index.mjs.map