fix(react-email): linter

.changeset/dirty-needles-chew.md

@@ -0,0 +1,5 @@
+---
+"react-email": minor
+---
+
+Theme switcher for email template

.changeset/great-parrots-yell.md

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

.changeset/ninety-apes-love.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+update esbuild to 0.25.0

.changeset/shy-fans-allow.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Fix detection of files with various export patterns

.github/workflows/tests.yml

@@ -5,8 +5,10 @@ on:
       - main
   pull_request:
 jobs:
-  lint:
+  build:
     runs-on: buildjet-4vcpu-ubuntu-2204
+    outputs:
+      cache-hit: ${{ steps.pnpm-cache.outputs.cache-hit }}
     container:
       image: node:22
     steps:
@@ -19,95 +21,114 @@ jobs:
           corepack enable
           corepack prepare pnpm@9.15.0 --activate
           pnpm config set script-shell "/usr/bin/bash"
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 
       - name: pnpm Cache
         uses: buildjet/cache@v4
         with:
-          path: ${{ steps.pnpm-setup.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          path: |
+            ~/.pnpm-store
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+            ${{ runner.os }}-pnpm-
 
       - name: Install packages
+        if: steps.pnpm-cache.outputs.cache-hit != 'true'
         run: pnpm install --frozen-lockfile
 
+      - name: turborepo Cache
+        uses: buildjet/cache@v4
+        with:
+          path: |
+            .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
       - name: Run Build
         run: pnpm build
 
-      - name: Run Lint
-        run: pnpm lint
-
-  test:
+  lint:
     runs-on: buildjet-4vcpu-ubuntu-2204
+    needs: [build]
     container:
       image: node:22
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Enable Corepack
-        id: pnpm-setup
+      - name: Setup pnpm
         run: |
           corepack enable
           corepack prepare pnpm@9.15.0 --activate
-          pnpm config set script-shell "/usr/bin/bash"
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 
-      - name: pnpm Cache
+      - name: Restore dependencies
         uses: buildjet/cache@v4
         with:
-          path: ${{ steps.pnpm-setup.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          path: |
+            ~/.pnpm-store
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
 
-      - name: Install packages
-        run: pnpm install --frozen-lockfile
+      - name: turborepo Cache
+        uses: buildjet/cache@v4
+        with:
+          path: |
+            .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
 
       - name: Run Build
         run: pnpm build
 
-      - name: Run Tests
-        run: pnpm test
-        env:  
-          SPAM_ASSASSIN_HOST: ${{ secrets.SPAM_ASSASSIN_HOST }}
-          SPAM_ASSASSIN_PORT: ${{ secrets.SPAM_ASSASSIN_PORT }}
+      - name: Run Lint
+        run: pnpm lint
 
-  build:
+  test:
     runs-on: buildjet-4vcpu-ubuntu-2204
+    needs: [build]
     container:
       image: node:22
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Enable Corepack
-        id: pnpm-setup
+      - name: Setup pnpm
         run: |
           corepack enable
           corepack prepare pnpm@9.15.0 --activate
-          pnpm config set script-shell "/usr/bin/bash"
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 
-      - name: pnpm Cache
+      - name: Restore dependencies
         uses: buildjet/cache@v4
         with:
-          path: ${{ steps.pnpm-setup.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          path: |
+            ~/.pnpm-store
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
 
-      - name: Install packages
-        run: pnpm install --frozen-lockfile
+      - name: turborepo Cache
+        uses: buildjet/cache@v4
+        with:
+          path: |
+            .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
 
-      - name: Run Build
-        run: pnpm build
+      - name: Run Tests
+        run: pnpm test
+        env:
+          SPAM_ASSASSIN_HOST: ${{ secrets.SPAM_ASSASSIN_HOST }}
+          SPAM_ASSASSIN_PORT: ${{ secrets.SPAM_ASSASSIN_PORT }}
 
   dependencies:
     runs-on: buildjet-4vcpu-ubuntu-2204
     container:
-      image: node:18
+      image: node:22
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.gitignore

@@ -7,6 +7,7 @@ node_modules
 
 # testing
 coverage
+package-lock.json
 
 # next.js
 .next/

package.json

@@ -16,19 +16,19 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@changesets/cli": "2.27.11",
+    "@changesets/cli": "2.28.1",
     "@types/node": "22.10.2",
     "@types/react": "19.0.1",
     "@types/react-dom": "19.0.1",
     "eslint": "8.50.0",
     "happy-dom": "15.10.2",
-    "prettier": "3.4.2",
+    "prettier": "3.5.3",
     "prettier-plugin-tailwindcss": "0.6.6",
     "tsconfig": "workspace:*",
     "tsup": "8.2.4",
     "turbo": "2.3.1",
-    "vite": "5.4.13",
-    "vitest": "2.0.5"
+    "vite": "5.4.14",
+    "vitest": "2.1.9"
   },
   "pnpm": {
     "overrides": {

packages/code-block/package.json

@@ -47,6 +47,6 @@
     "access": "public"
   },
   "dependencies": {
-    "prismjs": "1.29.0"
+    "prismjs": "1.30.0"
   }
 }

packages/code-inline/package.json

@@ -38,7 +38,6 @@
     "@react-email/render": "workspace:*",
     "tsconfig": "workspace:*",
     "tsup": "7.2.0",
-    "typescript": "5.1.6",
-    "vitest": "1.1.0"
+    "typescript": "5.1.6"
   }
 }

packages/react-email/package.json

@@ -29,7 +29,7 @@
     "chokidar": "4.0.3",
     "commander": "11.1.0",
     "debounce": "2.0.0",
-    "esbuild": "0.23.0",
+    "esbuild": "0.25.0",
     "glob": "10.3.4",
     "log-symbols": "4.1.0",
     "mime-types": "2.1.35",
@@ -45,7 +45,7 @@
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-toggle-group": "1.1.0",
     "@radix-ui/react-tooltip": "1.1.2",
-    "@react-email/render": "workspace:*",
+    "@react-email/components": "workspace:*",
     "@swc/core": "1.4.15",
     "@types/babel__core": "7.20.5",
     "@types/fs-extra": "11.0.1",
@@ -57,7 +57,7 @@
     "@types/webpack": "5.28.5",
     "@vercel/style-guide": "5.1.0",
     "autoprefixer": "10.4.20",
-    "clsx": "2.1.0",
+    "clsx": "2.1.1",
     "framer-motion": "12.0.0-alpha.2",
     "postcss": "8.4.40",
     "prism-react-renderer": "2.1.0",
@@ -73,7 +73,6 @@
     "tailwindcss": "3.4.0",
     "tsup": "7.2.0",
     "tsx": "4.9.0",
-    "typescript": "5.1.6",
-    "vitest": "1.1.3"
+    "typescript": "5.1.6"
   }
 }

packages/react-email/src/app/page.tsx

@@ -11,8 +11,8 @@ const Home = () => {
 
   return (
     <Shell>
-      <div className="relative max-w-lg mx-auto p-8 flex items-center justify-center h-[inherit]">
-        <div className="relative z-10 flex flex-col text-center items-center">
+      <div className="relative mx-auto flex h-[inherit] max-w-lg items-center justify-center p-8">
+        <div className="relative z-10 flex flex-col items-center text-center">
           <Image
             alt="React Email Icon"
             className="mb-8"

packages/react-email/src/app/preview/[...slug]/preview.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import React from 'react';
+import React, { useRef } from 'react';
 import { Toaster } from 'sonner';
 import type { EmailRenderingResult } from '../../../actions/render-email-by-path';
 import { CodeContainer } from '../../../components/code-container';
 import { Shell } from '../../../components/shell';
 import { Tooltip } from '../../../components/tooltip';
 import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-result';
 import { useHotreload } from '../../../hooks/use-hot-reload';
+import { useIframeColorScheme } from '../../../hooks/use-iframe-color-scheme';
 import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
 import { RenderingError } from './rendering-error';
 
@@ -29,6 +30,7 @@ const Preview = ({
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+  const activeTheme = searchParams.get('theme') ?? 'light';
   const activeView = searchParams.get('view') ?? 'desktop';
   const activeLang = searchParams.get('lang') ?? 'jsx';
 
@@ -43,6 +45,9 @@ const Preview = ({
     serverRenderingResult,
   );
 
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  useIframeColorScheme(iframeRef, activeTheme);
+
   if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
     // this will not change on runtime so it doesn't violate
     // the rules of hooks
@@ -60,28 +65,20 @@ const Preview = ({
     });
   }
 
-  const handleViewChange = (view: string) => {
-    const params = new URLSearchParams(searchParams);
-    params.set('view', view);
-    router.push(`${pathname}?${params.toString()}`);
-  };
+  const hasNoErrors = typeof renderedEmailMetadata !== 'undefined';
 
-  const handleLangChange = (lang: string) => {
+  const setActiveLang = (lang: string) => {
     const params = new URLSearchParams(searchParams);
     params.set('view', 'source');
     params.set('lang', lang);
     router.push(`${pathname}?${params.toString()}`);
   };
 
-  const hasNoErrors = typeof renderedEmailMetadata !== 'undefined';
-
   return (
     <Shell
-      activeView={hasNoErrors ? activeView : undefined}
       currentEmailOpenSlug={slug}
       markup={renderedEmailMetadata?.markup}
       pathSeparator={pathSeparator}
-      setActiveView={hasNoErrors ? handleViewChange : undefined}
     >
       {/* This relative is so that when there is any error the user can still switch between emails */}
       <div className="relative h-full">
@@ -93,22 +90,24 @@ const Preview = ({
           <>
             {activeView === 'desktop' && (
               <iframe
-                className="w-full bg-white h-[calc(100vh_-_140px)] lg:h-[calc(100vh_-_70px)]"
+                className="h-[calc(100vh_-_140px)] w-full bg-white lg:h-[calc(100vh_-_70px)]"
+                ref={iframeRef}
                 srcDoc={renderedEmailMetadata.markup}
                 title={slug}
               />
             )}
 
             {activeView === 'mobile' && (
               <iframe
-                className="w-[360px] bg-white h-[calc(100vh_-_140px)] lg:h-[calc(100vh_-_70px)] mx-auto"
+                className="mx-auto h-[calc(100vh_-_140px)] w-[360px] bg-white lg:h-[calc(100vh_-_70px)]"
+                ref={iframeRef}
                 srcDoc={renderedEmailMetadata.markup}
                 title={slug}
               />
             )}
 
             {activeView === 'source' && (
-              <div className="flex gap-6 mx-auto p-6 max-w-3xl">
+              <div className="mx-auto flex max-w-3xl gap-6 p-6">
                 <Tooltip.Provider>
                   <CodeContainer
                     activeLang={activeLang}
@@ -126,7 +125,7 @@ const Preview = ({
                         content: renderedEmailMetadata.plainText,
                       },
                     ]}
-                    setActiveLang={handleLangChange}
+                    setActiveLang={setActiveLang}
                   />
                 </Tooltip.Provider>
               </div>