react-email 6.6.3 → 6.6.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react-email
 
+## 6.6.4
+
+### Patch Changes
+
+- f8279be: Fix Tailwind pill utilities like `rounded-t-full` and `rounded-e-full` leaving an unrenderable `calc(infinity * 1px)` in the inlined email CSS (previously only `rounded-full` was converted to `9999px`).
+
 ## 6.6.3
 
 ## 6.6.2

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

package/dist/index.cjs

@@ -38189,7 +38189,7 @@ function sanitizeDeclarations(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" });
+			if (/border-(?:[a-z]+-){0,2}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",
 				enter(func, funcParentListItem) {

package/dist/index.mjs

@@ -38168,7 +38168,7 @@ function sanitizeDeclarations(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" });
+			if (/border-(?:[a-z]+-){0,2}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",
 				enter(func, funcParentListItem) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "6.6.3",
+  "version": "6.6.4",
   "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

@@ -32,6 +32,27 @@ describe('sanitizeDeclarations', () => {
     expect(generate(root)).toBe('.rounded-full{border-radius:9999px}');
   });
 
+  it('converts calc(infinity * 1px) for corner and logical border-radius longhands', () => {
+    let root = parse(`.rounded-tl-full {
+  border-top-left-radius: calc(infinity * 1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe(
+      '.rounded-tl-full{border-top-left-radius:9999px}',
+    );
+
+    root = parse(`.rounded-e-full {
+  border-start-end-radius: calc(infinity * 1px);
+  border-end-end-radius: calc(infinity * 1px);
+}
+`);
+    sanitizeDeclarations(root);
+    expect(generate(root)).toBe(
+      '.rounded-e-full{border-start-end-radius:9999px;border-end-end-radius:9999px}',
+    );
+  });
+
   it('separates padding-block and padding-inline', () => {
     let root = parse(`.box {
   padding-inline: 4px 14;

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

@@ -183,7 +183,7 @@ export function sanitizeDeclarations(nodeContainingDeclarations: CssNode) {
         }) as Value | Raw;
       }
       if (
-        /border-radius\s*:\s*calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(
+        /border-(?:[a-z]+-){0,2}radius\s*:\s*calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(
           generate(declaration),
         )
       ) {