react-email 6.3.0 → 6.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react-email
 
+## 6.3.1
+
+### Patch Changes
+
+- c610dc0: fix: padding in Container/Section failing on Klaviyo and Outlook desktop
+
 ## 6.3.0
 
 ## 6.2.0

package/dist/cli/index.mjs

@@ -6523,7 +6523,7 @@ const getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFil
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.3.0",
+	version: "6.3.1",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",

package/dist/index.cjs

@@ -17461,7 +17461,16 @@ const Column = react.forwardRef(({ children, style, ...props }, ref) => {
 Column.displayName = "Column";
 //#endregion
 //#region src/components/container/container.tsx
-const Container = react.forwardRef(({ children, style, ...props }, ref) => {
+const Container = react.forwardRef(({ children, style = {}, ...props }, ref) => {
+	const tdStyle = {};
+	const tableStyle = {};
+	const styleRecord = style;
+	for (const key in styleRecord) {
+		if (!Object.hasOwn(styleRecord, key)) continue;
+		const value = styleRecord[key];
+		if (key === "padding" || key === "paddingTop" || key === "paddingRight" || key === "paddingBottom" || key === "paddingLeft") tdStyle[key] = value;
+		else tableStyle[key] = value;
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
 		align: "center",
 		width: "100%",
@@ -17473,11 +17482,14 @@ const Container = react.forwardRef(({ children, style, ...props }, ref) => {
 		role: "presentation",
 		style: {
 			maxWidth: "37.5em",
-			...style
+			...tableStyle
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 			style: { width: "100%" },
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				style: tdStyle,
+				children
+			})
 		}) })
 	});
 });
@@ -17911,7 +17923,16 @@ const Row = react.forwardRef(({ children, style, ...props }, ref) => {
 Row.displayName = "Row";
 //#endregion
 //#region src/components/section/section.tsx
-const Section = react.forwardRef(({ children, style, ...props }, ref) => {
+const Section = react.forwardRef(({ children, style = {}, ...props }, ref) => {
+	const tdStyle = {};
+	const tableStyle = {};
+	const styleRecord = style;
+	for (const key in styleRecord) {
+		if (!Object.hasOwn(styleRecord, key)) continue;
+		const value = styleRecord[key];
+		if (key === "padding" || key === "paddingTop" || key === "paddingRight" || key === "paddingBottom" || key === "paddingLeft") tdStyle[key] = value;
+		else tableStyle[key] = value;
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
 		align: "center",
 		width: "100%",
@@ -17921,8 +17942,11 @@ const Section = react.forwardRef(({ children, style, ...props }, ref) => {
 		role: "presentation",
 		...props,
 		ref,
-		style,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children }) }) })
+		style: tableStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+			style: tdStyle,
+			children
+		}) }) })
 	});
 });
 Section.displayName = "Section";

package/dist/index.mjs

@@ -17440,7 +17440,16 @@ const Column = React$1.forwardRef(({ children, style, ...props }, ref) => {
 Column.displayName = "Column";
 //#endregion
 //#region src/components/container/container.tsx
-const Container = React$1.forwardRef(({ children, style, ...props }, ref) => {
+const Container = React$1.forwardRef(({ children, style = {}, ...props }, ref) => {
+	const tdStyle = {};
+	const tableStyle = {};
+	const styleRecord = style;
+	for (const key in styleRecord) {
+		if (!Object.hasOwn(styleRecord, key)) continue;
+		const value = styleRecord[key];
+		if (key === "padding" || key === "paddingTop" || key === "paddingRight" || key === "paddingBottom" || key === "paddingLeft") tdStyle[key] = value;
+		else tableStyle[key] = value;
+	}
 	return /* @__PURE__ */ jsx("table", {
 		align: "center",
 		width: "100%",
@@ -17452,11 +17461,14 @@ const Container = React$1.forwardRef(({ children, style, ...props }, ref) => {
 		role: "presentation",
 		style: {
 			maxWidth: "37.5em",
-			...style
+			...tableStyle
 		},
 		children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", {
 			style: { width: "100%" },
-			children: /* @__PURE__ */ jsx("td", { children })
+			children: /* @__PURE__ */ jsx("td", {
+				style: tdStyle,
+				children
+			})
 		}) })
 	});
 });
@@ -17890,7 +17902,16 @@ const Row = React$1.forwardRef(({ children, style, ...props }, ref) => {
 Row.displayName = "Row";
 //#endregion
 //#region src/components/section/section.tsx
-const Section = React$1.forwardRef(({ children, style, ...props }, ref) => {
+const Section = React$1.forwardRef(({ children, style = {}, ...props }, ref) => {
+	const tdStyle = {};
+	const tableStyle = {};
+	const styleRecord = style;
+	for (const key in styleRecord) {
+		if (!Object.hasOwn(styleRecord, key)) continue;
+		const value = styleRecord[key];
+		if (key === "padding" || key === "paddingTop" || key === "paddingRight" || key === "paddingBottom" || key === "paddingLeft") tdStyle[key] = value;
+		else tableStyle[key] = value;
+	}
 	return /* @__PURE__ */ jsx("table", {
 		align: "center",
 		width: "100%",
@@ -17900,8 +17921,11 @@ const Section = React$1.forwardRef(({ children, style, ...props }, ref) => {
 		role: "presentation",
 		...props,
 		ref,
-		style,
-		children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { children }) }) })
+		style: tableStyle,
+		children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+			style: tdStyle,
+			children
+		}) }) })
 	});
 });
 Section.displayName = "Section";

