feat(render): react-server export with experimental use of react-markup

.changeset/afraid-sides-agree.md

@@ -0,0 +1,5 @@
+---
+"@react-email/preview-server": patch
+---
+
+fix `<svg>` not being flagged as incompatible

.changeset/crazy-seas-eat.md

@@ -0,0 +1,5 @@
+---
+"@react-email/components": minor
+---
+
+Update `@react-email/[email protected]`

.changeset/deep-clowns-bet.md

@@ -0,0 +1,5 @@
+---
+"@react-email/render": patch
+---
+
+fix browser version including errors in the output instead of throwing them

.changeset/great-parrots-yell.md

@@ -0,0 +1,5 @@
+---
+"@react-email/tailwind": minor
+---
+
+Extract tailwind pseudo classes to stylesheet

.changeset/mighty-pigs-add.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Add support for hot reloading with tsconfig path aliases

.changeset/pre.json

@@ -0,0 +1,49 @@
+{
+  "mode": "pre",
+  "tag": "canary",
+  "initialVersions": {
+    "demo": "0.0.0",
+    "docs": "0.0.0",
+    "web": "0.0.0",
+    "@benchmarks/preview-server": "0.0.0",
+    "@benchmarks/tailwind-component": "0.0.0",
+    "@react-email/body": "0.0.11",
+    "@react-email/button": "0.0.19",
+    "@react-email/code-block": "0.0.13",
+    "@react-email/code-inline": "0.0.5",
+    "@react-email/column": "0.0.13",
+    "@react-email/components": "0.0.41",
+    "@react-email/container": "0.0.15",
+    "create-email": "1.2.1",
+    "react-email-starter": "1.0.7",
+    "@react-email/font": "0.0.9",
+    "@react-email/head": "0.0.12",
+    "@react-email/heading": "0.0.15",
+    "@react-email/hr": "0.0.11",
+    "@react-email/html": "0.0.11",
+    "@react-email/img": "0.0.11",
+    "@react-email/link": "0.0.12",
+    "@react-email/markdown": "0.0.15",
+    "@react-email/preview": "0.0.13",
+    "react-email": "4.0.15",
+    "@react-email/render": "1.1.2",
+    "@react-email/row": "0.0.12",
+    "@react-email/section": "0.0.16",
+    "@react-email/tailwind": "1.0.5",
+    "@react-email/text": "0.1.4",
+    "tsconfig": "0.0.0",
+    "@react-email/preview-server": "1.0.0-canary.0"
+  },
+  "changesets": [
+    "afraid-sides-agree",
+    "crazy-seas-eat",
+    "deep-clowns-bet",
+    "great-parrots-yell",
+    "mighty-pigs-add",
+    "puny-chicken-argue",
+    "stupid-ghosts-decide",
+    "tasty-swans-taste",
+    "tidy-geese-cross",
+    "tiny-rice-give"
+  ]
+}

.changeset/puny-chicken-argue.md

@@ -0,0 +1,5 @@
+---
+"react-email": minor
+---
+
+use a separate package for storing the preview server (@react-email/preview-server)

.changeset/stupid-ghosts-decide.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Fix prettier errors causing NextJS serialization error

.changeset/tasty-swans-taste.md

@@ -0,0 +1,5 @@
+---
+"@react-email/components": minor
+---
+
+Updated @react-email/[email protected]

.changeset/tidy-geese-cross.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Pre-render email templates on hover

.changeset/tiny-rice-give.md

@@ -0,0 +1,5 @@
+---
+"@react-email/button": minor
+---
+
+respect the order in which padding properties are defined

.github/workflows/lint.yml

@@ -20,7 +20,7 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda
       - name: pnpm Cache
         id: pnpm-cache
-        uses: buildjet/cache@3e70d19e31d6a8030aeddf6ed8dbe601f94d09f4
+        uses: buildjet/cache@9347ea1c7c1f331d397aa98b3894420448373372
         with:
           path: |
             ~/.pnpm-store

.github/workflows/preview-release.yml

