react-email 6.6.7 → 6.6.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # react-email
 
+## 6.6.9
+
+### Patch Changes
+
+- bc2f7e3: Fix `group` utilities including bad rules that don't work
+
+## 6.6.8
+
+### Patch Changes
+
+- dca3c01: Fix `email build` computing the wrong output file tracing root in nested-workspace monorepos (e.g. a package one or more directories below the true repo root), which caused Vercel deploys to fail with an ENOENT error on the routes manifest.
+
 ## 6.6.7
 
 ### Patch Changes

package/dist/cli/index.mjs

@@ -7,6 +7,8 @@ import fs, { existsSync, promises, statSync } from "node:fs";
 import * as path$2 from "node:path";
 import path from "node:path";
 import url, { fileURLToPath } from "node:url";
+import logSymbols from "log-symbols";
+import { addDevDependency, installDependencies, runScript } from "nypm";
 import * as fsp$1 from "node:fs/promises";
 import fsp from "node:fs/promises";
 import { F_OK } from "node:constants";
@@ -15,8 +17,6 @@ import nativeFs from "fs";
 import path$1, { basename, dirname, normalize, posix, relative, resolve, sep } from "path";
 import { fileURLToPath as fileURLToPath$1 } from "url";
 import { createRequire as createRequire$1 } from "module";
-import logSymbols from "log-symbols";
-import { addDevDependency, installDependencies, runScript } from "nypm";
 import { createJiti } from "jiti";
 import prompts from "prompts";
 import { Spinner } from "picospinner";
@@ -59,6 +59,64 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 var __require$1 = /* @__PURE__ */ createRequire(import.meta.url);
 //#endregion
+//#region src/cli/utils/get-emails-directory-metadata.ts
+const isFileAnEmail = async (fullPath) => {
+	let fileHandle;
+	try {
+		fileHandle = await fs.promises.open(fullPath, "r");
+	} catch (exception) {
+		console.warn(exception);
+		return false;
+	}
+	if ((await fileHandle.stat()).isDirectory()) {
+		await fileHandle.close();
+		return false;
+	}
+	const { ext } = path.parse(fullPath);
+	if (![
+		".js",
+		".tsx",
+		".jsx"
+	].includes(ext)) {
+		await fileHandle.close();
+		return false;
+	}
+	const fileContents = await fileHandle.readFile("utf8");
+	await fileHandle.close();
+	const hasES6DefaultExport = /\bexport\s+default\b/gm.test(fileContents);
+	const hasCommonJSExport = /\bmodule\.exports\s*=/gm.test(fileContents);
+	const hasNamedExport = /\bexport\s+\{[^}]*\bdefault\b[^}]*\}/gm.test(fileContents);
+	return hasES6DefaultExport || hasCommonJSExport || hasNamedExport;
+};
+const mergeDirectoriesWithSubDirectories = (emailsDirectoryMetadata) => {
+	let currentResultingMergedDirectory = emailsDirectoryMetadata;
+	while (currentResultingMergedDirectory.emailFilenames.length === 0 && currentResultingMergedDirectory.subDirectories.length === 1) {
+		const onlySubDirectory = currentResultingMergedDirectory.subDirectories[0];
+		currentResultingMergedDirectory = {
+			...onlySubDirectory,
+			directoryName: path.join(currentResultingMergedDirectory.directoryName, onlySubDirectory.directoryName)
+		};
+	}
+	return currentResultingMergedDirectory;
+};
+const getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFileExtensions = false, isSubDirectory = false, baseDirectoryPath = absolutePathToEmailsDirectory) => {
+	if (!fs.existsSync(absolutePathToEmailsDirectory)) return;
+	const dirents = await fs.promises.readdir(absolutePathToEmailsDirectory, { withFileTypes: true });
+	const isEmailPredicates = await Promise.all(dirents.map((dirent) => isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name))));
+	const emailFilenames = dirents.filter((_, i) => isEmailPredicates[i]).map((dirent) => keepFileExtensions ? dirent.name : dirent.name.replace(path.extname(dirent.name), ""));
+	const subDirectories = await Promise.all(dirents.filter((dirent) => dirent.isDirectory() && !dirent.name.startsWith("_") && dirent.name !== "static").map((dirent) => {
+		return getEmailsDirectoryMetadata(path.join(absolutePathToEmailsDirectory, dirent.name), keepFileExtensions, true, baseDirectoryPath);
+	}));
+	const emailsMetadata = {
+		absolutePath: absolutePathToEmailsDirectory,
+		relativePath: path.relative(baseDirectoryPath, absolutePathToEmailsDirectory),
+		directoryName: absolutePathToEmailsDirectory.split(path.sep).pop(),
+		emailFilenames,
+		subDirectories
+	};
+	return isSubDirectory ? mergeDirectoriesWithSubDirectories(emailsMetadata) : emailsMetadata;
+};
+//#endregion
 //#region ../../node_modules/.pnpm/fdir@6.5.0_picomatch@4.0.4/node_modules/fdir/dist/index.mjs
 var __require = /* @__PURE__ */ createRequire$1(import.meta.url);
 function cleanPath(path) {
@@ -6462,68 +6520,20 @@ function validatePackages(packages) {
 	}
 }
 //#endregion
