react-email 6.7.0 → 6.8.1

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-email",
-  "version": "6.7.0",
+  "version": "6.8.1",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"
   },
   "type": "module",
+  "sideEffects": false,
   "types": "./dist/index.d.mts",
   "license": "MIT",
   "exports": {
@@ -35,8 +36,8 @@
     "react-dom": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "dependencies": {
-    "@babel/parser": "7.27.0",
-    "@babel/traverse": "7.27.0",
+    "@babel/parser": "7.29.2",
+    "@babel/traverse": "7.29.0",
     "@react-email/render": ">=2.1.0",
     "chokidar": "^4.0.3",
     "commander": "^13.0.0",
@@ -45,7 +46,7 @@
     "debounce": "^2.0.0",
     "esbuild": "^0.28.0",
     "glob": "^13.0.6",
-    "jiti": "2.4.2",
+    "jiti": "2.6.1",
     "log-symbols": "^7.0.0",
     "marked": "^15.0.12",
     "mime-types": "^3.0.0",

package/src/components/body/body.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 import { marginProperties, paddingProperties } from './margin-properties.js';
 
 export type BodyProps = Readonly<React.HtmlHTMLAttributes<HTMLBodyElement>>;
@@ -58,3 +59,4 @@ export const Body = React.forwardRef<HTMLBodyElement, BodyProps>(
 );
 
 Body.displayName = 'Body';
+markAsElement(Body);

package/src/components/button/button.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 import { parsePadding } from './utils/parse-padding.js';
 import { pxToPt } from './utils/px-to-pt.js';
 
@@ -110,3 +111,4 @@ export const Button = React.forwardRef<HTMLAnchorElement, ButtonProps>(
 );
 
 Button.displayName = 'Button';
+markAsElement(Button);

package/src/components/code-block/code-block.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 import type { PrismLanguage } from './languages-available.js';
 import { Prism } from './prism.js';
 import type { Theme } from './themes.js';
@@ -132,3 +133,4 @@ export const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(
 );
 
 CodeBlock.displayName = 'CodeBlock';
+markAsElement(CodeBlock);

package/src/components/code-inline/code-inline.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 
 type RootProps = React.ComponentPropsWithoutRef<'code'> &
   React.ComponentPropsWithoutRef<'span'>;
@@ -56,3 +57,4 @@ export const CodeInline = React.forwardRef<HTMLSpanElement, CodeInlineProps>(
 );
 
 CodeInline.displayName = 'CodeInline';
+markAsElement(CodeInline);

package/src/components/column/column.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 
 export type ColumnProps = Readonly<React.ComponentPropsWithoutRef<'td'>>;
 
@@ -13,3 +14,4 @@ export const Column = React.forwardRef<HTMLTableCellElement, ColumnProps>(
 );
 
 Column.displayName = 'Column';
+markAsElement(Column);

package/src/components/container/container.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 
 export type ContainerProps = Readonly<React.ComponentPropsWithoutRef<'table'>>;
 
@@ -55,3 +56,4 @@ export const Container = React.forwardRef<HTMLTableElement, ContainerProps>(
 );
 
 Container.displayName = 'Container';
+markAsElement(Container);

package/src/components/element-marker.ts

@@ -0,0 +1,5 @@
+export const elementMarker = Symbol.for('react-email.element');
+
+export const markAsElement = (component: unknown) => {
+  (component as Record<symbol, boolean>)[elementMarker] = true;
+};

package/src/components/heading/heading.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 import type { As } from './utils/as.js';
 import type { Margin } from './utils/spaces.js';
 import { withMargin } from './utils/spaces.js';
@@ -27,3 +28,4 @@ export const Heading = React.forwardRef<
 );
 
 Heading.displayName = 'Heading';
+markAsElement(Heading);

package/src/components/hr/hr.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 
 export type HrProps = Readonly<React.ComponentPropsWithoutRef<'hr'>>;
 
@@ -19,3 +20,4 @@ export const Hr = React.forwardRef<HTMLHRElement, HrProps>(
 );
 
 Hr.displayName = 'Hr';
+markAsElement(Hr);

package/src/components/img/img.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 
 export type ImgProps = Readonly<React.ComponentPropsWithoutRef<'img'>>;
 
@@ -23,3 +24,4 @@ export const Img = React.forwardRef<HTMLImageElement, ImgProps>(
 );
 
 Img.displayName = 'Img';
+markAsElement(Img);

package/src/components/link/link.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 
 export type LinkProps = Readonly<React.ComponentPropsWithoutRef<'a'>>;
 
@@ -20,3 +21,4 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
 );
 
 Link.displayName = 'Link';
+markAsElement(Link);

