feat(react-email): added a theme switcher to the dev preview

.changeset/silly-knives-kiss.md

@@ -0,0 +1,5 @@
+---
+"@react-email/code-block": patch
+---
+
+fix improper padding on the line numbers

.changeset/slow-ghosts-design.md

@@ -0,0 +1,5 @@
+---
+"@react-email/code-block": patch
+---
+
+Add `fontFamily` prop that is inlined into the elements for all tokens

.changeset/wise-suits-run.md

@@ -0,0 +1,5 @@
+---
+"@react-email/tailwind": patch
+---
+
+Fix TailwindConfig's type broken when tailwindcss is not installed on the user's project

.pnpmfile.cjs

@@ -0,0 +1,33 @@
+const fs = require("fs");
+const path = require("path");
+
+const packages = fs.readdirSync(path.resolve(__dirname, "./packages"));
+const components = packages
+  .filter(
+    (dirname) =>
+      ![
+        "react-email",
+        "eslint-config-custom",
+        "tsconfig",
+        "create-email",
+      ].includes(dirname),
+  )
+  .map((dirname) => `@react-email/${dirname}`);
+
+function readPackage(pkg) {
+  if (components.includes(pkg.name)) {
+    if ("react" in pkg.peerDependencies) {
+      pkg.peerDependencies.react = "19.0.0-rc-187dd6a7-20240806";
+    }
+    if ("react-dom" in pkg.peerDependencies) {
+      pkg.peerDependencies["react-dom"] = "19.0.0-rc-187dd6a7-20240806";
+    }
+  }
+  return pkg;
+}
+
+module.exports = {
+  hooks: {
+    readPackage,
+  },
+};

apps/web/components/code-block-with-custom-theme/index.tsx