-//#region src/cli/utils/get-emails-directory-metadata.ts
-const isFileAnEmail = async (fullPath) => {
-	let fileHandle;
+//#region src/cli/utils/get-tracing-root-dir.ts
+const getTracingRootDir = async (usersProjectLocation) => {
 	try {
-		fileHandle = await fs.promises.open(fullPath, "r");
-	} catch (exception) {
-		console.warn(exception);
-		return false;
-	}
-	if ((await fileHandle.stat()).isDirectory()) {
-		await fileHandle.close();
-		return false;
-	}
-	const { ext } = path.parse(fullPath);
-	if (![
-		".js",
-		".tsx",
-		".jsx"
-	].includes(ext)) {
-		await fileHandle.close();
-		return false;
-	}
-	const fileContents = await fileHandle.readFile("utf8");
-	await fileHandle.close();
-	const hasES6DefaultExport = /\bexport\s+default\b/gm.test(fileContents);
-	const hasCommonJSExport = /\bmodule\.exports\s*=/gm.test(fileContents);
-	const hasNamedExport = /\bexport\s+\{[^}]*\bdefault\b[^}]*\}/gm.test(fileContents);
-	return hasES6DefaultExport || hasCommonJSExport || hasNamedExport;
-};
-const mergeDirectoriesWithSubDirectories = (emailsDirectoryMetadata) => {
-	let currentResultingMergedDirectory = emailsDirectoryMetadata;
-	while (currentResultingMergedDirectory.emailFilenames.length === 0 && currentResultingMergedDirectory.subDirectories.length === 1) {
-		const onlySubDirectory = currentResultingMergedDirectory.subDirectories[0];
-		currentResultingMergedDirectory = {
-			...onlySubDirectory,
-			directoryName: path.join(currentResultingMergedDirectory.directoryName, onlySubDirectory.directoryName)
-		};
+		const { rootDir } = await getPackages(usersProjectLocation);
+		return rootDir.replaceAll("\\", "/");
+	} catch {
+		return usersProjectLocation.replaceAll("\\", "/");
 	}
-	return currentResultingMergedDirectory;
-};
-const getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFileExtensions = false, isSubDirectory = false, baseDirectoryPath = absolutePathToEmailsDirectory) => {
-	if (!fs.existsSync(absolutePathToEmailsDirectory)) return;
-	const dirents = await fs.promises.readdir(absolutePathToEmailsDirectory, { withFileTypes: true });
-	const isEmailPredicates = await Promise.all(dirents.map((dirent) => isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name))));
-	const emailFilenames = dirents.filter((_, i) => isEmailPredicates[i]).map((dirent) => keepFileExtensions ? dirent.name : dirent.name.replace(path.extname(dirent.name), ""));
-	const subDirectories = await Promise.all(dirents.filter((dirent) => dirent.isDirectory() && !dirent.name.startsWith("_") && dirent.name !== "static").map((dirent) => {
-		return getEmailsDirectoryMetadata(path.join(absolutePathToEmailsDirectory, dirent.name), keepFileExtensions, true, baseDirectoryPath);
-	}));
-	const emailsMetadata = {
-		absolutePath: absolutePathToEmailsDirectory,
-		relativePath: path.relative(baseDirectoryPath, absolutePathToEmailsDirectory),
-		directoryName: absolutePathToEmailsDirectory.split(path.sep).pop(),
-		emailFilenames,
-		subDirectories
-	};
-	return isSubDirectory ? mergeDirectoriesWithSubDirectories(emailsMetadata) : emailsMetadata;
 };
 //#endregion
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.6.7",
+	version: "6.6.9",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
@@ -6729,14 +6739,13 @@ const stopSpinnerAndPersist = (spinner, display) => {
 //#region src/cli/commands/build.ts
 const isInReactEmailMonorepo = !path.dirname(fileURLToPath(import.meta.url)).includes("node_modules");
 const setNextEnvironmentVariablesForBuild = async (emailsDirRelativePath, builtPreviewAppPath, usersProjectLocation) => {
-	let rootDir = "userProjectLocation";
-	if (isInReactEmailMonorepo) rootDir = `'${await getPackages(usersProjectLocation).then((p) => p.rootDir.replaceAll("\\", "/"))}'`;
+	const rootDir = await getTracingRootDir(usersProjectLocation);
 	const nextConfigContents = `
 import path from 'path';
 const emailsDirRelativePath = path.normalize('${emailsDirRelativePath}');
 const userProjectLocation = '${process.cwd().replaceAll("\\", "/")}';
 const previewServerLocation = '${builtPreviewAppPath.replaceAll("\\", "/")}';
-const rootDir = ${rootDir};
+const rootDir = '${rootDir}';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   env: {

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

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