fix(web): 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 [email protected] --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 [email protected] --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 [email protected] --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/

apps/web/components/article-with-image-as-background/tailwind.tsx

@@ -30,13 +30,13 @@ export const component = (
           <Heading as="h1" className="m-0 mt-[4px] font-bold text-white">
             Artful Accents
           </Heading>
-          <Text className="m-0 mt-[8px] text-[16px] leading-[24px] text-white">
+          <Text className="m-0 mt-[8px] text-[16px] text-white leading-[24px]">
             Uncover the power of accent furniture in transforming your space
             with subtle touches of style, personality, and functionality, as we
             explore the art of curating captivating accents.
           </Text>
           <Button
-            className="mt-[24px] rounded-[8px] border border-solid border-gray-200 bg-white px-[40px] py-[12px] font-semibold text-gray-900"
+            className="mt-[24px] rounded-[8px] border border-gray-200 border-solid bg-white px-[40px] py-[12px] font-semibold text-gray-900"
             href="https://react.email"
           >
             Read more

apps/web/components/article-with-image-on-right/tailwind.tsx

@@ -5,13 +5,13 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Section className="my-[16px] text-center">
     <Section className="inline-block w-full max-w-[250px] text-left align-top">
-      <Text className="m-0 text-[16px] font-semibold leading-[24px] text-indigo-600">
+      <Text className="m-0 font-semibold text-[16px] text-indigo-600 leading-[24px]">
         What's new
       </Text>
-      <Text className="m-0 mt-[8px] text-[20px] font-semibold leading-[28px] text-gray-900">
+      <Text className="m-0 mt-[8px] font-semibold text-[20px] text-gray-900 leading-[28px]">
         Versatile Comfort
       </Text>
-      <Text className="mt-[8px] text-[16px] leading-[24px] text-gray-500">
+      <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
         Experience ultimate comfort and versatility with our furniture
         collection, designed to adapt to your ever-changing needs.
       </Text>

apps/web/components/article-with-image/tailwind.tsx

@@ -10,16 +10,16 @@ export const component = (
       src="/static/herman-miller-chair.jpg"
     />
     <Section className="mt-[32px] text-center">
-      <Text className="my-[16px] text-[18px] font-semibold leading-[28px] text-indigo-600">
+      <Text className="my-[16px] font-semibold text-[18px] text-indigo-600 leading-[28px]">
         Our new article
       </Text>
       <Heading
         as="h1"
-        className="m-0 mt-[8px] text-[36px] font-semibold leading-[36px] text-gray-900"
+        className="m-0 mt-[8px] font-semibold text-[36px] text-gray-900 leading-[36px]"
       >
         Designing with Furniture
       </Heading>
-      <Text className="text-[16px] leading-[24px] text-gray-500">
+      <Text className="text-[16px] text-gray-500 leading-[24px]">
         Unleash your inner designer as we explore how furniture plays a vital
         role in creating stunning interiors, offering insights into choosing the
         right pieces, arranging them harmoniously, and infusing your space with

apps/web/components/article-with-multiple-authors/tailwind.tsx

@@ -11,7 +11,7 @@ import { Layout } from '../_components/layout';
 
 export const component = (
   <Row>
-    <Hr className="mb-[0px] mt-[16px] !border-gray-300" />
+    <Hr className="!border-gray-300 mt-[16px] mb-[0px]" />
     <Section>
       {[
         {
@@ -41,11 +41,11 @@ export const component = (
             <Section className="ml-[18px] inline-block max-w-[120px] text-left align-top">
               <Heading
                 as="h3"
-                className="m-0 text-[14px] font-medium leading-[20px] text-gray-900"
+                className="m-0 font-medium text-[14px] text-gray-900 leading-[20px]"
               >
                 {author.name}
               </Heading>
-              <Text className="m-0 text-[12px] font-medium leading-[14px] text-gray-500">
+              <Text className="m-0 font-medium text-[12px] text-gray-500 leading-[14px]">
                 {author.title}
               </Text>
               <Section className="mt-[4px]">

apps/web/components/article-with-single-author/tailwind.tsx

@@ -11,7 +11,7 @@ import { Layout } from '../_components/layout';
 
 export const component = (
   <Row>
-    <Hr className="my-[16px] !border-gray-300" />
+    <Hr className="!border-gray-300 my-[16px]" />
     <Section className="mt-[5px] inline-block max-h-[48px] max-w-[48px] text-left">
       <Img
         alt="Steve Jobs"
@@ -24,11 +24,11 @@ export const component = (
     <Section className="ml-[18px] inline-block max-w-[120px] text-left align-top">
       <Heading
         as="h3"
-        className="m-[0px] text-[14px] font-medium leading-[20px] text-gray-800"
+        className="m-[0px] font-medium text-[14px] text-gray-800 leading-[20px]"
       >
         Steve Jobs
       </Heading>
-      <Text className="m-[0px] text-[12px] font-medium leading-[14px] text-gray-500">
+      <Text className="m-[0px] font-medium text-[12px] text-gray-500 leading-[14px]">
         Co-Founder & CEO
       </Text>
       <Section className="mt-[4px]">

apps/web/components/article-with-two-cards/tailwind.tsx

@@ -5,10 +5,10 @@ import { Layout } from '../_components/layout';
 export const component = (
   <Section className="my-[16px]">
     <Row>
-      <Text className="m-0 text-[20px] font-semibold leading-[28px] text-gray-900">
+      <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
         Elevate Outdoor Living
       </Text>
-      <Text className="mt-[8px] text-[16px] leading-[24px] text-gray-500">
+      <Text className="mt-[8px] text-[16px] text-gray-500 leading-[24px]">
         Take your outdoor space to new heights with our premium outdoor
         furniture, designed to elevate your alfresco experience.
       </Text>
@@ -24,13 +24,13 @@ export const component = (
           height="180"
           src="/static/outdoor-living.jpg"
         />
-        <Text className="text-[16px] font-semibold leading-[24px] text-indigo-600">
+        <Text className="font-semibold text-[16px] text-indigo-600 leading-[24px]">
           What's new
         </Text>
-        <Text className="m-0 text-[20px] font-semibold leading-[28px] text-gray-900">
+        <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
           Multifunctional Marvels
         </Text>
-        <Text className="mb-0 mt-[8px] text-[16px] leading-[24px] text-gray-500">
+        <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
           Discover the innovative world of multifunctional furniture, where
           style meets practicality, offering creative solutions for maximizing
           space and enhancing functionality in your home
@@ -46,13 +46,13 @@ export const component = (
           height="180"
           src="/static/outdoor-living.jpg"
         />
-        <Text className="text-[16px] font-semibold leading-[24px] text-indigo-600">
+        <Text className="font-semibold text-[16px] text-indigo-600 leading-[24px]">
           What's new
         </Text>
-        <Text className="m-0 text-[20px] font-semibold leading-[28px] text-gray-900">
+        <Text className="m-0 font-semibold text-[20px] text-gray-900 leading-[28px]">
           Timeless Classics
         </Text>
-        <Text className="mb-0 mt-[8px] text-[16px] leading-[24px] text-gray-500">
+        <Text className="mt-[8px] mb-0 text-[16px] text-gray-500 leading-[24px]">
           Step into the world of timeless classics as we explore iconic
           furniture pieces that have stood the test of time, adding enduring
           elegance and sophistication to any interior