package/src/components/preview/preview.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 
 export type PreviewProps = Readonly<
   React.ComponentPropsWithoutRef<'div'> & {
@@ -43,6 +44,7 @@ export const Preview = React.forwardRef<HTMLDivElement, PreviewProps>(
 );
 
 Preview.displayName = 'Preview';
+markAsElement(Preview);
 
 const whiteSpaceCodes = '\xa0\u200C\u200B\u200D\u200E\u200F\uFEFF';
 export const renderWhiteSpace = (text: string) => {

package/src/components/row/row.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 
 export type RowProps = Readonly<
   React.ComponentPropsWithoutRef<'table'> & {
@@ -29,3 +30,4 @@ export const Row = React.forwardRef<HTMLTableElement, RowProps>(
 );
 
 Row.displayName = 'Row';
+markAsElement(Row);

package/src/components/section/section.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 
 export type SectionProps = Readonly<React.ComponentPropsWithoutRef<'table'>>;
 
@@ -55,3 +56,4 @@ export const Section = React.forwardRef<HTMLTableElement, SectionProps>(
 );
 
 Section.displayName = 'Section';
+markAsElement(Section);

package/src/components/tailwind/utils/react/is-component.ts

@@ -1,34 +1,4 @@
-import { Body } from '../../../body/index.js';
-import { Button } from '../../../button/index.js';
-import { CodeBlock } from '../../../code-block/index.js';
-import { CodeInline } from '../../../code-inline/index.js';
-import { Column } from '../../../column/index.js';
-import { Container } from '../../../container/index.js';
-import { Heading } from '../../../heading/index.js';
-import { Hr } from '../../../hr/index.js';
-import { Img } from '../../../img/index.js';
-import { Link } from '../../../link/index.js';
-import { Preview } from '../../../preview/index.js';
-import { Row } from '../../../row/index.js';
-import { Section } from '../../../section/index.js';
-import { Text } from '../../../text/index.js';
-
-const componentsToTreatAsElements: React.ReactElement['type'][] = [
-  Body,
-  Button,
-  CodeBlock,
-  CodeInline,
-  Column,
-  Container,
-  Heading,
-  Hr,
-  Img,
-  Link,
-  Preview,
-  Row,
-  Section,
-  Text,
-];
+import { elementMarker } from '../../../element-marker.js';
 
 export const isComponent = (
   element: React.ReactElement,
@@ -37,6 +7,6 @@ export const isComponent = (
     (typeof element.type === 'function' ||
       // @ts-expect-error - we know this is a component that may have a render function
       element.type.render !== undefined) &&
-    !componentsToTreatAsElements.includes(element.type)
+    !(elementMarker in (element.type as object))
   );
 };

package/src/components/text/text.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
 import { computeMargins } from './utils/compute-margins.js';
 
 export type TextProps = Readonly<React.ComponentPropsWithoutRef<'p'>>;
@@ -46,3 +47,4 @@ export const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
 );
 
 Text.displayName = 'Text';
+markAsElement(Text);

package/tsdown.config.ts

@@ -1,37 +1,24 @@
-import { createRequire } from 'node:module';
-import url from 'node:url';
 import { defineConfig } from 'tsdown';
 
-// css-tree uses createRequire() to load .json data files, which breaks at
-// runtime in ESM bundles. We bundle it in (noExternal) so we can intercept
-// those require() calls via this plugin and inline the JSON content at build
-// time. See https://github.com/resend/react-email/pull/2425.
-const hoistCreateRequireImports = {
-  name: 'hoist-create-require-imports',
-  async transform(code: string, id: string, meta: Record<string, unknown>) {
-    if (id.includes('css-tree')) {
-      const localizedRequire = createRequire(url.pathToFileURL(id));
-
-      return {
-        code: code
-          .replaceAll("import { createRequire } from 'module';", '')
-          .replaceAll(
-            /(const|var|let)\s+require\s*=\s*createRequire\s*\([^)]*\)\s*;?/g,
-            '',
-          )
-          .replaceAll(
-            /require\s*\(\s*(['"])([^)]+?\.json)\1\s*\)/gm,
-            (_match: string, _quote: string, jsonSpecifier: string) => {
-              return JSON.stringify(
-                localizedRequire(localizedRequire.resolve(jsonSpecifier)),
-                null,
-                2,
-              );
-            },
-          ),
-        ...meta,
-      };
+// css-tree's ESM files load .json data through createRequire(), which breaks
+// once a consumer's bundler inlines them. Its dist bundle is self-contained,
+// so the emitted ESM points there; the CJS output keeps plain 'css-tree',
+// whose CJS build only uses static require() calls that bundlers handle.
+// Only .mjs chunks are rewritten: declaration files must keep the bare
+// specifier, the only module @types/css-tree declares.
+const selfContainedCssTreeEsm = {
+  name: 'self-contained-css-tree-esm',
+  renderChunk(code: string, chunk: { fileName: string }) {
+    if (!chunk.fileName.endsWith('.mjs') || !code.includes('"css-tree"')) {
+      return null;
     }
+    return {
+      code: code.replaceAll(
+        ' from "css-tree"',
+        ' from "css-tree/dist/csstree.esm"',
+      ),
+      map: null,
+    };
   },
 };
 
@@ -45,12 +32,22 @@ export default defineConfig([
   {
     dts: true,
     entry: ['./src/index.ts'],
-    format: ['esm', 'cjs'],
+    format: ['esm'],
+    outDir: 'dist',
+    unbundle: true,
+    deps: {
+      neverBundle: [/^react($|\/)/, /^react-dom($|\/)/],
+    },
+    plugins: [selfContainedCssTreeEsm],
+  },
+  {
+    dts: true,
+    entry: ['./src/index.ts'],
+    format: ['cjs'],
     outDir: 'dist',
+    unbundle: true,
     deps: {
-      alwaysBundle: ['css-tree'],
       neverBundle: [/^react($|\/)/, /^react-dom($|\/)/],
     },
-    plugins: [hoistCreateRequireImports],
   },
 ]);