react-email 6.6.8 → 6.7.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # react-email
 
+## 6.7.0
+
+### Minor Changes
+
+- b448c3b: Enable custom export extensions via --extension/-e (e.g. .blade.php).
+
+### Patch Changes
+
+- Updated dependencies [ba96cfa]
+- Updated dependencies [58d8c08]
+  - @react-email/render@2.1.0
+
+## 6.6.9
+
+### Patch Changes
+
+- bc2f7e3: Fix `group` utilities including bad rules that don't work
+
 ## 6.6.8
 
 ### Patch Changes

package/dist/cli/index.mjs

@@ -6533,7 +6533,7 @@ const getTracingRootDir = async (usersProjectLocation) => {
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.6.8",
+	version: "6.7.0",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
@@ -6572,7 +6572,7 @@ var package_default = {
 	dependencies: {
 		"@babel/parser": "catalog:",
 		"@babel/traverse": "catalog:",
-		"@react-email/render": "workspace:>=2.0.10",
+		"@react-email/render": "workspace:>=2.1.0",
 		"chokidar": "^4.0.3",
 		"commander": "catalog:",
 		"conf": "^15.0.2",
@@ -7541,7 +7541,7 @@ const renderWorkerSource = `
 const { unlinkSync, writeFileSync } = require('node:fs');
 const { parentPort, workerData } = require('node:worker_threads');
 
-const { templates, options } = workerData;
+const { templates, options, extension } = workerData;
 
 (async () => {
   for (const template of templates) {
@@ -7551,10 +7551,7 @@ const { templates, options } = workerData;
         emailModule.reactEmailCreateReactElement(emailModule.default, {}),
         options,
       );
-      const htmlPath = template.replace(
-        '.cjs',
-        options.plainText ? '.txt' : '.html',
-      );
+      const htmlPath = template.replace('.cjs', extension);
       writeFileSync(htmlPath, rendered);
       unlinkSync(template);
       parentPort.postMessage({ type: 'progress', template });
@@ -7616,6 +7613,7 @@ const exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirec
 	}
 	if (spinner) spinner.succeed();
 	const allBuiltTemplates = glob.sync(normalize$1(`${pathToWhereEmailMarkupShouldBeDumped}/**/*.cjs`), { absolute: true });
+	const extension = options.extension && options.extension.length > 0 ? options.extension.startsWith(".") ? options.extension : `.${options.extension}` : options.plainText ? ".txt" : ".html";
 	if (spinner && allBuiltTemplates.length > 0) {
 		spinner.setText(`rendering ${allBuiltTemplates[0]?.split("/").pop()}`);
 		spinner.start();
@@ -7630,7 +7628,8 @@ const exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirec
 					eval: true,
 					workerData: {
 						templates: batch,
-						options
+						options,
+						extension
 					}
 				});
 				worker.on("message", (msg) => {
@@ -7786,10 +7785,11 @@ else {
 	program.command("dev").description("Starts the preview email development app").option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-p --port <port>", "Port to run dev server on", "3000").option("-c, --clients <clients>", "Comma-separated list of email clients to show compatibility warnings for (overrides COMPATIBILITY_EMAIL_CLIENTS)", parseClientsOption).action(dev);
 	program.command("build").description("Copies the preview app for onto .react-email and builds it").option("-d, --dir <path>", "Directory with your email templates", "./emails").addOption(new Option("-p, --packageManager <name>").hideHelp()).action(build$1);
 	program.command("start").description("Runs the built preview app that is inside of \".react-email\"").action(start);
-	program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-s, --silent", "To, or not to show a spinner with process information", false).action(({ outDir, pretty, plainText, silent, dir: srcDir }) => exportTemplates(outDir, srcDir, {
+	program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-e, --extension <extension>", "Set a custom file extension for rendered emails (e.g. blade.php)").option("-s, --silent", "To, or not to show a spinner with process information", false).action(({ outDir, pretty, plainText, silent, dir: srcDir, extension }) => exportTemplates(outDir, srcDir, {
 		silent,
 		plainText,
-		pretty
+		pretty,
+		extension
 	}));
 	const resend = program.command("resend");
 	resend.command("setup").description("Sets up the integration between the React Email CLI, and your Resend account through an API Key").action(resendSetup);

package/dist/index.cjs

@@ -37710,8 +37710,10 @@ function extractRulesPerClass(root, classes) {
 	walk(root, {
 		visit: "Rule",
 		enter(rule) {
+			const firstSelector = rule.prelude.type === "SelectorList" ? rule.prelude.children.first : null;
+			if (firstSelector?.type === "Selector" && firstSelector.children.first?.type === "NestingSelector") return;
 			const selectorClasses = [];
-			walk(rule, {
+			walk(rule.prelude, {
 				visit: "ClassSelector",
 				enter(classSelector) {
 					selectorClasses.push(decode$1(classSelector.name));

package/dist/index.mjs

@@ -37689,8 +37689,10 @@ function extractRulesPerClass(root, classes) {
 	walk(root, {
 		visit: "Rule",
 		enter(rule) {
+			const firstSelector = rule.prelude.type === "SelectorList" ? rule.prelude.children.first : null;
+			if (firstSelector?.type === "Selector" && firstSelector.children.first?.type === "NestingSelector") return;
 			const selectorClasses = [];
-			walk(rule, {
+			walk(rule.prelude, {
 				visit: "ClassSelector",
 				enter(classSelector) {
 					selectorClasses.push(decode$1(classSelector.name));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "6.6.8",
+  "version": "6.7.0",
   "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.10",
+    "@react-email/render": ">=2.1.0",
     "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.10"
+    "@react-email/render": "2.1.0"
   },
   "scripts": {
     "build": "tsdown",

package/src/components/tailwind/tailwind.spec.tsx

@@ -440,6 +440,40 @@ describe('Tailwind component', () => {
     );
   });
 
+  // See https://github.com/resend/react-email/pull/3594
+  it('does not leak a bare nested group/peer rule into the <head> <style>', async () => {
+    const html = await render(
+      <Html>
+        <Tailwind>
+          <Head />
+          <div className="group">
+            <a className="group-hover:underline" href="https://react.email">
+              link
+            </a>
+          </div>
+        </Tailwind>
+      </Html>,
+    ).then(pretty);
+
+    expect(html).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+      <html dir="ltr" lang="en">
+        <head>
+          <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
+          <meta name="x-apple-disable-message-reformatting" />
+          <style>
+            .group-hover_underline{@media (hover:hover){&:is(:where(.group):hover *){text-decoration-line:underline!important}}}
+          </style></head
+        ><!--$--><!--html--><!--head-->
+        <div class="group">
+          <a class="group-hover_underline" href="https://react.email">link</a>
+        </div>
+        <!--/$-->
+      </html>
+      "
+    `);
+  });
+
   it('recognizes custom responsive screen', async () => {
     const actualOutput = await render(
       <Html>

package/src/components/tailwind/utils/css/extract-rules-per-class.spec.ts

@@ -206,4 +206,27 @@ describe('extractRulesPerClass()', async () => {
       }
     `);
   });
+
+  it('does not emit a bare nested rule for group/peer marker classes', async () => {
+    const tailwind = await setupTailwind({});
+    const classes = ['group', 'group-hover:underline'];
+    tailwind.addUtilities(classes);
+
+    const stylesheet = tailwind.getStyleSheet();
+    const { inlinable, nonInlinable } = extractRulesPerClass(
+      stylesheet,
+      classes,
+    );
+
+    // Only the real utility is keyed; the `group` marker must not produce a
+    // duplicate, parentless `&:is(...)` rule.
+    expect(Object.keys(convertToComparable(inlinable))).toEqual([]);
+    expect(convertToComparable(nonInlinable)).toMatchInlineSnapshot(`
+      {
+        "group-hover:underline": [
+          ".group-hover\\:underline{&:is(:where(.group):hover *){@media (hover:hover){text-decoration-line:underline}}}",
+        ],
+      }
+    `);
+  });
 });

package/src/components/tailwind/utils/css/extract-rules-per-class.ts

@@ -26,8 +26,24 @@ export function extractRulesPerClass(root: CssNode, classes: string[]) {
   walk(root, {
     visit: 'Rule',
     enter(rule) {
+      // A nested rule (e.g. group/peer's `&:is(:where(.group):hover *)`) belongs
+      // to its parent utility; processing it standalone emits a bare, parentless
+      // `&` rule into the <style> block, so skip it here.
+      const firstSelector =
+        rule.prelude.type === 'SelectorList'
+          ? rule.prelude.children.first
+          : null;
+      if (
+        firstSelector?.type === 'Selector' &&
+        firstSelector.children.first?.type === 'NestingSelector'
+      ) {
+        return;
+      }
+
+      // Only the prelude names the class that owns the rule; classes referenced
+      // inside the block (e.g. `.group` in `:where(.group)`) must not key it.
       const selectorClasses: string[] = [];
-      walk(rule, {
+      walk(rule.prelude, {
         visit: 'ClassSelector',
         enter(classSelector) {
           selectorClasses.push(string.decode(classSelector.name));