react-email 6.6.0 → 6.6.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # react-email
 
+## 6.6.2
+
+### Patch Changes
+
+- 437c414: Fix Tailwind opacity modifiers (e.g. `bg-blue-600/50`) rendering an invalid percentage alpha that breaks in some email clients.
+
+## 6.6.1
+
+### Patch Changes
+
+- 21bac49: Fix `Markdown` corrupting double quotes in `markdownCustomStyles`. Inline style values containing a `"` (e.g. `fontFamily: '"Times New Roman", serif'`) were escaped to the apostrophe entity `'` instead of `"`, silently rewriting the quoted value. Double quotes are now escaped as `"`.
+- Updated dependencies [60a5b09]
+  - @react-email/render@2.0.9
+
 ## 6.6.0
 
 ### Minor Changes

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.6.0",
+	version: "6.6.2",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
@@ -6562,7 +6562,7 @@ var package_default = {
 	dependencies: {
 		"@babel/parser": "catalog:",
 		"@babel/traverse": "catalog:",
-		"@react-email/render": "workspace:>=2.0.8",
+		"@react-email/render": "workspace:>=2.0.9",
 		"chokidar": "^4.0.3",
 		"commander": "catalog:",
 		"conf": "^15.0.2",

package/dist/index.cjs

@@ -17730,7 +17730,7 @@ function camelToKebabCase(str) {
 	return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 }
 function escapeQuotes(value) {
-	if (typeof value === "string" && value.includes("\"")) return value.replace(/"/g, "'");
+	if (typeof value === "string" && value.includes("\"")) return value.replace(/"/g, """);
 	return value;
 }
 function parseCssInJsToInlineCss(cssProperties) {
@@ -38321,11 +38321,25 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 						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: ","
-							});
-							color.children.appendData(opacity);
+							if (opacity.type === "Percentage") {
+								const alpha = Number.parseFloat(opacity.value) / 100;
+								if (alpha < 1) {
+									color.children.appendData({
+										type: "Operator",
+										value: ","
+									});
+									color.children.appendData({
+										type: "Number",
+										value: alpha.toString()
+									});
+								}
+							} else {
+								color.children.appendData({
+									type: "Operator",
+									value: ","
+								});
+								color.children.appendData(opacity);
+							}
 							parentListItem.data = color;
 						}
 					}

package/dist/index.mjs

@@ -17709,7 +17709,7 @@ function camelToKebabCase(str) {
 	return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 }
 function escapeQuotes(value) {
-	if (typeof value === "string" && value.includes("\"")) return value.replace(/"/g, "'");
+	if (typeof value === "string" && value.includes("\"")) return value.replace(/"/g, """);
 	return value;
 }
 function parseCssInJsToInlineCss(cssProperties) {
@@ -38300,11 +38300,25 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 						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: ","
-							});
-							color.children.appendData(opacity);
+							if (opacity.type === "Percentage") {
+								const alpha = Number.parseFloat(opacity.value) / 100;
+								if (alpha < 1) {
+									color.children.appendData({
+										type: "Operator",
+										value: ","
+									});
+									color.children.appendData({
+										type: "Number",
+										value: alpha.toString()
+									});
+								}
+							} else {
+								color.children.appendData({
+									type: "Operator",
+									value: ","
+								});
+								color.children.appendData(opacity);
+							}
 							parentListItem.data = color;
 						}
 					}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "6.6.0",
+  "version": "6.6.2",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"
@@ -37,7 +37,7 @@
   "dependencies": {
     "@babel/parser": "7.27.0",
     "@babel/traverse": "7.27.0",
-    "@react-email/render": ">=2.0.8",
+    "@react-email/render": ">=2.0.9",
     "chokidar": "^4.0.3",
     "commander": "^13.0.0",
     "conf": "^15.0.2",
@@ -74,7 +74,7 @@
     "tsx": "4.21.0",
     "typescript": "5.9.3",
     "yalc": "1.0.0-pre.53",
-    "@react-email/render": "2.0.8"
+    "@react-email/render": "2.0.9"
   },
   "scripts": {
     "build": "tsdown",

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

@@ -116,7 +116,7 @@ console.log(\`Hello, $\{name}!\`);
       </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"><p><strong style="font:700 23px / 32px &#x27;Roobert PRO&#x27;, system-ui, sans-serif;background:url(&#x27;path/to/image&#x27;)">This is sample bold text in markdown</strong> and <em style="font-style:italic">this is italic text</em></p>
+      "<!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"><p><strong style="font:700 23px / 32px &quot;Roobert PRO&quot;, system-ui, sans-serif;background:url(&quot;path/to/image&quot;)">This is sample bold text in markdown</strong> and <em style="font-style:italic">this is italic text</em></p>
       </div><!--/$-->"
     `);
   });

