feat(render): Integration test for vite and nextjs

.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/mean-feet-go.md

@@ -0,0 +1,5 @@
+---
+"@react-email/render": patch
+---
+
+fix missing `MessageChannel` error

.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
@@ -40,6 +40,8 @@ jobs:
         with:
           cache-prefix: ${{ runner.os }}-turbo-
           provider: github
+      - name: setup playwright
+        run: pnpm exec playwright install --with-deps
       - name: Run Build
         run: pnpm build
         # We include the environment variables here so that the cache for turborepo

.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

.gitignore

@@ -7,8 +7,9 @@ node_modules
 
 # testing
 coverage
-**/*/package-lock.json
-**/*/yalc.lock
+package-lock.json
+.yalc*
+yalc.lock
 
 # next.js
 .next/

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.3.2",
     "@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/package.json

@@ -21,7 +21,7 @@
     "@vercel/analytics": "1.5.0",
     "framer-motion": "12.7.4",
     "lucide-react": "^0.492.0",
-    "next": "15.3.1",
+    "next": "15.3.2",
     "prism-react-renderer": "2.4.1",
     "react": "^19",
     "react-dom": "^19",

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,17 +15,18 @@
     "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",
     "@types/react-dom": "19.0.1",
     "happy-dom": "17.4.4",
     "pkg-pr-new": "0.0.43",
+    "playwright": "1.52.0",
     "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