@better-svelte-email/server 2.1.0 → 2.1.2

package/dist/index.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));
@@ -2072,12 +2072,13 @@ function tokenizeCalcExpression(expr) {
 			if (current.trim()) tokens.push(current.trim());
 			tokens.push(char);
 			current = "";
-		} else if (char === "+" || char === "-") if (current.trim() && !/[eE]$/.test(current.trim())) {
-			tokens.push(current.trim());
-			tokens.push(char);
-			current = "";
-		} else current += char;
-		else if (char === " ") {
+		} else if (char === "+" || char === "-") {
+			if (current.trim() && !/[eE]$/.test(current.trim())) {
+				tokens.push(current.trim());
+				tokens.push(char);
+				current = "";
+			} else current += char;
+		} else if (char === " ") {
 			if (current.trim()) {
 				let nextNonSpace = i + 1;
 				while (nextNonSpace < expr.length && expr[nextNonSpace] === " ") nextNonSpace++;
@@ -2127,15 +2128,18 @@ function evaluateCalcExpression(expr, baseFontSize) {
 				} else if (left.type === "number" && right.type === "dimension") {
 					resultUnit = right.unit;
 					resultType = "dimension";
-				} else if (left.type === "dimension" && right.type === "dimension") if (token === "/") resultType = "number";
-				else {
-					resultUnit = left.unit;
-					resultType = "dimension";
-				}
-				else if (left.type === "percentage" || right.type === "percentage") if (token === "/" && left.type === "percentage" && right.type === "percentage") resultType = "number";
-				else {
-					resultUnit = "%";
-					resultType = "percentage";
+				} else if (left.type === "dimension" && right.type === "dimension") {
+					if (token === "/") resultType = "number";
+					else {
+						resultUnit = left.unit;
+						resultType = "dimension";
+					}
+				} else if (left.type === "percentage" || right.type === "percentage") {
+					if (token === "/" && left.type === "percentage" && right.type === "percentage") resultType = "number";
+					else {
+						resultUnit = "%";
+						resultType = "percentage";
+					}
 				}
 				const result = formatValue({
 					value: resultValue,
@@ -2515,7 +2519,7 @@ function sanitizeStyleSheet(root, config) {
 }
 //#endregion
 //#region src/utils/css/is-rule-inlinable.ts
-const NON_INLINABLE_AT_RULES = new Set([
+const NON_INLINABLE_AT_RULES = /* @__PURE__ */ new Set([
 	"media",
 	"supports",
 	"container",
@@ -2655,7 +2659,7 @@ function extractGlobalRules(root) {
 * Checks if a rule is inside a media query or other non-inlinable at-rule.
 */
 function isRuleInMediaQuery(rule) {
-	const NON_INLINABLE_AT_RULES = new Set([
+	const NON_INLINABLE_AT_RULES = /* @__PURE__ */ new Set([
 		"media",
 		"supports",
 		"container",
@@ -2738,6 +2742,45 @@ function sanitizeNonInlinableRules(root) {
 	});
 }
 //#endregion
+//#region src/utils/css/clone-rule-with-at-rule-ancestors.ts
+/**
+* At-rules that wrap utility rules and must be preserved when extracting
+* non-inlinable CSS for the email <style> tag.
+*
+* Tailwind v4.3.3+ flattens nesting so media/supports wrap the selector
+* instead of nesting inside it. Cloning the rule alone would drop them.
+*/
+const PRESERVED_AT_RULES = /* @__PURE__ */ new Set([
+	"media",
+	"supports",
+	"container",
+	"document"
+]);
+/**
+* Clone a PostCSS rule, re-wrapping it with any ancestor conditional at-rules
+* (`@media`, `@supports`, `@container`, `@document`).
+*
+* `@layer` and other grouping at-rules are skipped.
+*/
+function cloneRuleWithAtRuleAncestors(rule) {
+	let current = rule.clone();
+	const ancestors = [];
+	let parent = rule.parent;
+	while (parent && parent.type !== "root") {
+		if (parent.type === "atrule") {
+			const atRule = parent;
+			if (PRESERVED_AT_RULES.has(atRule.name)) ancestors.push(atRule);
+		}
+		parent = parent.parent;
+	}
+	for (const atRule of ancestors) {
+		const wrapper = atRule.clone({ nodes: [] });
+		wrapper.append(current);
+		current = wrapper;
+	}
+	return current;
+}
+//#endregion
 //#region src/utils/css/make-inline-styles-for.ts
 function makeInlineStylesFor(inlinableRules, customProperties) {
 	let styles = "";
@@ -2839,17 +2882,19 @@ function addInlinedStylesToElement(element, inlinableRules, nonInlinableRules, c
 			else residualClasses.push(className);
 		}
 		const newStyles = combineStyles(globalStyles, existingStyles, makeInlineStylesFor(rules, customProperties));
-		if (newStyles) if (styleAttr) element.attrs = element.attrs?.map((attr) => {
-			if (attr.name === "style") return {
-				...attr,
+		if (newStyles) {
+			if (styleAttr) element.attrs = element.attrs?.map((attr) => {
+				if (attr.name === "style") return {
+					...attr,
+					value: newStyles
+				};
+				return attr;
+			});
+			else element.attrs = [...element.attrs, {
+				name: "style",
 				value: newStyles
-			};
-			return attr;
-		});
-		else element.attrs = [...element.attrs, {
-			name: "style",
-			value: newStyles
-		}];
+			}];
+		}
 		if (residualClasses.length > 0) element.attrs = element.attrs?.map((attr) => {
 			if (attr.name === "class") return {
 				...attr,
@@ -2866,17 +2911,19 @@ function addInlinedStylesToElement(element, inlinableRules, nonInlinableRules, c
 		else element.attrs = element.attrs?.filter((attr) => attr.name !== "class");
 	} else if (globalStyles) {
 		const newStyles = combineStyles(globalStyles, existingStyles);
-		if (newStyles) if (styleAttr) element.attrs = element.attrs?.map((attr) => {
-			if (attr.name === "style") return {
-				...attr,
+		if (newStyles) {
+			if (styleAttr) element.attrs = element.attrs?.map((attr) => {
+				if (attr.name === "style") return {
+					...attr,
+					value: newStyles
+				};
+				return attr;
+			});
+			else element.attrs = [...element.attrs || [], {
+				name: "style",
 				value: newStyles
-			};
-			return attr;
-		});
-		else element.attrs = [...element.attrs || [], {
-			name: "style",
-			value: newStyles
-		}];
+			}];
+		}
 	}
 	return element;
 }
@@ -3011,7 +3058,7 @@ var Renderer = class {
 			const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classesUsed);
 			const customProperties = getCustomProperties(styleSheet);
 			const nonInlineStyles = postcss.default.root();
-			for (const rule of nonInlinableRules.values()) nonInlineStyles.append(rule.clone());
+			for (const rule of nonInlinableRules.values()) nonInlineStyles.append(cloneRuleWithAtRuleAncestors(rule));
 			sanitizeNonInlinableRules(nonInlineStyles);
 			const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
 			let appliedNonInlineStyles = false;

package/dist/index.d.cts

@@ -1,6 +1,5 @@
 import { DefaultTreeAdapterTypes } from "parse5";
 import { Config } from "tailwindcss";
-
 //#region src/utils/tailwindcss/pixel-based-preset.d.ts
 declare const pixelBasedPreset: TailwindConfig;
 //#endregion
@@ -10,7 +9,8 @@ type TailwindConfig = Omit<Config, 'content'>;
  * Options for creating a Renderer instance
  */
 type RendererOptions = {
-  /** Tailwind CSS configuration */tailwindConfig?: TailwindConfig;
+  /** Tailwind CSS configuration */
+  tailwindConfig?: TailwindConfig;
   /**
    * Custom CSS to inject into email rendering (e.g., app theme variables).
    *

package/dist/index.d.mts

@@ -1,6 +1,5 @@
 import { DefaultTreeAdapterTypes } from "parse5";
 import { Config } from "tailwindcss";
-
 //#region src/utils/tailwindcss/pixel-based-preset.d.ts
 declare const pixelBasedPreset: TailwindConfig;
 //#endregion
@@ -10,7 +9,8 @@ type TailwindConfig = Omit<Config, 'content'>;
  * Options for creating a Renderer instance
  */
 type RendererOptions = {
-  /** Tailwind CSS configuration */tailwindConfig?: TailwindConfig;
+  /** Tailwind CSS configuration */
+  tailwindConfig?: TailwindConfig;
   /**
    * Custom CSS to inject into email rendering (e.g., app theme variables).
    *

package/dist/index.mjs

@@ -2047,12 +2047,13 @@ function tokenizeCalcExpression(expr) {
 			if (current.trim()) tokens.push(current.trim());
 			tokens.push(char);
 			current = "";
-		} else if (char === "+" || char === "-") if (current.trim() && !/[eE]$/.test(current.trim())) {
-			tokens.push(current.trim());
-			tokens.push(char);
-			current = "";
-		} else current += char;
-		else if (char === " ") {
+		} else if (char === "+" || char === "-") {
+			if (current.trim() && !/[eE]$/.test(current.trim())) {
+				tokens.push(current.trim());
+				tokens.push(char);
+				current = "";
+			} else current += char;
+		} else if (char === " ") {
 			if (current.trim()) {
 				let nextNonSpace = i + 1;
 				while (nextNonSpace < expr.length && expr[nextNonSpace] === " ") nextNonSpace++;
@@ -2102,15 +2103,18 @@ function evaluateCalcExpression(expr, baseFontSize) {
 				} else if (left.type === "number" && right.type === "dimension") {
 					resultUnit = right.unit;
 					resultType = "dimension";
-				} else if (left.type === "dimension" && right.type === "dimension") if (token === "/") resultType = "number";
-				else {
-					resultUnit = left.unit;
-					resultType = "dimension";
-				}
-				else if (left.type === "percentage" || right.type === "percentage") if (token === "/" && left.type === "percentage" && right.type === "percentage") resultType = "number";
-				else {
-					resultUnit = "%";
-					resultType = "percentage";
+				} else if (left.type === "dimension" && right.type === "dimension") {
+					if (token === "/") resultType = "number";
+					else {
+						resultUnit = left.unit;
+						resultType = "dimension";
+					}
+				} else if (left.type === "percentage" || right.type === "percentage") {
+					if (token === "/" && left.type === "percentage" && right.type === "percentage") resultType = "number";
+					else {
+						resultUnit = "%";
+						resultType = "percentage";
+					}
 				}
 				const result = formatValue({
 					value: resultValue,
@@ -2490,7 +2494,7 @@ function sanitizeStyleSheet(root, config) {
 }
 //#endregion
 //#region src/utils/css/is-rule-inlinable.ts
-const NON_INLINABLE_AT_RULES = new Set([
+const NON_INLINABLE_AT_RULES = /* @__PURE__ */ new Set([
 	"media",
 	"supports",
 	"container",
@@ -2630,7 +2634,7 @@ function extractGlobalRules(root) {
 * Checks if a rule is inside a media query or other non-inlinable at-rule.
 */
 function isRuleInMediaQuery(rule) {
-	const NON_INLINABLE_AT_RULES = new Set([
+	const NON_INLINABLE_AT_RULES = /* @__PURE__ */ new Set([
 		"media",
 		"supports",
 		"container",
@@ -2713,6 +2717,45 @@ function sanitizeNonInlinableRules(root) {
 	});
 }
 //#endregion
+//#region src/utils/css/clone-rule-with-at-rule-ancestors.ts
+/**
+* At-rules that wrap utility rules and must be preserved when extracting
+* non-inlinable CSS for the email <style> tag.
+*
+* Tailwind v4.3.3+ flattens nesting so media/supports wrap the selector
+* instead of nesting inside it. Cloning the rule alone would drop them.
+*/
+const PRESERVED_AT_RULES = /* @__PURE__ */ new Set([
+	"media",
+	"supports",
+	"container",
+	"document"
+]);
+/**
+* Clone a PostCSS rule, re-wrapping it with any ancestor conditional at-rules
+* (`@media`, `@supports`, `@container`, `@document`).
+*
+* `@layer` and other grouping at-rules are skipped.
+*/
+function cloneRuleWithAtRuleAncestors(rule) {
+	let current = rule.clone();
+	const ancestors = [];
+	let parent = rule.parent;
+	while (parent && parent.type !== "root") {
+		if (parent.type === "atrule") {
+			const atRule = parent;
+			if (PRESERVED_AT_RULES.has(atRule.name)) ancestors.push(atRule);
+		}
+		parent = parent.parent;
+	}
+	for (const atRule of ancestors) {
+		const wrapper = atRule.clone({ nodes: [] });
+		wrapper.append(current);
+		current = wrapper;
+	}
+	return current;
+}
+//#endregion
 //#region src/utils/css/make-inline-styles-for.ts
 function makeInlineStylesFor(inlinableRules, customProperties) {
 	let styles = "";
@@ -2814,17 +2857,19 @@ function addInlinedStylesToElement(element, inlinableRules, nonInlinableRules, c
 			else residualClasses.push(className);
 		}
 		const newStyles = combineStyles(globalStyles, existingStyles, makeInlineStylesFor(rules, customProperties));
-		if (newStyles) if (styleAttr) element.attrs = element.attrs?.map((attr) => {
-			if (attr.name === "style") return {
-				...attr,
+		if (newStyles) {
+			if (styleAttr) element.attrs = element.attrs?.map((attr) => {
+				if (attr.name === "style") return {
+					...attr,
+					value: newStyles
+				};
+				return attr;
+			});
+			else element.attrs = [...element.attrs, {
+				name: "style",
 				value: newStyles
-			};
-			return attr;
-		});
-		else element.attrs = [...element.attrs, {
-			name: "style",
-			value: newStyles
-		}];
+			}];
+		}
 		if (residualClasses.length > 0) element.attrs = element.attrs?.map((attr) => {
 			if (attr.name === "class") return {
 				...attr,
@@ -2841,17 +2886,19 @@ function addInlinedStylesToElement(element, inlinableRules, nonInlinableRules, c
 		else element.attrs = element.attrs?.filter((attr) => attr.name !== "class");
 	} else if (globalStyles) {
 		const newStyles = combineStyles(globalStyles, existingStyles);
-		if (newStyles) if (styleAttr) element.attrs = element.attrs?.map((attr) => {
-			if (attr.name === "style") return {
-				...attr,
+		if (newStyles) {
+			if (styleAttr) element.attrs = element.attrs?.map((attr) => {
+				if (attr.name === "style") return {
+					...attr,
+					value: newStyles
+				};
+				return attr;
+			});
+			else element.attrs = [...element.attrs || [], {
+				name: "style",
 				value: newStyles
-			};
-			return attr;
-		});
-		else element.attrs = [...element.attrs || [], {
-			name: "style",
-			value: newStyles
-		}];
+			}];
+		}
 	}
 	return element;
 }
@@ -2986,7 +3033,7 @@ var Renderer = class {
 			const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classesUsed);
 			const customProperties = getCustomProperties(styleSheet);
 			const nonInlineStyles = postcss.root();
-			for (const rule of nonInlinableRules.values()) nonInlineStyles.append(rule.clone());
+			for (const rule of nonInlinableRules.values()) nonInlineStyles.append(cloneRuleWithAtRuleAncestors(rule));
 			sanitizeNonInlinableRules(nonInlineStyles);
 			const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
 			let appliedNonInlineStyles = false;

package/package.json

@@ -1,14 +1,14 @@
 {
 	"name": "@better-svelte-email/server",
-	"version": "2.1.0",
+	"version": "2.1.2",
 	"main": "./dist/index.cjs",
 	"module": "./dist/index.mjs",
 	"dependencies": {
 		"html-to-text": "^10.0.0",
 		"parse5": "^8.0.1",
-		"postcss": "^8.5.15",
+		"postcss": "^8.5.26",
 		"postcss-value-parser": "^4.2.0",
-		"tailwindcss": "^4.3.0"
+		"tailwindcss": "^4.3.3"
 	},
 	"peerDependencies": {
 		"svelte": ">=5.14.3"