package/src/components/markdown/utils/parse-css-in-js-to-inline-css.spec.ts

@@ -0,0 +1,42 @@
+import { parseCssInJsToInlineCss } from './parse-css-in-js-to-inline-css.js';
+
+describe('parseCssInJsToInlineCss', () => {
+  it('returns an empty string for undefined styles', () => {
+    expect(parseCssInJsToInlineCss(undefined)).toBe('');
+  });
+
+  it('converts camelCase properties to kebab-case', () => {
+    expect(parseCssInJsToInlineCss({ fontFamily: 'serif' })).toBe(
+      'font-family:serif',
+    );
+  });
+
+  it('appends px to numeric values of numerical properties', () => {
+    expect(parseCssInJsToInlineCss({ fontSize: 16 })).toBe('font-size:16px');
+  });
+
+  it('joins multiple declarations with a semicolon', () => {
+    expect(parseCssInJsToInlineCss({ color: 'red', fontSize: 16 })).toBe(
+      'color:red;font-size:16px',
+    );
+  });
+
+  it('escapes double quotes so they do not break the style attribute', () => {
+    const result = parseCssInJsToInlineCss({
+      fontFamily: '"Times New Roman", serif',
+    });
+
+    expect(result).toBe('font-family:"Times New Roman", serif');
+    expect(result).not.toContain('"');
+  });
+
+  it('does not corrupt double-quoted values into apostrophes', () => {
+    const result = parseCssInJsToInlineCss({
+      fontFamily: '"Times New Roman", serif',
+    });
+
+    // `'` is the apostrophe entity and would silently change the
+    // quoted font name; a double quote must be escaped as `"`.
+    expect(result).not.toContain(''');
+  });
+});

package/src/components/markdown/utils/parse-css-in-js-to-inline-css.ts

@@ -4,7 +4,7 @@ function camelToKebabCase(str: string): string {
 
 function escapeQuotes(value: unknown) {
   if (typeof value === 'string' && value.includes('"')) {
-    return value.replace(/"/g, ''');
+    return value.replace(/"/g, '"');
   }
   return value;
 }

package/src/components/tailwind/utils/css/sanitize-declarations.spec.ts

@@ -348,7 +348,39 @@ describe('sanitizeDeclarations', () => {
     sanitizeDeclarations(stylesheet);
     const result = generate(stylesheet);
     expect(result).toMatchInlineSnapshot(
-      `".bg-blue-600/50{background-color:rgb(21,93,252,60%)}"`,
+      `".bg-blue-600/50{background-color:rgb(21,93,252,0.6)}"`,
+    );
+  });
+
+  it('converts the color-mix opacity percentage into a decimal alpha', () => {
+    let stylesheet = parse(`
+      .bg-blue-600\\/50 {
+        background-color: color-mix(in oklab, oklch(54.6% 0.245 262.881) 50%, transparent);
+      }
+    `);
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'half opacity').toMatchInlineSnapshot(
+      `".bg-blue-600\\/50{background-color:rgb(21,93,252,0.5)}"`,
+    );
+
+    stylesheet = parse(`
+      .bg-blue-600\\/12\\.5 {
+        background-color: color-mix(in oklab, oklch(54.6% 0.245 262.881) 12.5%, transparent);
+      }
+    `);
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'fractional opacity').toMatchInlineSnapshot(
+      `".bg-blue-600\\/12\\.5{background-color:rgb(21,93,252,0.125)}"`,
+    );
+
+    stylesheet = parse(`
+      .bg-blue-600\\/100 {
+        background-color: color-mix(in oklab, oklch(54.6% 0.245 262.881) 100%, transparent);
+      }
+    `);
+    sanitizeDeclarations(stylesheet);
+    expect(generate(stylesheet), 'full opacity').toMatchInlineSnapshot(
+      `".bg-blue-600\\/100{background-color:rgb(21,93,252)}"`,
     );
   });
 

package/src/components/tailwind/utils/css/sanitize-declarations.ts

@@ -384,11 +384,25 @@ export function sanitizeDeclarations(nodeContainingDeclarations: CssNode) {
               color?.name === 'rgb' &&
               opacity
             ) {
-              color.children.appendData({
-                type: 'Operator',
-                value: ',',
-              });
-              color.children.appendData(opacity);
+              if (opacity.type === 'Percentage') {
+                const alpha = Number.parseFloat(opacity.value) / 100;
+                if (alpha < 1) {
+                  color.children.appendData({
+                    type: 'Operator',
+                    value: ',',
+                  });
+                  color.children.appendData({
+                    type: 'Number',
+                    value: alpha.toString(),
+                  });
+                }
+              } else {
+                color.children.appendData({
+                  type: 'Operator',
+                  value: ',',
+                });
+                color.children.appendData(opacity);
+              }
               parentListItem.data = color;
             }
           }