react-email 6.6.1 → 6.6.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

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

package/dist/index.cjs

@@ -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

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

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;
             }
           }