react-email 6.11.0 → 6.11.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-email
 
+## 6.11.1
+
+### Patch Changes
+
+- 54769fc: Prevent `email export` from deleting the project, the home directory, the email templates or the static assets when `--outDir` points at them.
+- 6926bac: `<Markdown>` now applies `markdownCustomStyles.th` to table header cells. Header cells were previously styled with `td`, so any `th` styles were ignored.
+
 ## 6.11.0
 
 ### Minor 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.11.0",
+	version: "6.11.1",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
@@ -7580,6 +7580,19 @@ const getEmailTemplatesFromDirectory = (emailDirectory) => {
 	for (const directory of emailDirectory.subDirectories) templatePaths.push(...getEmailTemplatesFromDirectory(directory));
 	return templatePaths;
 };
+const isInside = (parent, child) => child.startsWith(`${parent}${path.sep}`);
+const getUnsafeOutDirMessage = (outDir, emailsDirectoryPath, { cwd, homeDirectory }) => {
+	const resolvedOutDir = path.resolve(cwd, outDir);
+	const resolvedEmailsDirectory = path.resolve(cwd, emailsDirectoryPath);
+	const staticDirectory = path.join(resolvedEmailsDirectory, "static");
+	if (resolvedOutDir === path.parse(resolvedOutDir).root) return "--outDir can't be the filesystem root.";
+	if (resolvedOutDir === homeDirectory) return "--outDir can't be your home directory.";
+	if (isInside(resolvedOutDir, homeDirectory)) return "--outDir can't contain your home directory.";
+	if (resolvedOutDir === cwd) return "--outDir can't be the project directory.";
+	if (isInside(resolvedOutDir, cwd)) return "--outDir can't contain the project directory.";
+	if (resolvedOutDir === resolvedEmailsDirectory || isInside(resolvedOutDir, resolvedEmailsDirectory)) return "--outDir can't contain your email templates.";
+	if (resolvedOutDir === staticDirectory || isInside(staticDirectory, resolvedOutDir)) return "--outDir can't be your static assets directory.";
+};
 const BUILD_BATCH_SIZE = 10;
 const RENDER_BATCH_SIZE = 25;
 const renderWorkerSource = `
@@ -7627,7 +7640,23 @@ const exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirec
 		else console.error(`Could not find the directory at ${emailsDirectoryPath}`);
 		process.exit(1);
 	}
-	if (fs.existsSync(pathToWhereEmailMarkupShouldBeDumped)) fs.rmSync(pathToWhereEmailMarkupShouldBeDumped, { recursive: true });
+	const resolvedPathToWhereEmailMarkupShouldBeDumped = path.resolve(process.cwd(), pathToWhereEmailMarkupShouldBeDumped);
+	if (fs.existsSync(resolvedPathToWhereEmailMarkupShouldBeDumped)) {
+		const unsafeOutDirMessage = getUnsafeOutDirMessage(resolvedPathToWhereEmailMarkupShouldBeDumped, emailsDirectoryPath, {
+			cwd: process.cwd(),
+			homeDirectory: os.homedir()
+		});
+		if (unsafeOutDirMessage) {
+			const message = `${unsafeOutDirMessage} Choose a different --outDir, such as "out".`;
+			if (spinner) stopSpinnerAndPersist(spinner, {
+				symbol: logSymbols.error,
+				text: message
+			});
+			else console.error(message);
+			process.exit(1);
+		}
+		fs.rmSync(resolvedPathToWhereEmailMarkupShouldBeDumped, { recursive: true });
+	}
 	const allTemplates = getEmailTemplatesFromDirectory(emailsDirectoryMetadata);
 	try {
 		const userPlugins = options.esbuildPlugins ? await loadEsbuildPlugins(path.resolve(process.cwd(), options.esbuildPlugins)) : [];

package/dist/components/markdown/markdown.cjs

@@ -80,7 +80,8 @@ const Markdown = react.forwardRef(({ children, markdownContainerStyles, markdown
 	renderer.tablecell = ({ tokens, align, header }) => {
 		const text = renderer.parser.parseInline(tokens);
 		const type = header ? "th" : "td";
-		return `${align ? `<${type} align="${align}"${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>` : `<${type}${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>`}${text}</${type}>\n`;
+		const style = require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles[type]);
+		return `${`<${type}${align ? ` align="${align}"` : ""}${style !== "" ? ` style="${style}"` : ""}>`}${text}</${type}>\n`;
 	};
 	renderer.tablerow = ({ text }) => {
 		return `<tr${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.tr) !== "" ? ` style="${require_parse_css_in_js_to_inline_css.parseCssInJsToInlineCss(finalStyles.tr)}"` : ""}>\n${text}</tr>\n`;

package/dist/components/markdown/markdown.mjs

@@ -78,7 +78,8 @@ const Markdown = React$1.forwardRef(({ children, markdownContainerStyles, markdo
 	renderer.tablecell = ({ tokens, align, header }) => {
 		const text = renderer.parser.parseInline(tokens);
 		const type = header ? "th" : "td";
-		return `${align ? `<${type} align="${align}"${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>` : `<${type}${parseCssInJsToInlineCss(finalStyles.td) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"` : ""}>`}${text}</${type}>\n`;
+		const style = parseCssInJsToInlineCss(finalStyles[type]);
+		return `${`<${type}${align ? ` align="${align}"` : ""}${style !== "" ? ` style="${style}"` : ""}>`}${text}</${type}>\n`;
 	};
 	renderer.tablerow = ({ text }) => {
 		return `<tr${parseCssInJsToInlineCss(finalStyles.tr) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.tr)}"` : ""}>\n${text}</tr>\n`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "6.11.0",
+  "version": "6.11.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"

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

@@ -218,4 +218,33 @@ console.log(\`Hello, $\{name}!\`);
       </div><!--/$-->"
     `);
   });
+  it('applies th styles to table header cells and td styles to body cells', async () => {
+    const actualOutput = await render(
+      <Markdown
+        markdownCustomStyles={{
+          th: { fontWeight: 'bold' },
+          td: { color: 'gray' },
+        }}
+      >
+        {`| Name | Qty |
+| ---- | --: |
+| Apples | 3 |`}
+      </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"><table role="presentation">
+      <thead>
+      <tr>
+      <th style="font-weight:bold">Name</th>
+      <th align="right" style="font-weight:bold">Qty</th>
+      </tr>
+      </thead>
+      <tbody><tr>
+      <td style="color:gray">Apples</td>
+      <td align="right" style="color:gray">3</td>
+      </tr>
+      </tbody></table>
+      </div><!--/$-->"
+    `);
+  });
 });

package/src/components/markdown/markdown.tsx

@@ -197,17 +197,10 @@ export const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(
     renderer.tablecell = ({ tokens, align, header }) => {
       const text = renderer.parser.parseInline(tokens);
       const type = header ? 'th' : 'td';
-      const tag = align
-        ? `<${type} align="${align}"${
-            parseCssInJsToInlineCss(finalStyles.td) !== ''
-              ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"`
-              : ''
-          }>`
-        : `<${type}${
-            parseCssInJsToInlineCss(finalStyles.td) !== ''
-              ? ` style="${parseCssInJsToInlineCss(finalStyles.td)}"`
-              : ''
-          }>`;
+      const style = parseCssInJsToInlineCss(finalStyles[type]);
+      const tag = `<${type}${align ? ` align="${align}"` : ''}${
+        style !== '' ? ` style="${style}"` : ''
+      }>`;
       return `${tag}${text}</${type}>\n`;
     };