package/package.json

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

package/src/components/container/container.tsx

@@ -3,7 +3,35 @@ import * as React from 'react';
 export type ContainerProps = Readonly<React.ComponentPropsWithoutRef<'table'>>;
 
 export const Container = React.forwardRef<HTMLTableElement, ContainerProps>(
-  ({ children, style, ...props }, ref) => {
+  ({ children, style = {}, ...props }, ref) => {
+    // Split padding styles to improve compatibility with Klaviyo and Outlook,
+    // while preserving user-provided style property order without allocating
+    // entry arrays on each render.
+    const tdStyle: React.CSSProperties = {};
+    const tableStyle: React.CSSProperties = {};
+
+    const styleRecord = style as Record<string, unknown>;
+
+    for (const key in styleRecord) {
+      if (!Object.hasOwn(styleRecord, key)) {
+        continue;
+      }
+
+      const value = styleRecord[key];
+
+      if (
+        key === 'padding' ||
+        key === 'paddingTop' ||
+        key === 'paddingRight' ||
+        key === 'paddingBottom' ||
+        key === 'paddingLeft'
+      ) {
+        (tdStyle as Record<string, unknown>)[key] = value;
+      } else {
+        (tableStyle as Record<string, unknown>)[key] = value;
+      }
+    }
+
     return (
       <table
         align="center"
@@ -14,11 +42,11 @@ export const Container = React.forwardRef<HTMLTableElement, ContainerProps>(
         cellSpacing="0"
         ref={ref}
         role="presentation"
-        style={{ maxWidth: '37.5em', ...style }}
+        style={{ maxWidth: '37.5em', ...tableStyle }}
       >
         <tbody>
           <tr style={{ width: '100%' }}>
-            <td>{children}</td>
+            <td style={tdStyle}>{children}</td>
           </tr>
         </tbody>
       </table>

package/src/components/section/section.tsx

@@ -3,7 +3,35 @@ import * as React from 'react';
 export type SectionProps = Readonly<React.ComponentPropsWithoutRef<'table'>>;
 
 export const Section = React.forwardRef<HTMLTableElement, SectionProps>(
-  ({ children, style, ...props }, ref) => {
+  ({ children, style = {}, ...props }, ref) => {
+    // Split padding styles to improve compatibility with Klaviyo and Outlook,
+    // while preserving user-provided style property order without allocating
+    // entry arrays on each render.
+    const tdStyle: React.CSSProperties = {};
+    const tableStyle: React.CSSProperties = {};
+
+    const styleRecord = style as Record<string, unknown>;
+
+    for (const key in styleRecord) {
+      if (!Object.hasOwn(styleRecord, key)) {
+        continue;
+      }
+
+      const value = styleRecord[key];
+
+      if (
+        key === 'padding' ||
+        key === 'paddingTop' ||
+        key === 'paddingRight' ||
+        key === 'paddingBottom' ||
+        key === 'paddingLeft'
+      ) {
+        (tdStyle as Record<string, unknown>)[key] = value;
+      } else {
+        (tableStyle as Record<string, unknown>)[key] = value;
+      }
+    }
+
     return (
       <table
         align="center"
@@ -14,11 +42,11 @@ export const Section = React.forwardRef<HTMLTableElement, SectionProps>(
         role="presentation"
         {...props}
         ref={ref}
-        style={style}
+        style={tableStyle}
       >
         <tbody>
           <tr>
-            <td>{children}</td>
+            <td style={tdStyle}>{children}</td>
           </tr>
         </tbody>
       </table>