@@ -1,138 +1,151 @@
-import { CodeBlock } from "@react-email/components";
+import { CodeBlock, Font } from "@react-email/components";
 import { Layout } from "../_components/layout";
 
 export const component = (
-  <CodeBlock
-    code={`await resend.emails.send({
+  <>
+    <Font
+      fallbackFontFamily="monospace"
+      fontFamily="CommitMono"
+      fontStyle="normal"
+      fontWeight={400}
+      webFont={{
+        url: "/fonts/commit-mono/commit-mono-regular.ttf",
+        format: "truetype",
+      }}
+    />
+    <CodeBlock
+      code={`await resend.emails.send({
   from: '[email protected]',
   to: '[email protected]',
   subject: 'hello world',
   react: EmailTemplate({ firstName: 'John' }),
 });`}
-    language="javascript"
-    theme={{
-      base: {
-        color: "#839496",
-        textShadow: "0 1px rgba(0, 0, 0, 0.3)",
-        fontFamily:
-          "Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",
-        direction: "ltr",
-        textAlign: "left",
-        whiteSpace: "pre",
-        wordSpacing: "normal",
-        wordBreak: "normal",
-        lineHeight: "1.5",
-        MozTabSize: "4",
-        OTabSize: "4",
-        tabSize: "4",
-        WebkitHyphens: "none",
-        MozHyphens: "none",
+      fontFamily="'CommitMono', monospace"
+      language="javascript"
+      theme={{
+        base: {
+          color: "#839496",
+          textShadow: "0 1px rgba(0, 0, 0, 0.3)",
+          fontFamily:
+            "Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",
+          direction: "ltr",
+          textAlign: "left",
+          whiteSpace: "pre",
+          wordSpacing: "normal",
+          wordBreak: "normal",
+          lineHeight: "1.5",
+          MozTabSize: "4",
+          OTabSize: "4",
+          tabSize: "4",
+          WebkitHyphens: "none",
+          MozHyphens: "none",
 
-        hyphens: "none",
-        padding: "1em",
-        margin: ".5em 0",
-        overflow: "auto",
-        borderRadius: "0.3em",
-        background: "#002b36",
-      },
-      comment: {
-        color: "#586e75",
-      },
-      prolog: {
-        color: "#586e75",
-      },
-      doctype: {
-        color: "#586e75",
-      },
-      cdata: {
-        color: "#586e75",
-      },
-      punctuation: {
-        color: "#93a1a1",
-      },
-      property: {
-        color: "#268bd2",
-      },
-      keyword: {
-        color: "#268bd2",
-      },
-      tag: {
-        color: "#268bd2",
-      },
-      "class-name": {
-        color: "#FFFFB6",
-        textDecoration: "underline",
-      },
-      boolean: {
-        color: "#b58900",
-      },
-      constant: {
-        color: "#b58900",
-      },
-      symbol: {
-        color: "#dc322f",
-      },
-      deleted: {
-        color: "#dc322f",
-      },
-      number: {
-        color: "#859900",
-      },
-      selector: {
-        color: "#859900",
-      },
-      "attr-name": {
-        color: "#859900",
-      },
-      string: {
-        color: "#859900",
-      },
-      char: {
-        color: "#859900",
-      },
-      builtin: {
-        color: "#859900",
-      },
-      inserted: {
-        color: "#859900",
-      },
-      variable: {
-        color: "#268bd2",
-      },
-      operator: {
-        color: "#EDEDED",
-      },
-      function: {
-        color: "#268bd2",
-      },
-      regex: {
-        color: "#E9C062",
-      },
-      important: {
-        color: "#fd971f",
-        fontWeight: "bold",
-      },
-      entity: {
-        color: "#FFFFB6",
-        cursor: "help",
-      },
-      url: {
-        color: "#96CBFE",
-      },
-      bold: {
-        fontWeight: "bold",
-      },
-      italic: {
-        fontStyle: "italic",
-      },
-      atrule: {
-        color: "#F9EE98",
-      },
-      "attr-value": {
-        color: "#F9EE98",
-      },
-    }}
-  />
+          hyphens: "none",
+          padding: "1em",
+          margin: ".5em 0",
+          overflow: "auto",
+          borderRadius: "0.3em",
+          background: "#002b36",
+        },
+        comment: {
+          color: "#586e75",
+        },
+        prolog: {
+          color: "#586e75",
+        },
+        doctype: {
+          color: "#586e75",
+        },
+        cdata: {
+          color: "#586e75",
+        },
+        punctuation: {
+          color: "#93a1a1",
+        },
+        property: {
+          color: "#268bd2",
+        },
+        keyword: {
+          color: "#268bd2",
+        },
+        tag: {
+          color: "#268bd2",
+        },
+        "class-name": {
+          color: "#FFFFB6",
+          textDecoration: "underline",
+        },
+        boolean: {
+          color: "#b58900",
+        },
+        constant: {
+          color: "#b58900",
+        },
+        symbol: {
+          color: "#dc322f",
+        },
+        deleted: {
+          color: "#dc322f",
+        },
+        number: {
+          color: "#859900",
+        },
+        selector: {
+          color: "#859900",
+        },
+        "attr-name": {
+          color: "#859900",
+        },
+        string: {
+          color: "#859900",
+        },
+        char: {
+          color: "#859900",
+        },
+        builtin: {
+          color: "#859900",
+        },
+        inserted: {
+          color: "#859900",
+        },
+        variable: {
+          color: "#268bd2",
+        },
+        operator: {
+          color: "#EDEDED",
+        },
+        function: {
+          color: "#268bd2",
+        },
+        regex: {
+          color: "#E9C062",
+        },
+        important: {
+          color: "#fd971f",
+          fontWeight: "bold",
+        },
+        entity: {
+          color: "#FFFFB6",
+          cursor: "help",
+        },
+        url: {
+          color: "#96CBFE",
+        },
+        bold: {
+          fontWeight: "bold",
+        },
+        italic: {
+          fontStyle: "italic",
+        },
+        atrule: {
+          color: "#F9EE98",
+        },
+        "attr-value": {
+          color: "#F9EE98",
+        },
+      }}
+    />
+  </>
 );
 
 export default () => {

apps/web/components/code-block-with-line-numbers/index.tsx

@@ -1,18 +1,31 @@
-import { CodeBlock, dracula } from "@react-email/components";
+import { CodeBlock, Font, dracula } from "@react-email/components";
 import { Layout } from "../_components/layout";
 
 export const component = (
-  <CodeBlock
-    code={`await resend.emails.send({
+  <>
+    <Font
+      fallbackFontFamily="monospace"
+      fontFamily="CommitMono"
+      fontStyle="normal"
+      fontWeight={400}
+      webFont={{
+        url: "/fonts/commit-mono/commit-mono-regular.ttf",
+        format: "truetype",
+      }}
+    />
+    <CodeBlock
+      code={`await resend.emails.send({
   from: '[email protected]',
   to: '[email protected]',
   subject: 'hello world',
   react: EmailTemplate({ firstName: 'John' }),
 });`}
-    language="javascript"
-    lineNumbers
-    theme={dracula}
-  />
+      fontFamily="'CommitMono', monospace"
+      language="javascript"
+      lineNumbers
+      theme={dracula}
+    />
+  </>
 );
 
 export default () => {