@@ -1,10 +1,6 @@
 name: Preview Release
 on: 
   pull_request:
-  push:
-    branches:
-      - main
-      - canary
 permissions:
   contents: read
   pull-requests: write
@@ -15,20 +11,16 @@ jobs:
     permissions: 
       contents: write
       pull-requests: write
+    container:
+      image: node:22
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
       - name: pnpm setup
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda
       - name: pnpm Cache
         id: pnpm-cache
-        uses: buildjet/cache@3e70d19e31d6a8030aeddf6ed8dbe601f94d09f4
+        uses: buildjet/cache@9347ea1c7c1f331d397aa98b3894420448373372
         with:
           path: |
             ~/.pnpm-store

.github/workflows/release-canary.yml

@@ -1,12 +1,9 @@
-name: rsnd
-
+name: Release Canary
 on:
   push:
     branches:
       - canary
-
 concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 jobs:
   release:
     name: release canary
@@ -19,21 +16,18 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 22
-
       - name: Enable Corepack
         id: pnpm-setup
         run: |
           corepack enable
           corepack prepare [email protected] --activate
           pnpm config set script-shell "/usr/bin/bash"
-
       - name: pnpm Cache
-        uses: buildjet/cache@3e70d19e31d6a8030aeddf6ed8dbe601f94d09f4
+        uses: buildjet/cache@9347ea1c7c1f331d397aa98b3894420448373372
         with:
           path: |
             ~/.pnpm-store
@@ -42,16 +36,13 @@ jobs:
           key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-
-
       - name: Install packages
         if: steps.pnpm-cache.outputs.cache-hit != 'true'
         run: pnpm install --frozen-lockfile
-
       - name: Enter prerelease mode
         # This step errors if it is already in prerelease mode
         continue-on-error: true
         run: pnpm canary:enter
-
       - name: Create "Version packages" PR or publish release
         uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc
         with:

.github/workflows/tests.yml

@@ -23,7 +23,7 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda
       - name: pnpm Cache
         id: pnpm-cache
-        uses: buildjet/cache@3e70d19e31d6a8030aeddf6ed8dbe601f94d09f4
+        uses: buildjet/cache@9347ea1c7c1f331d397aa98b3894420448373372
         with:
           path: |
             ~/.pnpm-store

.github/workflows/version.yml

@@ -31,7 +31,7 @@ jobs:
 
       - name: pnpm Cache
         id: pnpm-cache
-        uses: buildjet/cache@3e70d19e31d6a8030aeddf6ed8dbe601f94d09f4
+        uses: buildjet/cache@9347ea1c7c1f331d397aa98b3894420448373372
         with:
           path: |
             ~/.pnpm-store

README.md

@@ -108,7 +108,13 @@ All components were tested using the most popular email clients.
 pnpm install
 ```
 
-#### Build and run packages
+#### Build
+
+```sh
+pnpm build
+```
+
+#### Run packages
 
 ```sh
 pnpm dev

apps/demo/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "build": "email build",
+    "build": "pnpm install --frozen-lockfile && email build",
     "dev": "email dev",
     "start": "email start",
     "export": "email export"
@@ -15,7 +15,8 @@
     "react-email": "workspace:*"
   },
   "devDependencies": {
-    "next": "15.3.1",
+    "@react-email/preview-server": "workspace:*",
+    "next": "^15.2.4",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "tsx": "4.19.3"

apps/web/components/customer-reviews/tailwind.tsx

@@ -87,7 +87,7 @@ export const component = (
             </Text>
             <Button
               href="#"
-              className="mt-[26px] mb-[24px] inline-block w-full rounded-[8px] bg-indigo-600 p-3 text-center box-border font-semibold text-white"
+              className="mt-[26px] mb-[24px] inline-block w-full rounded-[8px] bg-indigo-600 p-[12px] text-center box-border font-semibold text-white"
             >
               Write a review
             </Button>

apps/web/src/components/template.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import classNames from 'classnames';
-import Image from 'next/image';
 import type { ImageLoader } from 'next/image';
+import Image from 'next/image';
 import Link from 'next/link';
 import * as React from 'react';
 import { Heading } from './heading';

apps/web/src/utils/spam-assassin/parse-pointing-table-rows.ts

@@ -27,7 +27,7 @@ export const parsePointingTableRows = (response: string) => {
   const responseFromTableStart = response.slice(
     tableStartMatch.index + tableStartMatch[0].length,
   );
-  let currentRow: Row | undefined = undefined;
+  let currentRow: Row | undefined;
   for (const line of responseFromTableStart.split(/\r\n|\n|\r/)) {
     if (line.trim().length === 0) break;
 

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.0.0-beta.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.0.0-beta.5/schema.json",
   "assist": {
     "actions": {
       "source": {
@@ -31,7 +31,6 @@
         "noCommaOperator": "error",
         "useNodejsImportProtocol": "error",
         "useAsConstAssertion": "error",
-        "useNumericLiterals": "error",
         "useEnumInitializers": "error",
         "useSelfClosingElements": "error",
         "useConst": "error",
@@ -54,6 +53,7 @@
         "noDelete": "off"
       },
       "a11y": {
+        "noStaticElementInteractions": "off",
         "noSvgWithoutTitle": "off",
         "noAutofocus": "off"
       },
@@ -67,6 +67,7 @@
         "useSortedClasses": "off"
       },
       "complexity": {
+        "useNumericLiterals": "error",
         "noUselessFragments": "off",
         "noForEach": "off"
       },
@@ -87,7 +88,7 @@
       "!**/pnpm-lock.yaml",
       "!**/.next",
       "!**/public",
-      "!packages/react-email/src/actions/email-validation/caniemail-data.ts",
+      "!packages/preview-server/src/actions/email-validation/caniemail-data.ts",
       "!**/.react-email/**/*",
       "!**/node_modules/**/*",
       "!**/*.d.ts",

package.json

@@ -15,7 +15,7 @@
     "test:watch": "turbo run test:watch"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.0.0-beta.1",
+    "@biomejs/biome": "2.0.0-beta.5",
     "@changesets/cli": "2.29.2",
     "@types/node": "22.14.1",
     "@types/react": "19.0.1",
@@ -25,7 +25,7 @@
     "tsconfig": "workspace:*",
     "tsup": "8.4.0",
     "turbo": "2.5.0",
-    "vite": "6.3.2",
+    "vite": "6.3.4",
     "vitest": "3.1.1"
   },
   "pnpm": {

packages/button/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-email/button
 
+## 0.1.0-canary.0
+
+### Minor Changes
+
+- 11c4600: respect the order in which padding properties are defined
+
 ## 0.0.19
 
 ### Patch Changes

packages/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/button",
-  "version": "0.0.19",
+  "version": "0.1.0-canary.0",
   "description": "A link that is styled to look like a button",
   "sideEffects": false,
   "main": "./dist/index.js",

packages/button/src/__snapshots__/button.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<Button> component > renders correctly  with padding values from style prop 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a href="https://example.com" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px"></span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a><!--/$-->"`;
+exports[`<Button> component > renders correctly  with padding values from style prop 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a href="https://example.com" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px;padding-top:12px;padding-right:20px;padding-bottom:12px;padding-left:20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px"></span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a><!--/$-->"`;
 
-exports[`<Button> component > renders the <Button> component with no padding value 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a href="https://example.com" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:0px 0px 0px 0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:0" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0"></span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`;
+exports[`<Button> component > renders the <Button> component with no padding value 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a href="https://example.com" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:0" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px"></span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`;
 
-exports[`<Button> component > should allow users to overwrite style props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a style="line-height:150%;text-decoration:underline red;display:block;max-width:50%;mso-padding-alt:0px;padding:0px 0px 0px 0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:0" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0"></span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`;
+exports[`<Button> component > should allow users to overwrite style props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a style="line-height:150%;text-decoration:underline red;display:block;max-width:50%;mso-padding-alt:0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:0" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px"></span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`;