diff --git a/apps/preview/app/src/components/sidebar.tsx b/apps/preview/app/src/components/sidebar.tsx
index ca2a38b9..b500a221 100644
--- a/apps/preview/app/src/components/sidebar.tsx
+++ b/apps/preview/app/src/components/sidebar.tsx
@@ -9,7 +9,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { useAppStore } from '../composables/useAppStore';
 import type { TemplatePart } from '../lib/types';
 
-import { Logo } from './Logo';
+import { Logo } from './logo';
 import { Separator } from './ui/Separator';
 
 interface DirectoryTreeProps {
diff --git a/apps/preview/app/src/layouts/Shell.tsx b/apps/preview/app/src/layouts/Shell.tsx
index 95f91406..585bc3ca 100644
--- a/apps/preview/app/src/layouts/Shell.tsx
+++ b/apps/preview/app/src/layouts/Shell.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router-dom';
 
-import { Header, Sidebar } from '../components/Sidebar';
+import { Header, Sidebar } from '../components/sidebar';
 
 export const Shell = () => (
   <>
diff --git a/docs/components/graph.md b/docs/components/graph.md
index 0c2eea36..c88a928b 100644
--- a/docs/components/graph.md
+++ b/docs/components/graph.md
@@ -18,7 +18,7 @@ This component is wrapper around [QuickChart API](https://quickchart.io/) for ge
 Add the graph component to your email template.
 
 ```jsx
-import { Html, Body, Section, Graph } from 'jsx-email';
+import { Body, Graph, Html, Section } from 'jsx-email';
 
 const Email = () => {
   return (
diff --git a/docs/core/compile.md b/docs/core/compile.md
index c2c38bbd..65298c21 100644
--- a/docs/core/compile.md
+++ b/docs/core/compile.md
@@ -28,10 +28,10 @@ const compiledFiles = await compile({ files: [templatePath], hashFiles: false, o
 Once compiled into a bundle, the file can be imported and passed to render such like:
 
 ```jsx
-import { Template } from './.compiled/batman.js';
-
 import { render } from 'jsx-email';
 
+import { Template } from './.compiled/batman.js';
+
 const html = render(<Template />);
 ```
 
diff --git a/docs/core/plugins.md b/docs/core/plugins.md
index 343fb725..959f5d7e 100644
--- a/docs/core/plugins.md
+++ b/docs/core/plugins.md
@@ -33,6 +33,7 @@ To instruct a render to use plugins, utilize a [Configuration File](/docs/core/c
 
 ```js
 import { defineConfig } from 'jsx-email/config';
+
 import { somePlugin } from './plugins/some-plugin';
 
 export const config = defineConfig({
diff --git a/packages/create-mail/generators/package.json.mustache b/packages/create-mail/generators/package.json.mustache
index 543fe6e3..9c95408a 100644
--- a/packages/create-mail/generators/package.json.mustache
+++ b/packages/create-mail/generators/package.json.mustache
@@ -12,6 +12,7 @@
     "jsx-email": "^2.0.0"
   },
   "devDependencies": {
-    "react": "^19.1.0"{{{ typeDep }}}
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"{{{ typeDep }}}
   }
 }
diff --git a/packages/create-mail/moon.yml b/packages/create-mail/moon.yml
index e4e5e301..7a5efe8a 100644
--- a/packages/create-mail/moon.yml
+++ b/packages/create-mail/moon.yml
@@ -34,7 +34,7 @@ tasks:
       runDepsInParallel: false
 
   copy:
-    command: cp -r generators dist
+    command: rm -rf dist/generators/templates && cp -r generators dist
     options:
       cache: false
 
diff --git a/packages/jsx-email/src/cli/commands/build.ts b/packages/jsx-email/src/cli/commands/build.ts
index 277782ca..4ef535de 100644
--- a/packages/jsx-email/src/cli/commands/build.ts
+++ b/packages/jsx-email/src/cli/commands/build.ts
@@ -5,7 +5,7 @@ import os from 'node:os';
 import chalkTmpl from 'chalk-template';
 import { globby } from 'globby';
 import micromatch from 'micromatch';
-import { basename, dirname, extname, join, posix, resolve, win32 } from 'path';
+import { basename, dirname, extname, join, posix, relative, resolve, win32 } from 'path';
 import { isWindows } from 'std-env';
 import { pathToFileURL } from 'url';
 import type { InferOutput as Infer } from 'valibot';
@@ -121,8 +121,9 @@ export const build = async (options: BuildOptions): Promise<BuildResult> => {
   const templateName = basename(path, fileExt).replace(/-[^-]{8}$/, '');
   const component = componentExport(renderProps);
   const baseDir = dirname(path);
+  const relativeBaseDir = outputBasePath ? relative(outputBasePath, baseDir) : '';
   const writePath = outputBasePath
-    ? join(out!, baseDir.replace(outputBasePath, ''), templateName)
+    ? join(out!, relativeBaseDir, templateName)
     : join(out!, templateName);
   // const writePath = outputBasePath
   //   ? join(out!, baseDir.replace(outputBasePath, ''), templateName + extension)
diff --git a/packages/jsx-email/src/cli/commands/check.ts b/packages/jsx-email/src/cli/commands/check.ts
index 9fe7c993..6a2f234d 100644
--- a/packages/jsx-email/src/cli/commands/check.ts
+++ b/packages/jsx-email/src/cli/commands/check.ts
@@ -4,7 +4,7 @@ import { type IssueGroup, caniemail, groupIssues, sortIssues } from 'caniemail';
 import chalk from 'chalk';
 import chalkTmpl from 'chalk-template';
 import stripAnsi from 'strip-ansi';
-import { type InferOutput as Infer, parse as assert, object } from 'valibot';
+import { type InferOutput as Infer, parse as assert, boolean, object, optional } from 'valibot';
 
 import { formatBytes, gmailByteLimit, gmailBytesSafe } from '../helpers.js';
 
@@ -13,7 +13,9 @@ import { type CommandFn } from './types.js';
 
 const { error, log } = console;
 
-const CheckOptionsStruct = object({});
+const CheckOptionsStruct = object({
+  usePreviewProps: optional(boolean())
+});
 
 type CheckOptions = Infer<typeof CheckOptionsStruct>;
 
@@ -32,17 +34,24 @@ export const help = chalkTmpl`
 Check jsx-email templates for client compatibility
 
 {underline Usage}
-  $ email check <template file name>
+  $ email check <template file name> [...options]
+
+{underline Options}
+  --use-preview-props
+                When set, use the \`previewProps\` exported by the template file (if present).
 
 {underline Examples}
   $ email check ./emails/Batman.tsx
+  $ email check ./emails/Batman.tsx --use-preview-props
 `;
 
 const formatNotes = (notes: string[], indent: string) => {
   if (!notes.length) return '';
-  const noteLines = (notes as string[]).join(`\n${'.'.repeat(indent.length)}**`);
-  console.log({ noteLines });
-  return chalkTmpl`\n${indent}{cyan Notes}:\n${'.'.repeat(indent.length)}asshole\n`;
+
+  const noteIndent = `${indent}  `;
+  const noteLines = notes.map((note) => `${noteIndent}${chalk.dim(note)}`).join('\n');
+
+  return `\n${indent}${chalk.cyan('Notes')}:\n${noteLines}`;
 };
 
 const formatIssue = (group: IssueGroup): string => {
@@ -129,7 +138,11 @@ export const command: CommandFn = async (argv: CheckOptions, input) => {
   log(chalkTmpl`{blue Checking email template for Client Compatibility...}\n`);
 
   const [file] = await buildTemplates({
-    buildOptions: { showStats: false, writeToFile: false },
+    buildOptions: {
+      showStats: false,
+      usePreviewProps: argv.usePreviewProps,
+      writeToFile: false
+    },
     targetPath: input[0]
   });
 
diff --git a/packages/jsx-email/src/cli/commands/preview.ts b/packages/jsx-email/src/cli/commands/preview.ts
index 1655ddea..8a6c61fb 100644
--- a/packages/jsx-email/src/cli/commands/preview.ts
+++ b/packages/jsx-email/src/cli/commands/preview.ts
@@ -1,7 +1,9 @@
 /* eslint-disable no-use-before-define */
+import { AssertionError } from 'node:assert';
 import { existsSync } from 'node:fs';
 import { mkdir, rmdir } from 'node:fs/promises';
-import { join, resolve } from 'node:path';
+import os from 'node:os';
+import { isAbsolute, join, resolve, win32 } from 'node:path';
 
 import react from '@vitejs/plugin-react';
 import chalk from 'chalk-template';
@@ -11,7 +13,7 @@ import { parse as assert } from 'valibot';
 import { type InlineConfig, createServer, build as viteBuild } from 'vite';
 
 import { log } from '../../log.js';
-import { buildForPreview, writePreviewDataFiles } from '../helpers.js';
+import { buildForPreview, originalCwd, writePreviewDataFiles } from '../helpers.js';
 import { reloadPlugin } from '../vite-reload.js';
 import { staticPlugin } from '../vite-static.js';
 import { watch } from '../watcher.js';
@@ -37,7 +39,7 @@ Starts the preview server for a directory of email templates
   $ email preview <template dir path> [...options]
 
 {underline Options}
-  --build-path  An absolute path. When set, builds the preview as a deployable app and saves to disk
+  --build-path  When set, builds the preview as a deployable app and saves to disk
   --exclude     A micromatch glob pattern that specifies files to exclude from the preview
   --host        Allow thew preview server to listen on all addresses (0.0.0.0)
   --no-open     Do not open a browser tab when the preview server starts
@@ -45,6 +47,7 @@ Starts the preview server for a directory of email templates
 
 {underline Examples}
   $ email preview ./src/templates --port 55420
+  $ email preview ./src/templates --build-path ./.deploy
   $ email preview ./src/templates --build-path /tmp/email-preview
 `;
 
@@ -55,19 +58,19 @@ const buildDeployable = async ({ argv, targetPath }: PreviewCommonParams) => {
     );
   }
 
-  const { basePath = './', buildPath } = argv;
+  const { basePath = './', buildPath = './.deploy' } = argv;
   const common = { argv, targetPath };
   await prepareBuild(common);
   const config = await getConfig(common);
+  const outDir = isAbsolute(buildPath) ? buildPath : resolve(join(originalCwd, buildPath));
 
   await viteBuild({
     ...config,
     base: basePath,
     build: {
       minify: false,
-      outDir: buildPath,
+      outDir,
       rollupOptions: {
-        external: ['react/jsx-runtime'],
         output: {
           manualChunks: {}
         }
@@ -94,6 +97,22 @@ const getConfig = async ({ argv, targetPath }: PreviewCommonParams) => {
 
   log.debug(`Vite Root: ${root}`);
 
+  // On Windows, Vite's import.meta.glob cannot cross drive letters. If the
+  // preview app root and the temporary build directory are on different
+  // drives (e.g., D: vs C:), fail fast with a helpful error.
+  if (os.platform() === 'win32') {
+    const rootDrive = getDriveLetter(root);
+    const buildDrive = getDriveLetter(buildPath);
+    if (rootDrive && buildDrive && rootDrive !== buildDrive) {
+      log.error(
+        `jsx-email preview cannot run on Windows when the application root directory and the system temporary directory are on different drive letters. Please consider using WSL`
+      );
+      throw new AssertionError({
+        message: `Temporary directory drive letter different than root directory drive letter`
+      });
+    }
+  }
+
   newline();
   log.info(chalk`{blue Starting build...}`);
 
@@ -127,6 +146,11 @@ const getConfig = async ({ argv, targetPath }: PreviewCommonParams) => {
   return config;
 };
 
+const getDriveLetter = (path: string) => {
+  if (os.platform() !== 'win32') return null;
+  return win32.parse(path).root.slice(0, 2).toUpperCase();
+};
+
 const prepareBuild = async ({ targetPath, argv }: PreviewCommonParams) => {
   const buildPath = await getTempPath('preview');
   const { exclude } = argv;
diff --git a/packages/jsx-email/src/cli/vite-static.ts b/packages/jsx-email/src/cli/vite-static.ts
index bb0ff288..81bd0c46 100644
--- a/packages/jsx-email/src/cli/vite-static.ts
+++ b/packages/jsx-email/src/cli/vite-static.ts
@@ -3,7 +3,7 @@ import { extname } from 'node:path';
 
 import { globby } from 'globby';
 import mime from 'mime-types';
-import type { PluginOption, ViteDevServer } from 'vite';
+import { type PluginOption, type ViteDevServer, normalizePath } from 'vite';
 
 interface ViteStaticOptions {
   paths: string[];
@@ -50,7 +50,7 @@ interface MiddlwareParams {
 const middleware = async (params: MiddlwareParams) => {
   const { options, server } = params;
   const { paths } = options;
-  const files = await globby(paths);
+  const files = await globby(paths.map((path) => normalizePath(path)));
 
   return () => {
     server.middlewares.use(async (req, res, next) => {
diff --git a/packages/jsx-email/src/components/conditional.tsx b/packages/jsx-email/src/components/conditional.tsx
index 8c039076..09ad88cd 100644
--- a/packages/jsx-email/src/components/conditional.tsx
+++ b/packages/jsx-email/src/components/conditional.tsx
@@ -1,9 +1,23 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 
-import { jsxToString } from '../renderer/jsx-to-string.js';
-import { useData } from '../renderer/suspense.js';
 import type { JsxEmailComponent } from '../types.js';
 
+declare module 'react/jsx-runtime' {
+  namespace JSX {
+    interface IntrinsicElements {
+      // @ts-ignore
+      'jsx-email-cond': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement> & {
+          'data-expression'?: string;
+          'data-head'?: boolean;
+          'data-mso'?: boolean;
+        },
+        HTMLElement
+      >;
+    }
+  }
+}
+
 export interface ConditionalProps {
   children?: React.ReactNode;
   expression?: string;
@@ -11,29 +25,8 @@ export interface ConditionalProps {
   mso?: boolean;
 }
 
-const notMso = (html: string) => `<!--[if !mso]><!-->${html}<!--<![endif]-->`;
-
-const comment = (expression: string, html: string) => `<!--[if ${expression}]>${html}<![endif]-->`;
-
-const Renderer = (props: ConditionalProps) => {
-  const { children, mso, head } = props;
-  let { expression } = props;
-  const html = useData(props, () => jsxToString(<>{children}</>));
-  let innerHtml = '';
-
-  if (mso === false) innerHtml = notMso(html);
-  else if (mso === true && !expression) expression = 'mso';
-  if (expression) innerHtml = comment(expression, html);
-
-  const Component = head ? 'head' : 'jsx-email-cond';
-
-  // @ts-ignore
-  // Note: This is perfectly valid. TS just expects lowercase tag names to match a specific type
-  return <Component dangerouslySetInnerHTML={{ __html: innerHtml }} />;
-};
-
 export const Conditional: JsxEmailComponent<ConditionalProps> = (props) => {
-  const { children, expression, mso } = props;
+  const { children, expression, mso, head } = props;
 
   if (typeof expression === 'undefined' && typeof mso === 'undefined')
     throw new RangeError(
@@ -45,12 +38,13 @@ export const Conditional: JsxEmailComponent<ConditionalProps> = (props) => {
       'jsx-email: Conditional expects the `expression` or `mso` prop to be defined, not both'
     );
 
+  // Always render a JSX custom element with data-* markers.
+  // A rehype plugin will replace this element with proper conditional comments.
+  // @ts-ignore - lower-case custom element tag is valid
   return (
-    <>
-      <Suspense fallback={<div>waiting</div>}>
-        <Renderer {...props}>{children}</Renderer>
-      </Suspense>
-    </>
+    <jsx-email-cond data-mso={mso} data-expression={expression} data-head={head}>
+      {children}
+    </jsx-email-cond>
   );
 };
 
diff --git a/packages/jsx-email/src/components/head.tsx b/packages/jsx-email/src/components/head.tsx
index ff249d03..ca78a26d 100644
--- a/packages/jsx-email/src/components/head.tsx
+++ b/packages/jsx-email/src/components/head.tsx
@@ -1,7 +1,8 @@
-import type { BaseProps, JsxEmailComponent } from '../types.js';
 import { debug } from '../debug.js';
+import type { BaseProps, JsxEmailComponent } from '../types.js';
 
 import { Conditional } from './conditional.js';
+import { Raw } from './raw.js';
 
 export interface HeadProps extends BaseProps<'head'> {
   enableFormatDetection?: boolean;
@@ -27,15 +28,9 @@ export const Head: JsxEmailComponent<HeadProps> = ({
       <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
     )}
     {children}
-    <Conditional
-      head
-      mso
-      children={
-        // prettier-ignore
-        // @ts-expect-error: element don't exist
-        <xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
-      }
-    />
+    <Conditional head mso>
+      <Raw content="<xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>" />
+    </Conditional>
   </head>
 );
 
diff --git a/packages/jsx-email/src/renderer/compile.ts b/packages/jsx-email/src/renderer/compile.ts
index 10b2b35e..2aaa5814 100644
--- a/packages/jsx-email/src/renderer/compile.ts
+++ b/packages/jsx-email/src/renderer/compile.ts
@@ -78,7 +78,7 @@ export const compile = async (options: CompileOptions): Promise<CompileResult[]>
       if (!entryPoint) return null;
       return {
         entryPoint,
-        path: resolve('/', path)
+        path: resolve(originalCwd, path)
       };
     })
     .filter<CompileResult>(Boolean as any);
diff --git a/packages/jsx-email/src/renderer/conditional.ts b/packages/jsx-email/src/renderer/conditional.ts
new file mode 100644
index 00000000..5fc78bbc
--- /dev/null
+++ b/packages/jsx-email/src/renderer/conditional.ts
@@ -0,0 +1,106 @@
+import type { Content, Element, Literal, Parents, Root } from 'hast';
+
+// dynamic import of 'unist-util-visit' within factory to support CJS build
+
+interface Match {
+  index: number;
+  node: Element;
+  parent: Parents;
+}
+
+// `raw` is an unofficial HAST node used by rehype to pass through HTML verbatim.
+// Model it locally to avoid `any` casts while keeping the rest of the tree typed.
+interface Raw extends Literal {
+  type: 'raw';
+  value: string;
+}
+
+interface ParentWithRaw {
+  children: (Content | Raw)[];
+}
+
+/**
+ * Returns a rehype plugin that replaces `<jsx-email-cond>` elements (from
+ * the Conditional component) with conditional comment wrappers, based on the
+ * `data-mso` and `data-expression` attributes.
+ *
+ * Mirrors the async factory pattern used by `getRawPlugin()`.
+ */
+export const getConditionalPlugin = async () => {
+  const { visit } = await import('unist-util-visit');
+
+  return function conditionalPlugin() {
+    return function transform(tree: Root) {
+      const matches: Match[] = [];
+      let headEl: Element | undefined;
+
+      visit(tree, 'element', (node, index, parent) => {
+        if (node.tagName === 'head') headEl = node;
+
+        if (!parent || typeof index !== 'number') return;
+        if (node.tagName !== 'jsx-email-cond') return;
+
+        matches.push({ index, node, parent });
+      });
+
+      for (const { node, parent, index } of matches) {
+        const props = (node.properties || {}) as Record<string, unknown>;
+        const msoProp = (props['data-mso'] ?? (props as any).dataMso) as unknown;
+        const msoAttr =
+          typeof msoProp === 'undefined' ? void 0 : msoProp === 'false' ? false : Boolean(msoProp);
+        const exprRaw = (props['data-expression'] ?? (props as any).dataExpression) as unknown;
+        const exprAttr = typeof exprRaw === 'string' ? exprRaw : void 0;
+        const headProp = (props['data-head'] ?? (props as any).dataHead) as unknown;
+        const toHead =
+          typeof headProp === 'undefined'
+            ? false
+            : headProp === 'false'
+              ? false
+              : Boolean(headProp);
+
+        let openRaw: string | undefined;
+        let closeRaw: string | undefined;
+
+        if (msoAttr === false) {
+          // Not MSO: <!--[if !mso]><!--> ... <!--<![endif]-->
+          openRaw = '<!--[if !mso]><!-->';
+          closeRaw = '<!--<![endif]-->';
+        } else {
+          // MSO / expression path
+          const expression = exprAttr || (msoAttr === true ? 'mso' : void 0);
+          if (expression) {
+            openRaw = `<!--[if ${expression}]>`;
+            // Older Outlook/Word HTML parsers prefer the self-closing
+            // conditional terminator variant to avoid comment spillover
+            // when adjacent comments appear. Use the `<![endif]/-->` form
+            // for maximum compatibility.
+            closeRaw = '<![endif]/-->';
+          }
+        }
+
+        // If no directive attributes present, leave the element in place.
+        // eslint-disable-next-line no-continue
+        if (!openRaw || !closeRaw) continue;
+
+        const before: Raw = { type: 'raw', value: openRaw };
+        const after: Raw = { type: 'raw', value: closeRaw };
+        const children = (node.children || []) as Content[];
+
+        if (toHead && headEl) {
+          if (parent === headEl) {
+            // Replace in place: open raw, original children, close raw.
+            (parent as ParentWithRaw).children.splice(index, 1, before, ...children, after);
+          } else {
+            // Remove wrapper from current location
+            (parent as ParentWithRaw).children.splice(index, 1);
+            // Append the conditional to the <head>
+            (headEl as unknown as ParentWithRaw).children.push(before, ...children, after);
+          }
+        } else {
+          // Replace in place: open raw, original children, close raw.
+          (parent as ParentWithRaw).children.splice(index, 1, before, ...children, after);
+        }
+      }
+    };
+  };
+};
diff --git a/packages/jsx-email/src/renderer/raw.ts b/packages/jsx-email/src/renderer/raw.ts
index 7721c226..a10eb6ad 100644
--- a/packages/jsx-email/src/renderer/raw.ts
+++ b/packages/jsx-email/src/renderer/raw.ts
@@ -1,3 +1,22 @@
+import type { Comment, Content, Element, Literal, Parents, Root } from 'hast';
+
+interface Match {
+  index: number;
+  node: Element;
+  parent: Parents;
+}
+
+interface ParentWithRaw {
+  children: (Content | Raw)[];
+}
+
+// `raw` is an unofficial HAST node used by rehype to pass through HTML verbatim.
+// Model it locally to avoid `any` casts while keeping the rest of the tree typed.
+interface Raw extends Literal {
+  type: 'raw';
+  value: string;
+}
+
 const START_TAG = '__COMMENT_START';
 const END_TAG = '__COMMENT_END';
 export function escapeForRawComponent(input: string): string {
@@ -10,3 +29,41 @@ export function unescapeForRawComponent(input: string): string {
     .replace(new RegExp(START_TAG, 'g'), '<!--')
     .replace(new RegExp(END_TAG, 'g'), '/-->');
 }
+
+/**
+ * Returns a rehype plugin that replaces `<jsx-email-raw><!--...--></jsx-email-raw>`
+ * elements with a raw HTML node using the original, unescaped content.
+ *
+ * Mirrors the async factory pattern used by `getMovePlugin()`.
+ */
+export const getRawPlugin = async () => {
+  const { visit } = await import('unist-util-visit');
+
+  return function rawPlugin() {
+    return function transform(tree: Root) {
+      const matches: Match[] = [];
+
+      visit(tree, 'element', (node, index, parent) => {
+        if (!parent || typeof index !== 'number') return;
+        if (node.tagName !== 'jsx-email-raw') return;
+
+        matches.push({ index, node: node as Element, parent });
+      });
+
+      for (const { node, parent, index } of matches) {
+        // The Raw component renders a single HTML comment child containing the
+        // escaped raw content. Extract it and unescape back to the original.
+        const commentChild = node.children.find((c): c is Comment => c.type === 'comment');
+
+        if (commentChild) {
+          const rawHtml = unescapeForRawComponent(commentChild.value);
+
+          // Replace the wrapper element with a `raw` node to inject HTML verbatim.
+          // rehype-stringify will pass this through when `allowDangerousHtml: true`.
+          const rawNode: Raw = { type: 'raw', value: rawHtml };
+          (parent as ParentWithRaw).children.splice(index, 1, rawNode);
+        }
+      }
+    };
+  };
+};
diff --git a/packages/jsx-email/src/renderer/render.ts b/packages/jsx-email/src/renderer/render.ts
index a5229b8d..69a6f06b 100644
--- a/packages/jsx-email/src/renderer/render.ts
+++ b/packages/jsx-email/src/renderer/render.ts
@@ -1,14 +1,13 @@
 import { htmlToText } from 'html-to-text';
-import { rehype } from 'rehype';
-import stringify from 'rehype-stringify';
 
 import { type JsxEmailConfig, defineConfig, loadConfig, mergeConfig } from '../config.js';
 import { callHook, callProcessHook } from '../plugins.js';
 import type { PlainTextOptions, RenderOptions } from '../types.js';
 
+import { getConditionalPlugin } from './conditional.js';
 import { jsxToString } from './jsx-to-string.js';
 import { getMovePlugin } from './move-style.js';
-import { unescapeForRawComponent } from './raw.js';
+import { getRawPlugin, unescapeForRawComponent } from './raw.js';
 
 export const jsxEmailTags = ['jsx-email-cond'];
 
@@ -71,16 +70,24 @@ export const render = async (component: React.ReactElement, options?: RenderOpti
 };
 
 const processHtml = async (config: JsxEmailConfig, html: string) => {
+  const { rehype } = await import('rehype');
+  const { default: stringify } = await import('rehype-stringify');
   const docType =
     '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
   const movePlugin = await getMovePlugin();
+  const rawPlugin = await getRawPlugin();
+  const conditionalPlugin = await getConditionalPlugin();
   const settings = { emitParseErrors: true };
-  const reJsxTags = new RegExp(`<[/]?(${jsxEmailTags.join('|')})>`, 'g');
+  // Remove any stray jsx-email markers (with or without attributes)
+  const reJsxTags = new RegExp(`<[/]?(${jsxEmailTags.join('|')})(?:\\s[^>]*)?>`, 'g');
 
   // @ts-ignore: This is perfectly valid, see here: https://www.npmjs.com/package/rehype#examples
   const processor = rehype().data('settings', settings);
 
   processor.use(movePlugin);
+  processor.use(rawPlugin);
+  // Ensure conditional processing happens after raw hoisting
+  processor.use(conditionalPlugin);
   await callProcessHook({ config, processor });
 
   const doc = await processor
@@ -95,9 +102,6 @@ const processHtml = async (config: JsxEmailConfig, html: string) => {
   let result = docType + String(doc).replace('<!doctype html>', '').replace('<head></head>', '');
 
   result = result.replace(reJsxTags, '');
-  result = result.replace(/<jsx-email-raw.*?><!--(.*?)--><\/jsx-email-raw>/g, (_, p1) =>
-    unescapeForRawComponent(p1)
-  );
 
   return result;
 };
diff --git a/packages/jsx-email/test/.snapshots/conditional-raw.test.tsx.snap b/packages/jsx-email/test/.snapshots/conditional-raw.test.tsx.snap
new file mode 100644
index 00000000..b8722635
--- /dev/null
+++ b/packages/jsx-email/test/.snapshots/conditional-raw.test.tsx.snap
@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Raw in Conditional > Raw in Conditional 1`] = `"<jsx-email-cond data-mso="true" data-head="true"><jsx-email-raw><!--<xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>--></jsx-email-raw></jsx-email-cond>"`;
+
+exports[`Raw in Conditional > Raw in Conditional 2`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/--></head><body></body></html>"`;
diff --git a/packages/jsx-email/test/.snapshots/conditional.test.tsx.snap b/packages/jsx-email/test/.snapshots/conditional.test.tsx.snap
index f15449d5..b36a58ae 100644
--- a/packages/jsx-email/test/.snapshots/conditional.test.tsx.snap
+++ b/packages/jsx-email/test/.snapshots/conditional.test.tsx.snap
@@ -1,14 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<Conditional> component > renders expression 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><!--[if lt batman]><h1>joker</h1><![endif]--></body></html>"`;
+exports[`<Conditional> component > renders expression 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><!--[if lt batman]><h1>joker</h1><![endif]/--></body></html>"`;
 
 exports[`<Conditional> component > renders mso: false 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><!--[if !mso]><!--><h1>batman</h1><!--<![endif]--></body></html>"`;
 
-exports[`<Conditional> component > renders mso: true 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><!--[if mso]><h1>batman</h1><![endif]--></body></html>"`;
+exports[`<Conditional> component > renders mso: true 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><!--[if mso]><h1>batman</h1><![endif]/--></body></html>"`;
 
-exports[`<Conditional> component > renders with head: true 1`] = `"<head><!--[if mso]><h1>batman</h1><![endif]--></head>"`;
+exports[`<Conditional> component > renders with head: true 1`] = `"<jsx-email-cond data-mso="true" data-head="true"><h1>batman</h1></jsx-email-cond>"`;
 
-exports[`<Conditional> component > renders with jsxToString 1`] = `"<jsx-email-cond><!--[if mso]><h1>batman</h1><![endif]--></jsx-email-cond>"`;
+exports[`<Conditional> component > renders with jsxToString 1`] = `"<jsx-email-cond data-mso="true"><h1>batman</h1></jsx-email-cond>"`;
 
 exports[`<Conditional> component > throws on bad props 1`] = `[RangeError: jsx-email: Conditional expects the \`expression\` or \`mso\` prop to be defined]`;
 
diff --git a/packages/jsx-email/test/.snapshots/debug.test.tsx.snap b/packages/jsx-email/test/.snapshots/debug.test.tsx.snap
index eab541a1..fb89dce3 100644
--- a/packages/jsx-email/test/.snapshots/debug.test.tsx.snap
+++ b/packages/jsx-email/test/.snapshots/debug.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`render > renders with debug attributes 1`] = `
     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
     <meta name="x-apple-disable-message-reformatting">
-    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/-->
   </head>
 
   <body data-type="jsx-email/body" style="background-color:#ffffff;font-family:HelveticaNeue,Helvetica,Arial,sans-serif">
diff --git a/packages/jsx-email/test/.snapshots/head.test.tsx.snap b/packages/jsx-email/test/.snapshots/head.test.tsx.snap
index 05fd0bfb..0068ffdd 100644
--- a/packages/jsx-email/test/.snapshots/head.test.tsx.snap
+++ b/packages/jsx-email/test/.snapshots/head.test.tsx.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<Head> component > renders correctly 1`] = `"<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><head><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--></head></head>"`;
+exports[`<Head> component > renders correctly 1`] = `"<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><jsx-email-cond data-mso="true" data-head="true"><jsx-email-raw><!--<xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>--></jsx-email-raw></jsx-email-cond></head>"`;
 
 exports[`<Head> component > renders style tags 1`] = `
 "<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><style>body{
             color: red;
-          }</style><head><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--></head></head>"
+          }</style><jsx-email-cond data-mso="true" data-head="true"><jsx-email-raw><!--<xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>--></jsx-email-raw></jsx-email-cond></head>"
 `;
diff --git a/packages/jsx-email/test/.snapshots/raw.test.tsx.snap b/packages/jsx-email/test/.snapshots/raw.test.tsx.snap
index 6f49ea9b..d7195d31 100644
--- a/packages/jsx-email/test/.snapshots/raw.test.tsx.snap
+++ b/packages/jsx-email/test/.snapshots/raw.test.tsx.snap
@@ -4,6 +4,12 @@ exports[`<Raw> component > Should preserve content on plainText render 1`] = `"<
 
 exports[`<Raw> component > Should render without escaping 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><#if firstname & lastname>Ola!</#if></body></html>"`;
 
+exports[`<Raw> component > Should work correctly when it has linebreaks 1`] = `
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body>
+            Raw context
+        </body></html>"
+`;
+
 exports[`<Raw> component > Should work correctly with a comment as a content 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><!--[if !mso]><!-->Ola!<!--<![endif]/--></body></html>"`;
 
 exports[`<Raw> component > disablePlainTextOutput > Should not output to the plain text when enabled 1`] = `"Ola!"`;
diff --git a/packages/jsx-email/test/conditional-endif-closer.test.tsx b/packages/jsx-email/test/conditional-endif-closer.test.tsx
new file mode 100644
index 00000000..ff98b18a
--- /dev/null
+++ b/packages/jsx-email/test/conditional-endif-closer.test.tsx
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+
+// Import from source to keep tests hermetic and avoid prebuild coupling
+import { Conditional, Raw, render } from '../src/index.ts';
+
+describe('<Conditional mso> closer', () => {
+  it('emits a self-closing MSO closer `<![endif]/-->`', async () => {
+    const html = await render(
+      <Conditional mso>
+        <Raw content={'<b data-testid="closer">hi</b>'} />
+      </Conditional>
+    );
+
+    expect(html).toContain('<![endif]/-->' /* Outlook-friendly closer */);
+    expect(html).not.toContain('<![endif]-->' /* slashless closer */);
+    expect(html).not.toContain('<!--[endif]---->' /* previously corrupted closer */);
+    // Robustness: ensure the closer appears exactly once
+    expect((html.match(/<!\[endif\]\/-->/g) || []).length).toBe(1);
+  });
+});
diff --git a/packages/jsx-email/test/conditional-raw-nodup.test.tsx b/packages/jsx-email/test/conditional-raw-nodup.test.tsx
new file mode 100644
index 00000000..fe6b0d2c
--- /dev/null
+++ b/packages/jsx-email/test/conditional-raw-nodup.test.tsx
@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+
+// Import from source to keep tests hermetic and avoid prebuild coupling
+import { Conditional, Raw, render } from '../src/index.ts';
+
+function count(haystack: string, needle: string) {
+  // Prevent hangs on empty needle
+  if (needle.length === 0) return 0;
+  // Avoid regex escaping pitfalls by scanning linearly
+  let i = 0;
+  let c = 0;
+  for (let at = haystack.indexOf(needle, i); at !== -1; at = haystack.indexOf(needle, i)) {
+    c += 1;
+    i = at + needle.length;
+  }
+  return c;
+}
+
+describe('Conditional + Raw – no duplication', () => {
+  it('renders the inner Raw block exactly once inside a single MSO conditional', async () => {
+    const table = [
+      '<table role="presentation" id="msoTableTest" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0">',
+      '<tbody><tr><td><b data-testid="unique">hello</b></td></tr></tbody>',
+      '</table>'
+    ].join('');
+
+    const html = await render(
+      <Conditional mso>
+        <Raw content={table} />
+      </Conditional>
+    );
+
+    // Exactly one conditional block, one closer, and one copy of the inner table
+    const opener = '<!--[if mso]>';
+    const closer = '<![endif]/-->';
+    expect(count(html, opener)).toBe(1);
+    expect(count(html, closer)).toBe(1);
+    expect(count(html, 'id="msoTableTest"')).toBe(1);
+    expect(count(html, 'data-testid="unique"')).toBe(1);
+
+    // Sanity: should not contain an unguarded duplicate of the table before/after the block
+    const firstIdx = html.indexOf(opener);
+    const lastIdx = html.lastIndexOf(closer);
+    expect(firstIdx).toBeGreaterThanOrEqual(0);
+    expect(lastIdx).toBeGreaterThan(firstIdx);
+
+    const before = html.slice(0, firstIdx);
+    const after = html.slice(lastIdx + closer.length);
+    expect(before).not.toContain('id="msoTableTest"');
+    expect(after).not.toContain('id="msoTableTest"');
+  });
+});
diff --git a/packages/jsx-email/test/conditional-raw.test.tsx b/packages/jsx-email/test/conditional-raw.test.tsx
new file mode 100644
index 00000000..4cf2819c
--- /dev/null
+++ b/packages/jsx-email/test/conditional-raw.test.tsx
@@ -0,0 +1,24 @@
+/**
+ * Note: Parts of this file are derived from [Hyperons](https://github.com/i-like-robots/hyperons).
+ * @license MIT
+ */
+import { Conditional, Raw, render } from '../dist/index.js';
+import { jsxToString } from '../src/renderer/jsx-to-string.js';
+
+const Template = () => (
+  <>
+    <Conditional head mso>
+      <Raw content="<xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>" />
+    </Conditional>
+  </>
+);
+
+describe('Raw in Conditional', async () => {
+  it('Raw in Conditional', async () => {
+    const htmlRes = await jsxToString(<Template />);
+    expect(htmlRes).toMatchSnapshot();
+
+    const renderRes = await render(<Template />);
+    expect(renderRes).toMatchSnapshot();
+  });
+});
diff --git a/packages/jsx-email/test/config/define-config.test.ts b/packages/jsx-email/test/config/define-config.test.ts
index 7974cf44..5f6c6660 100644
--- a/packages/jsx-email/test/config/define-config.test.ts
+++ b/packages/jsx-email/test/config/define-config.test.ts
@@ -1,12 +1,40 @@
-import { defineConfig } from '../../src/config.js';
-import { pluginSymbol } from '../../src/plugins.js';
+import { createRequire } from 'node:module';
+import { dirname } from 'node:path';
+
+import loglevelnext from 'loglevelnext';
+
+const require = createRequire(import.meta.url);
 
 describe('defineConfig', async () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.resetModules();
+
+    process.env.FORCE_COLOR = '1';
+
+    const dotLogPath = require.resolve('@dot/log');
+    const chalkPath = require.resolve('chalk', { paths: [dirname(dotLogPath)] });
+
+    delete require.cache[dotLogPath];
+    delete require.cache[chalkPath];
+    require(chalkPath).level = 1;
+
+    delete (globalThis as any)[Symbol.for('jsx-email/global/config')];
+    delete process.env.DOT_LOG_LEVEL;
+
+    for (const key of Object.keys(loglevelnext.loggers)) {
+      if (key === 'default') continue;
+      delete loglevelnext.loggers[key];
+    }
+  });
+
   test('defaults', async () => {
+    const { defineConfig } = await import('../../src/config.js');
     expect(await defineConfig({})).toMatchSnapshot();
   });
 
   test('basic set', async () => {
+    const { defineConfig } = await import('../../src/config.js');
     const config = await defineConfig({
       render: {
         minify: true
@@ -16,6 +44,7 @@ describe('defineConfig', async () => {
   });
 
   test('minify and pretty', async () => {
+    const { defineConfig } = await import('../../src/config.js');
     const config = await defineConfig({
       render: {
         minify: true,
@@ -26,6 +55,7 @@ describe('defineConfig', async () => {
   });
 
   test('plain', async () => {
+    const { defineConfig } = await import('../../src/config.js');
     const config = await defineConfig({
       render: {
         minify: true,
@@ -37,6 +67,8 @@ describe('defineConfig', async () => {
   });
 
   test('de-dupe plugins', async () => {
+    const { defineConfig } = await import('../../src/config.js');
+    const { pluginSymbol } = await import('../../src/plugins.js');
     const plugin = { name: 'batman', symbol: pluginSymbol };
     const config = await defineConfig({
       plugins: [plugin as any, plugin]
diff --git a/packages/jsx-email/test/config/load/dotdir/load-dotdir.test.ts b/packages/jsx-email/test/config/load/dotdir/load-dotdir.test.ts
index b3313eb3..8b77ab3c 100644
--- a/packages/jsx-email/test/config/load/dotdir/load-dotdir.test.ts
+++ b/packages/jsx-email/test/config/load/dotdir/load-dotdir.test.ts
@@ -1,7 +1,35 @@
-import { loadConfig } from '../../../../src/config.js';
+import { createRequire } from 'node:module';
+import { dirname } from 'node:path';
+
+import loglevelnext from 'loglevelnext';
+
+const require = createRequire(import.meta.url);
 
 describe('loadConfig → dotdir', async () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.resetModules();
+
+    process.env.FORCE_COLOR = '1';
+
+    const dotLogPath = require.resolve('@dot/log');
+    const chalkPath = require.resolve('chalk', { paths: [dirname(dotLogPath)] });
+
+    delete require.cache[dotLogPath];
+    delete require.cache[chalkPath];
+    require(chalkPath).level = 1;
+
+    delete (globalThis as any)[Symbol.for('jsx-email/global/config')];
+    delete process.env.DOT_LOG_LEVEL;
+
+    for (const key of Object.keys(loglevelnext.loggers)) {
+      if (key === 'default') continue;
+      delete loglevelnext.loggers[key];
+    }
+  });
+
   test('loadConfig', async () => {
+    const { loadConfig } = await import('../../../../src/config.js');
     const config = await loadConfig(__dirname);
     expect(config).toMatchSnapshot();
   });
diff --git a/packages/jsx-email/test/config/load/mjs-json/load-mjs-json.test.ts b/packages/jsx-email/test/config/load/mjs-json/load-mjs-json.test.ts
index 4c3e4c38..7dc3bf40 100644
--- a/packages/jsx-email/test/config/load/mjs-json/load-mjs-json.test.ts
+++ b/packages/jsx-email/test/config/load/mjs-json/load-mjs-json.test.ts
@@ -1,7 +1,35 @@
-import { loadConfig } from '../../../../src/config.js';
+import { createRequire } from 'node:module';
+import { dirname } from 'node:path';
+
+import loglevelnext from 'loglevelnext';
+
+const require = createRequire(import.meta.url);
 
 describe('loadConfig → mjs-json', async () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.resetModules();
+
+    process.env.FORCE_COLOR = '1';
+
+    const dotLogPath = require.resolve('@dot/log');
+    const chalkPath = require.resolve('chalk', { paths: [dirname(dotLogPath)] });
+
+    delete require.cache[dotLogPath];
+    delete require.cache[chalkPath];
+    require(chalkPath).level = 1;
+
+    delete (globalThis as any)[Symbol.for('jsx-email/global/config')];
+    delete process.env.DOT_LOG_LEVEL;
+
+    for (const key of Object.keys(loglevelnext.loggers)) {
+      if (key === 'default') continue;
+      delete loglevelnext.loggers[key];
+    }
+  });
+
   test('loadConfig', async () => {
+    const { loadConfig } = await import('../../../../src/config.js');
     const config = await loadConfig(__dirname);
     expect(config).toMatchSnapshot();
   });
diff --git a/packages/jsx-email/test/config/load/mjs/load-mjs.test.ts b/packages/jsx-email/test/config/load/mjs/load-mjs.test.ts
index 0f21ebed..fc3b76c4 100644
--- a/packages/jsx-email/test/config/load/mjs/load-mjs.test.ts
+++ b/packages/jsx-email/test/config/load/mjs/load-mjs.test.ts
@@ -1,7 +1,35 @@
-import { loadConfig } from '../../../../src/config.js';
+import { createRequire } from 'node:module';
+import { dirname } from 'node:path';
+
+import loglevelnext from 'loglevelnext';
+
+const require = createRequire(import.meta.url);
 
 describe('loadConfig → mjs', async () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.resetModules();
+
+    process.env.FORCE_COLOR = '1';
+
+    const dotLogPath = require.resolve('@dot/log');
+    const chalkPath = require.resolve('chalk', { paths: [dirname(dotLogPath)] });
+
+    delete require.cache[dotLogPath];
+    delete require.cache[chalkPath];
+    require(chalkPath).level = 1;
+
+    delete (globalThis as any)[Symbol.for('jsx-email/global/config')];
+    delete process.env.DOT_LOG_LEVEL;
+
+    for (const key of Object.keys(loglevelnext.loggers)) {
+      if (key === 'default') continue;
+      delete loglevelnext.loggers[key];
+    }
+  });
+
   test('loadConfig', async () => {
+    const { loadConfig } = await import('../../../../src/config.js');
     const config = await loadConfig(__dirname);
     expect(config).toMatchSnapshot();
   });
diff --git a/packages/jsx-email/test/config/load/parent-dir/child-dir/parent-dir.test.ts b/packages/jsx-email/test/config/load/parent-dir/child-dir/parent-dir.test.ts
index 9494007a..41798d4d 100644
--- a/packages/jsx-email/test/config/load/parent-dir/child-dir/parent-dir.test.ts
+++ b/packages/jsx-email/test/config/load/parent-dir/child-dir/parent-dir.test.ts
@@ -1,7 +1,35 @@
-import { loadConfig } from '../../../../../src/config.js';
+import { createRequire } from 'node:module';
+import { dirname } from 'node:path';
+
+import loglevelnext from 'loglevelnext';
+
+const require = createRequire(import.meta.url);
 
 describe('loadConfig → parent dir', async () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.resetModules();
+
+    process.env.FORCE_COLOR = '1';
+
+    const dotLogPath = require.resolve('@dot/log');
+    const chalkPath = require.resolve('chalk', { paths: [dirname(dotLogPath)] });
+
+    delete require.cache[dotLogPath];
+    delete require.cache[chalkPath];
+    require(chalkPath).level = 1;
+
+    delete (globalThis as any)[Symbol.for('jsx-email/global/config')];
+    delete process.env.DOT_LOG_LEVEL;
+
+    for (const key of Object.keys(loglevelnext.loggers)) {
+      if (key === 'default') continue;
+      delete loglevelnext.loggers[key];
+    }
+  });
+
   test('loadConfig', async () => {
+    const { loadConfig } = await import('../../../../../src/config.js');
     const config = await loadConfig(__dirname);
     expect(config).toBeDefined();
     expect(config).toMatchSnapshot();
diff --git a/packages/jsx-email/test/head.test.tsx b/packages/jsx-email/test/head.test.tsx
index 4589990e..a0ab7521 100644
--- a/packages/jsx-email/test/head.test.tsx
+++ b/packages/jsx-email/test/head.test.tsx
@@ -1,8 +1,8 @@
 // @ts-ignore
 import React from 'react';
 
-import { jsxToString } from '../src/renderer/jsx-to-string.js';
 import { Head } from '../src/index.js';
+import { jsxToString } from '../src/renderer/jsx-to-string.js';
 
 describe('<Head> component', async () => {
   beforeEach(() => {
@@ -46,10 +46,11 @@ describe('<Head> component', async () => {
     expect(html).toContain(testMessage);
   });
 
-  it('renders mso-conditional statement correctly', async () => {
-    const msoConditional =
-      '<!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->';
-    const html = await jsxToString(<Head enableFormatDetection />);
-    expect(html).toContain(msoConditional);
-  });
+  // Note: This test is moot with the changes to Conditional
+  // it('renders mso-conditional statement correctly', async () => {
+  //   const msoConditional =
+  //     '<!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->';
+  //   const html = await jsxToString(<Head enableFormatDetection />);
+  //   expect(html).toContain(msoConditional);
+  // });
 });
diff --git a/packages/jsx-email/test/raw.test.tsx b/packages/jsx-email/test/raw.test.tsx
index 4eea43f7..41c2a000 100644
--- a/packages/jsx-email/test/raw.test.tsx
+++ b/packages/jsx-email/test/raw.test.tsx
@@ -1,8 +1,8 @@
 // @ts-ignore
 import React from 'react';
 
-import { render } from '../src/renderer/render.js';
 import { Raw } from '../src/components/raw.js';
+import { render } from '../src/renderer/render.js';
 
 describe('<Raw> component', async () => {
   beforeEach(() => {
@@ -46,6 +46,19 @@ describe('<Raw> component', async () => {
     expect(actual).toMatchSnapshot();
   });
 
+  it('Should work correctly when it has linebreaks', async () => {
+    const actual = await render(
+      <>
+        <Raw
+          content={`
+            Raw context
+        `}
+        />
+      </>
+    );
+    expect(actual).toMatchSnapshot();
+  });
+
   describe('disablePlainTextOutput', () => {
     it('Should not output to the plain text when enabled', async () => {
       const actual = await render(
diff --git a/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap b/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap
index da9a9e0c..29588d1d 100644
--- a/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap
+++ b/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`render > inlining 1`] = `
     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
     <meta name="x-apple-disable-message-reformatting">
-    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/-->
   </head>
 
   <body style="margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,&#x22;Segoe UI&#x22;,Roboto,&#x22;Helvetica Neue&#x22;,Arial,&#x22;Noto Sans&#x22;,sans-serif,&#x22;Apple Color Emoji&#x22;,&#x22;Segoe UI Emoji&#x22;,&#x22;Segoe UI Symbol&#x22;,&#x22;Noto Color Emoji&#x22;;">
@@ -111,7 +111,7 @@ exports[`render > inlining 2`] = `
     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
     <meta name="x-apple-disable-message-reformatting">
-    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
     <style tailwind>
       /* layer: preflights */
       /* layer: default */
@@ -265,7 +265,7 @@ exports[`render > inlining 2`] = `
           }
         }
       }
-    </style>
+    </style><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/-->
   </head>
 
   <body class="mx-auto my-auto bg-white font-sans dark:bg-black">
@@ -338,7 +338,7 @@ exports[`render > inlining 2`] = `
 `;
 
 exports[`render > renders the airbnb demo template 1`] = `
-"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--></head><body style="background-color:#ffffff;font-family:-apple-system,BlinkMacSystemFont,&#x22;Segoe UI&#x22;,Roboto,Oxygen-Sans,Ubuntu,Cantarell,&#x22;Helvetica Neue&#x22;,sans-serif"><div data-skip="true" style="display:none;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden">Read undefined's review<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table align="center" width="100%" style="background-color:#ffffff;font-family:-apple-system,BlinkMacSystemFont,&#x22;Segoe UI&#x22;,Roboto,Oxygen-Sans,Ubuntu,Cantarell,&#x22;Helvetica Neue&#x22;,sans-serif" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><div style="table-layout:fixed;width:100%"><div style="margin:0 auto;max-width:600px"><span><!--[if mso]><table align="center" width="600" style="border-spacing: 0; width:600px;" role="presentation"><tr><td><![endif]--></span><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;margin:0 auto;padding:20px 0 48px;width:580px"><tbody><tr style="width:100%"><td align="center"><table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><img alt="Airbnb" src="https://jsx.email/assets/demo/airbnb-logo.png" width="96" height="30" style="border:none;display:block;outline:none;text-decoration:none"></td></tr></tbody></table><table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><img width="96" height="96" style="border:none;display:block;outline:none;text-decoration:none;margin:0 auto;margin-bottom:16px;border-radius:50%"></td></tr></tbody></table><table align="center" width="100%" style="padding-bottom:20px" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><p style="font-size:32px;line-height:1.3;margin:16px 0;font-weight:700;color:#484848">Here's what  wrote</p><p style="font-size:18px;line-height:1.4;margin:16px 0;color:#484848;padding:24px;background-color:#f2f3f3;border-radius:4px"></p><p style="font-size:18px;line-height:1.4;margin:16px 0;color:#484848">Now that the review period is over, we’ve posted ’s review to your Airbnb profile.</p><p style="font-size:18px;line-height:1.4;margin:16px 0;color:#484848;padding-bottom:16px">While it’s too late to write a review of your own, you can send your feedback to  using your Airbnb message thread.</p><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody style="width:100%"><tr style="width:100%"></tr></tbody></table><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse" role="presentation"><tbody><tr><td align="center"><span><!--[if mso]>
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/--></head><body style="background-color:#ffffff;font-family:-apple-system,BlinkMacSystemFont,&#x22;Segoe UI&#x22;,Roboto,Oxygen-Sans,Ubuntu,Cantarell,&#x22;Helvetica Neue&#x22;,sans-serif"><div data-skip="true" style="display:none;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden">Read undefined's review<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table align="center" width="100%" style="background-color:#ffffff;font-family:-apple-system,BlinkMacSystemFont,&#x22;Segoe UI&#x22;,Roboto,Oxygen-Sans,Ubuntu,Cantarell,&#x22;Helvetica Neue&#x22;,sans-serif" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><div style="table-layout:fixed;width:100%"><div style="margin:0 auto;max-width:600px"><span><!--[if mso]><table align="center" width="600" style="border-spacing: 0; width:600px;" role="presentation"><tr><td><![endif]--></span><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;margin:0 auto;padding:20px 0 48px;width:580px"><tbody><tr style="width:100%"><td align="center"><table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><img alt="Airbnb" src="https://jsx.email/assets/demo/airbnb-logo.png" width="96" height="30" style="border:none;display:block;outline:none;text-decoration:none"></td></tr></tbody></table><table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><img width="96" height="96" style="border:none;display:block;outline:none;text-decoration:none;margin:0 auto;margin-bottom:16px;border-radius:50%"></td></tr></tbody></table><table align="center" width="100%" style="padding-bottom:20px" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><p style="font-size:32px;line-height:1.3;margin:16px 0;font-weight:700;color:#484848">Here's what  wrote</p><p style="font-size:18px;line-height:1.4;margin:16px 0;color:#484848;padding:24px;background-color:#f2f3f3;border-radius:4px"></p><p style="font-size:18px;line-height:1.4;margin:16px 0;color:#484848">Now that the review period is over, we’ve posted ’s review to your Airbnb profile.</p><p style="font-size:18px;line-height:1.4;margin:16px 0;color:#484848;padding-bottom:16px">While it’s too late to write a review of your own, you can send your feedback to  using your Airbnb message thread.</p><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody style="width:100%"><tr style="width:100%"></tr></tbody></table><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse" role="presentation"><tbody><tr><td align="center"><span><!--[if mso]>
             <v:roundrect href="https://airbnb.com/" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:60px;v-text-anchor:middle;width:300px;" arcsize="5%"  strokeweight="1px" fillcolor=#ff5a5f>
             <w:anchorlock/>
             <center style="font-size:18px;color:#fff;">
@@ -358,7 +358,7 @@ exports[`render > renders the airbnb demo template 2`] = `
     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
     <meta name="x-apple-disable-message-reformatting">
-    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/-->
   </head>
 
   <body style="background-color:#ffffff;font-family:-apple-system,BlinkMacSystemFont,&#x22;Segoe UI&#x22;,Roboto,Oxygen-Sans,Ubuntu,Cantarell,&#x22;Helvetica Neue&#x22;,sans-serif">
@@ -453,7 +453,7 @@ exports[`render > renders the airbnb demo template 2`] = `
 </html>"
 `;
 
-exports[`render > renders the plaid demo template 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--></head><body style="background-color:#ffffff;font-family:HelveticaNeue,Helvetica,Arial,sans-serif"><div style="table-layout:fixed;width:100%"><div style="margin:0 auto;max-width:600px"><span><!--[if mso]><table align="center" width="600" style="border-spacing: 0; width:600px;" role="presentation"><tr><td><![endif]--></span><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;background-color:#ffffff;border:1px solid #eee;border-radius:5px;box-shadow:0 5px 10px rgba(20,50,70,.2);margin-top:20px;width:360px;margin:0 auto;padding:68px 0 130px"><tbody><tr style="width:100%"><td align="center"><img alt="Plaid" src="https://jsx.email/assets/demo/plaid-logo.png" width="212" height="88" style="border:none;display:block;outline:none;text-decoration:none;margin:0 auto"><p style="font-size:11px;line-height:16px;margin:16px 8px 8px 8px;color:#0a85ea;font-weight:700;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;height:16px;letter-spacing:0;text-transform:uppercase;text-align:center">Verify Your Identity</p><h1 style="color:#000;display:inline-block;font-family:HelveticaNeue-Medium,Helvetica,Arial,sans-serif;font-size:20px;font-weight:500;line-height:24px;margin-bottom:0;margin-top:0;text-align:center">Enter the following code to finish linking Venmo.</h1><table align="center" width="100%" style="background:rgba(0,0,0,.05);border-radius:4px;margin:16px auto 14px;vertical-align:middle;width:280px" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><p style="font-size:32px;line-height:40px;margin:0 auto;color:#000;display:inline-block;font-family:HelveticaNeue-Bold;font-weight:700;letter-spacing:6px;padding-bottom:8px;padding-top:8px;width:100%;text-align:center"></p></td></tr></tbody></table><p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Not expecting this email?</p><p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Contact <a href="mailto:login@plaid.com" style="color:#444;text-decoration:underline">login@plaid.com</a> if you did not request this code.</p></td></tr></tbody></table><span><!--[if mso]></td></tr></table><![endif]--></span></div></div><p style="font-size:12px;line-height:23px;margin:0;color:#000;font-weight:800;letter-spacing:0;margin-top:20px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;text-align:center;text-transform:uppercase">Securely powered by Plaid.</p></body></html>"`;
+exports[`render > renders the plaid demo template 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/--></head><body style="background-color:#ffffff;font-family:HelveticaNeue,Helvetica,Arial,sans-serif"><div style="table-layout:fixed;width:100%"><div style="margin:0 auto;max-width:600px"><span><!--[if mso]><table align="center" width="600" style="border-spacing: 0; width:600px;" role="presentation"><tr><td><![endif]--></span><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;background-color:#ffffff;border:1px solid #eee;border-radius:5px;box-shadow:0 5px 10px rgba(20,50,70,.2);margin-top:20px;width:360px;margin:0 auto;padding:68px 0 130px"><tbody><tr style="width:100%"><td align="center"><img alt="Plaid" src="https://jsx.email/assets/demo/plaid-logo.png" width="212" height="88" style="border:none;display:block;outline:none;text-decoration:none;margin:0 auto"><p style="font-size:11px;line-height:16px;margin:16px 8px 8px 8px;color:#0a85ea;font-weight:700;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;height:16px;letter-spacing:0;text-transform:uppercase;text-align:center">Verify Your Identity</p><h1 style="color:#000;display:inline-block;font-family:HelveticaNeue-Medium,Helvetica,Arial,sans-serif;font-size:20px;font-weight:500;line-height:24px;margin-bottom:0;margin-top:0;text-align:center">Enter the following code to finish linking Venmo.</h1><table align="center" width="100%" style="background:rgba(0,0,0,.05);border-radius:4px;margin:16px auto 14px;vertical-align:middle;width:280px" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><p style="font-size:32px;line-height:40px;margin:0 auto;color:#000;display:inline-block;font-family:HelveticaNeue-Bold;font-weight:700;letter-spacing:6px;padding-bottom:8px;padding-top:8px;width:100%;text-align:center"></p></td></tr></tbody></table><p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Not expecting this email?</p><p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Contact <a href="mailto:login@plaid.com" style="color:#444;text-decoration:underline">login@plaid.com</a> if you did not request this code.</p></td></tr></tbody></table><span><!--[if mso]></td></tr></table><![endif]--></span></div></div><p style="font-size:12px;line-height:23px;margin:0;color:#000;font-weight:800;letter-spacing:0;margin-top:20px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;text-align:center;text-transform:uppercase">Securely powered by Plaid.</p></body></html>"`;
 
 exports[`render > renders the plaid demo template 2`] = `
 "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
@@ -466,7 +466,7 @@ exports[`render > renders the plaid demo template 2`] = `
     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
     <meta name="x-apple-disable-message-reformatting">
-    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/-->
   </head>
 
   <body style="background-color:#ffffff;font-family:HelveticaNeue,Helvetica,Arial,sans-serif">
@@ -502,7 +502,7 @@ exports[`render > renders the plaid demo template 2`] = `
 `;
 
 exports[`render > renders the vercel demo template 1`] = `
-"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><style tailwind>/* layer: preflights */
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><style tailwind>/* layer: preflights */
 /* layer: default */
 .mx-0{margin-left:0;margin-right:0;}
 .mx-auto{margin-left:auto;margin-right:auto;}
@@ -541,7 +541,7 @@ exports[`render > renders the vercel demo template 1`] = `
 .dark\\:bg-black{background-color:rgb(0,0,0);}
 @media (prefers-color-scheme: dark){
 .dark\\:bg-black{background-color:rgb(0,0,0);}}
-}</style></head><body class="mx-auto my-auto bg-white font-sans dark:bg-black"><div style="table-layout:fixed;width:100%"><div style="margin:0 auto;max-width:600px"><span><!--[if mso]><table align="center" width="600" style="border-spacing: 0; width:600px;" role="presentation"><tr><td><![endif]--></span><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" class="mx-auto my-[40px] w-[465px] border-separate rounded border border-solid border-[#eaeaea] p-[20px]" style="max-width:600px"><tbody><tr style="width:100%"><td align="center"><table align="center" width="100%" class="mt-[32px]" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><img class="mx-auto my-0" alt="Vercel" src="vercel-logo.png" width="40" height="37" style="border:none;display:block;outline:none;text-decoration:none"></td></tr></tbody></table><h1 class="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black" style>Join <strong></strong> on <strong>Vercel</strong></h1><p class="text-[14px] leading-[24px] text-black" style="font-size:14px;line-height:24px;margin:16px 0">Hello,</p><p class="text-[14px] leading-[24px] text-black" style="font-size:14px;line-height:24px;margin:16px 0"><strong></strong> (<a href="mailto:" class="text-blue-600 no-underline" style="color:#067df7;text-decoration:none"></a>) has invited you to the <strong></strong> team on <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody style="width:100%"><tr style="width:100%"><td align="right"><img class="rounded-full" src width="64" height="64" style="border:none;display:block;outline:none;text-decoration:none"></td><td align="center"><img alt="invited you to" src="vercel-arrow.png" width="12" height="9" style="border:none;display:block;outline:none;text-decoration:none"></td><td align="left"><img class="rounded-full" src width="64" height="64" style="border:none;display:block;outline:none;text-decoration:none"></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" class="mb-[32px] mt-[32px] text-center" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse" role="presentation"><tbody><tr><td align="left"><span><!--[if mso]>
+}</style><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/--></head><body class="mx-auto my-auto bg-white font-sans dark:bg-black"><div style="table-layout:fixed;width:100%"><div style="margin:0 auto;max-width:600px"><span><!--[if mso]><table align="center" width="600" style="border-spacing: 0; width:600px;" role="presentation"><tr><td><![endif]--></span><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" class="mx-auto my-[40px] w-[465px] border-separate rounded border border-solid border-[#eaeaea] p-[20px]" style="max-width:600px"><tbody><tr style="width:100%"><td align="center"><table align="center" width="100%" class="mt-[32px]" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><img class="mx-auto my-0" alt="Vercel" src="vercel-logo.png" width="40" height="37" style="border:none;display:block;outline:none;text-decoration:none"></td></tr></tbody></table><h1 class="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black" style>Join <strong></strong> on <strong>Vercel</strong></h1><p class="text-[14px] leading-[24px] text-black" style="font-size:14px;line-height:24px;margin:16px 0">Hello,</p><p class="text-[14px] leading-[24px] text-black" style="font-size:14px;line-height:24px;margin:16px 0"><strong></strong> (<a href="mailto:" class="text-blue-600 no-underline" style="color:#067df7;text-decoration:none"></a>) has invited you to the <strong></strong> team on <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody style="width:100%"><tr style="width:100%"><td align="right"><img class="rounded-full" src width="64" height="64" style="border:none;display:block;outline:none;text-decoration:none"></td><td align="center"><img alt="invited you to" src="vercel-arrow.png" width="12" height="9" style="border:none;display:block;outline:none;text-decoration:none"></td><td align="left"><img class="rounded-full" src width="64" height="64" style="border:none;display:block;outline:none;text-decoration:none"></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" class="mb-[32px] mt-[32px] text-center" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse" role="presentation"><tbody><tr><td align="left"><span><!--[if mso]>
             <v:roundrect href="https://example.com" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="8%"  strokeweight="1px" fillcolor=#000000>
             <w:anchorlock/>
             <center style="font-size:12px;color:#FFFFFF;">
@@ -561,7 +561,7 @@ exports[`render > renders the vercel demo template 2`] = `
     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
     <meta name="x-apple-disable-message-reformatting">
-    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
     <style tailwind>
       /* layer: preflights */
       /* layer: default */
@@ -715,7 +715,7 @@ exports[`render > renders the vercel demo template 2`] = `
           }
         }
       }
-    </style>
+    </style><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/-->
   </head>
 
   <body class="mx-auto my-auto bg-white font-sans dark:bg-black">
@@ -787,6 +787,6 @@ exports[`render > renders the vercel demo template 2`] = `
 </html>"
 `;
 
-exports[`render > renders with minifying 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr"lang="en"xmlns:o="urn:schemas-microsoft-com:office:office"xmlns:v="urn:schemas-microsoft-com:vml"><meta charset="utf8"><meta name="viewport"content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection"content="telephone=no, date=no, address=no, email=no, url=no"><meta name="viewport"content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection"content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><body style="background-color:#fff;font-family:HelveticaNeue,Helvetica,Arial,sans-serif"><div style="table-layout:fixed;width:100%"><div style="margin:0 auto;max-width:600px"><span><!--[if mso]><table align="center" width="600" style="border-spacing: 0; width:600px;" role="presentation"><tr><td><![endif]--></span><table align="center"border="0"cellpadding="0"cellspacing="0"role="presentation"style="max-width:600px;background-color:#fff;border:1px solid #eee;border-radius:5px;box-shadow:0 5px 10px rgba(20,50,70,.2);margin-top:20px;width:360px;margin:0 auto;padding:68px 0 130px"width="100%"><tr style="width:100%"><td align="center"><img alt="Plaid"height="88"src="https://jsx.email/assets/demo/plaid-logo.png"style="border:none;display:block;outline:0;text-decoration:none;margin:0 auto"width="212"><p style="font-size:11px;line-height:16px;margin:16px 8px 8px 8px;color:#0a85ea;font-weight:700;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;height:16px;letter-spacing:0;text-transform:uppercase;text-align:center">Verify Your Identity<h1 style="color:#000;display:inline-block;font-family:HelveticaNeue-Medium,Helvetica,Arial,sans-serif;font-size:20px;font-weight:500;line-height:24px;margin-bottom:0;margin-top:0;text-align:center">Enter the following code to finish linking Venmo.</h1><table align="center"border="0"cellpadding="0"cellspacing="0"role="presentation"style="background:rgba(0,0,0,.05);border-radius:4px;margin:16px auto 14px;vertical-align:middle;width:280px"width="100%"><tr><td><p style="font-size:32px;line-height:40px;margin:0 auto;color:#000;display:inline-block;font-family:HelveticaNeue-Bold;font-weight:700;letter-spacing:6px;padding-bottom:8px;padding-top:8px;width:100%;text-align:center"></table><p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Not expecting this email?<p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Contact <a href="mailto:login@plaid.com"style="color:#444;text-decoration:underline">login@plaid.com</a> if you did not request this code.</table><span><!--[if mso]></td></tr></table><![endif]--></span></div></div><p style="font-size:12px;line-height:23px;margin:0;color:#000;font-weight:800;letter-spacing:0;margin-top:20px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;text-align:center;text-transform:uppercase">Securely powered by Plaid."`;
+exports[`render > renders with minifying 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr"lang="en"xmlns:o="urn:schemas-microsoft-com:office:office"xmlns:v="urn:schemas-microsoft-com:vml"><meta charset="utf8"><meta name="viewport"content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection"content="telephone=no, date=no, address=no, email=no, url=no"><meta name="viewport"content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection"content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/--><body style="background-color:#fff;font-family:HelveticaNeue,Helvetica,Arial,sans-serif"><div style="table-layout:fixed;width:100%"><div style="margin:0 auto;max-width:600px"><span><!--[if mso]><table align="center" width="600" style="border-spacing: 0; width:600px;" role="presentation"><tr><td><![endif]--></span><table align="center"border="0"cellpadding="0"cellspacing="0"role="presentation"style="max-width:600px;background-color:#fff;border:1px solid #eee;border-radius:5px;box-shadow:0 5px 10px rgba(20,50,70,.2);margin-top:20px;width:360px;margin:0 auto;padding:68px 0 130px"width="100%"><tr style="width:100%"><td align="center"><img alt="Plaid"height="88"src="https://jsx.email/assets/demo/plaid-logo.png"style="border:none;display:block;outline:0;text-decoration:none;margin:0 auto"width="212"><p style="font-size:11px;line-height:16px;margin:16px 8px 8px 8px;color:#0a85ea;font-weight:700;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;height:16px;letter-spacing:0;text-transform:uppercase;text-align:center">Verify Your Identity<h1 style="color:#000;display:inline-block;font-family:HelveticaNeue-Medium,Helvetica,Arial,sans-serif;font-size:20px;font-weight:500;line-height:24px;margin-bottom:0;margin-top:0;text-align:center">Enter the following code to finish linking Venmo.</h1><table align="center"border="0"cellpadding="0"cellspacing="0"role="presentation"style="background:rgba(0,0,0,.05);border-radius:4px;margin:16px auto 14px;vertical-align:middle;width:280px"width="100%"><tr><td><p style="font-size:32px;line-height:40px;margin:0 auto;color:#000;display:inline-block;font-family:HelveticaNeue-Bold;font-weight:700;letter-spacing:6px;padding-bottom:8px;padding-top:8px;width:100%;text-align:center"></table><p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Not expecting this email?<p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Contact <a href="mailto:login@plaid.com"style="color:#444;text-decoration:underline">login@plaid.com</a> if you did not request this code.</table><span><!--[if mso]></td></tr></table><![endif]--></span></div></div><p style="font-size:12px;line-height:23px;margin:0;color:#000;font-weight:800;letter-spacing:0;margin-top:20px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;text-align:center;text-transform:uppercase">Securely powered by Plaid."`;
 
-exports[`render > renders without minifying 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--></head><body style="background-color:#ffffff;font-family:HelveticaNeue,Helvetica,Arial,sans-serif"><div style="table-layout:fixed;width:100%"><div style="margin:0 auto;max-width:600px"><span><!--[if mso]><table align="center" width="600" style="border-spacing: 0; width:600px;" role="presentation"><tr><td><![endif]--></span><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;background-color:#ffffff;border:1px solid #eee;border-radius:5px;box-shadow:0 5px 10px rgba(20,50,70,.2);margin-top:20px;width:360px;margin:0 auto;padding:68px 0 130px"><tbody><tr style="width:100%"><td align="center"><img alt="Plaid" src="https://jsx.email/assets/demo/plaid-logo.png" width="212" height="88" style="border:none;display:block;outline:none;text-decoration:none;margin:0 auto"><p style="font-size:11px;line-height:16px;margin:16px 8px 8px 8px;color:#0a85ea;font-weight:700;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;height:16px;letter-spacing:0;text-transform:uppercase;text-align:center">Verify Your Identity</p><h1 style="color:#000;display:inline-block;font-family:HelveticaNeue-Medium,Helvetica,Arial,sans-serif;font-size:20px;font-weight:500;line-height:24px;margin-bottom:0;margin-top:0;text-align:center">Enter the following code to finish linking Venmo.</h1><table align="center" width="100%" style="background:rgba(0,0,0,.05);border-radius:4px;margin:16px auto 14px;vertical-align:middle;width:280px" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><p style="font-size:32px;line-height:40px;margin:0 auto;color:#000;display:inline-block;font-family:HelveticaNeue-Bold;font-weight:700;letter-spacing:6px;padding-bottom:8px;padding-top:8px;width:100%;text-align:center"></p></td></tr></tbody></table><p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Not expecting this email?</p><p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Contact <a href="mailto:login@plaid.com" style="color:#444;text-decoration:underline">login@plaid.com</a> if you did not request this code.</p></td></tr></tbody></table><span><!--[if mso]></td></tr></table><![endif]--></span></div></div><p style="font-size:12px;line-height:23px;margin:0;color:#000;font-weight:800;letter-spacing:0;margin-top:20px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;text-align:center;text-transform:uppercase">Securely powered by Plaid.</p></body></html>"`;
+exports[`render > renders without minifying 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/--></head><body style="background-color:#ffffff;font-family:HelveticaNeue,Helvetica,Arial,sans-serif"><div style="table-layout:fixed;width:100%"><div style="margin:0 auto;max-width:600px"><span><!--[if mso]><table align="center" width="600" style="border-spacing: 0; width:600px;" role="presentation"><tr><td><![endif]--></span><table align="center" width="100%" role="presentation" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;background-color:#ffffff;border:1px solid #eee;border-radius:5px;box-shadow:0 5px 10px rgba(20,50,70,.2);margin-top:20px;width:360px;margin:0 auto;padding:68px 0 130px"><tbody><tr style="width:100%"><td align="center"><img alt="Plaid" src="https://jsx.email/assets/demo/plaid-logo.png" width="212" height="88" style="border:none;display:block;outline:none;text-decoration:none;margin:0 auto"><p style="font-size:11px;line-height:16px;margin:16px 8px 8px 8px;color:#0a85ea;font-weight:700;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;height:16px;letter-spacing:0;text-transform:uppercase;text-align:center">Verify Your Identity</p><h1 style="color:#000;display:inline-block;font-family:HelveticaNeue-Medium,Helvetica,Arial,sans-serif;font-size:20px;font-weight:500;line-height:24px;margin-bottom:0;margin-top:0;text-align:center">Enter the following code to finish linking Venmo.</h1><table align="center" width="100%" style="background:rgba(0,0,0,.05);border-radius:4px;margin:16px auto 14px;vertical-align:middle;width:280px" border="0" cellpadding="0" cellspacing="0" role="presentation"><tbody><tr><td><p style="font-size:32px;line-height:40px;margin:0 auto;color:#000;display:inline-block;font-family:HelveticaNeue-Bold;font-weight:700;letter-spacing:6px;padding-bottom:8px;padding-top:8px;width:100%;text-align:center"></p></td></tr></tbody></table><p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Not expecting this email?</p><p style="font-size:15px;line-height:23px;margin:0;color:#444;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;letter-spacing:0;padding:0 40px;text-align:center">Contact <a href="mailto:login@plaid.com" style="color:#444;text-decoration:underline">login@plaid.com</a> if you did not request this code.</p></td></tr></tbody></table><span><!--[if mso]></td></tr></table><![endif]--></span></div></div><p style="font-size:12px;line-height:23px;margin:0;color:#000;font-weight:800;letter-spacing:0;margin-top:20px;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;text-align:center;text-transform:uppercase">Securely powered by Plaid.</p></body></html>"`;
diff --git a/packages/jsx-email/test/render/compile-path.test.ts b/packages/jsx-email/test/render/compile-path.test.ts
new file mode 100644
index 00000000..2f4c1c9f
--- /dev/null
+++ b/packages/jsx-email/test/render/compile-path.test.ts
@@ -0,0 +1,38 @@
+import { mkdir, mkdtemp, rm, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+import { isWindows } from 'std-env';
+
+import { compile } from '../../src/renderer/compile.js';
+
+describe('compile', () => {
+  it('returns an importable path for nested entrypoints', async () => {
+    const tmpRoot = await mkdtemp(join(process.cwd(), '.tmp-jsx-email-compile-'));
+
+    try {
+      const entryDir = join(tmpRoot, 'templates', 'nested');
+      await mkdir(entryDir, { recursive: true });
+
+      const entryPoint = join(entryDir, 'template.tsx');
+      await writeFile(
+        entryPoint,
+        `export const Template = ({ name }: { name: string }) => <h1>Hello {name}</h1>;\n`,
+        'utf8'
+      );
+
+      const outDir = join(tmpRoot, 'out');
+      const results = await compile({ files: [entryPoint], outDir });
+      const result = results[0];
+
+      if (!result) throw new Error('Expected compile to return at least one output');
+
+      const compiledImportPath = isWindows ? pathToFileURL(result.path).toString() : result.path;
+
+      const mod = await import(compiledImportPath);
+      expect(typeof mod.Template).toBe('function');
+    } finally {
+      await rm(tmpRoot, { recursive: true, force: true });
+    }
+  });
+});
diff --git a/packages/jsx-email/test/tailwind/.snapshots/tailwind-head.test.tsx.snap b/packages/jsx-email/test/tailwind/.snapshots/tailwind-head.test.tsx.snap
index c4df61e4..64d5d544 100644
--- a/packages/jsx-email/test/tailwind/.snapshots/tailwind-head.test.tsx.snap
+++ b/packages/jsx-email/test/tailwind/.snapshots/tailwind-head.test.tsx.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Tailwind + Head > should not clobber <Head> content 1`] = `"<html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><title>test title</title><head><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--></head></head><style tailwind>/* layer: preflights */</style></head></html>"`;
+exports[`Tailwind + Head > should not clobber <Head> content 1`] = `"<html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><title>test title</title><jsx-email-cond data-mso="true" data-head="true"><jsx-email-raw><!--<xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>--></jsx-email-raw></jsx-email-cond></head><style tailwind>/* layer: preflights */</style></head></html>"`;
 
 exports[`Tailwind + Head > should not clobber <Head> content 2`] = `
 "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
@@ -14,10 +14,10 @@ exports[`Tailwind + Head > should not clobber <Head> content 2`] = `
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
     <meta name="x-apple-disable-message-reformatting">
     <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
-    <title>test title</title><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
+    <title>test title</title>
     <style tailwind>
       /* layer: preflights */
-    </style>
+    </style><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]/-->
   </head>
 
   <body></body>
diff --git a/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap b/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap
index ddaab049..234e3e4c 100644
--- a/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap
+++ b/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Tailwind> component > should preserve mso styles 1`] = `
-"<head><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><head><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--></head></head><span><!--[if mso]><i style="letter-spacing: 10px;mso-font-width:-100%;" hidden>&nbsp;</i><![endif]--></span><div class="custom-class bg-white sm:bg-red-50 sm:text-sm md:text-lg"></div></html><style tailwind>/* layer: preflights */
+"<head><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><jsx-email-cond data-mso="true" data-head="true"><jsx-email-raw><!--<xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>--></jsx-email-raw></jsx-email-cond></head><span><!--[if mso]><i style="letter-spacing: 10px;mso-font-width:-100%;" hidden>&nbsp;</i><![endif]--></span><div class="custom-class bg-white sm:bg-red-50 sm:text-sm md:text-lg"></div></html><style tailwind>/* layer: preflights */
 /* layer: default */
 .bg-white{background-color:rgb(255,255,255);}
 @media (min-width: 640px){
@@ -16,7 +16,7 @@ exports[`<Tailwind> component > should preserve mso styles 1`] = `
 `;
 
 exports[`<Tailwind> component > should recognize custom resopnsive screen 1`] = `
-"<head><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><head><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--></head></head><div class="xl:bg-green-500">Test</div><div class="2xl:bg-blue-500">Test</div></html><style tailwind>/* layer: preflights */
+"<head><html lang="en" dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/><meta name="x-apple-disable-message-reformatting"/><meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/><jsx-email-cond data-mso="true" data-head="true"><jsx-email-raw><!--<xml><o:OfficeDocumentSettings><o:AllowPNG /><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>--></jsx-email-raw></jsx-email-cond></head><div class="xl:bg-green-500">Test</div><div class="2xl:bg-blue-500">Test</div></html><style tailwind>/* layer: preflights */
 /* layer: default */
 @media (min-width: 1280px){
 .xl\\:bg-green-500{background-color:rgb(34,197,94);}
diff --git a/test/cli/check.test.ts b/test/cli/check.test.ts
new file mode 100644
index 00000000..84fe5722
--- /dev/null
+++ b/test/cli/check.test.ts
@@ -0,0 +1,31 @@
+import { resolve } from 'node:path';
+
+import { execa } from 'execa';
+import strip from 'strip-ansi';
+import { describe, expect, test } from 'vitest';
+
+process.chdir(__dirname);
+
+describe('cli', async () => {
+  test('email check supports --use-preview-props', async () => {
+    const templatePath = resolve(__dirname, './fixtures/check-preview-props.tsx');
+
+    await expect(
+      execa({ cwd: __dirname, shell: true })`email check ${templatePath}`
+    ).rejects.toMatchObject({
+      exitCode: 1
+    });
+
+    const { stdout } = await execa({
+      cwd: __dirname,
+      shell: true
+    })`email check ${templatePath} --use-preview-props`;
+
+    const plain = strip(stdout);
+
+    expect(plain).toContain('Checking email template for Client Compatibility');
+    expect(plain).toContain('Check Complete');
+    expect(plain).not.toContain('noteLines');
+    expect(plain).not.toContain('asshole');
+  });
+});
diff --git a/test/cli/create-mail.test.ts b/test/cli/create-mail.test.ts
index 8ece17ca..20dd340b 100644
--- a/test/cli/create-mail.test.ts
+++ b/test/cli/create-mail.test.ts
@@ -21,6 +21,23 @@ describe('create-mail', async () => {
 
     expect(plain).toMatchSnapshot();
 
+    type PackageJson = {
+      dependencies?: Record<string, string>;
+      devDependencies?: Record<string, string>;
+    };
+
+    const packageJson = JSON.parse(
+      await readFile(join(__dirname, '.test/new/package.json'), 'utf8')
+    ) as PackageJson;
+
+    expect(packageJson.devDependencies).toMatchObject({
+      react: expect.any(String),
+      'react-dom': expect.any(String)
+    });
+
+    expect(packageJson.dependencies ?? {}).not.toHaveProperty('react');
+    expect(packageJson.dependencies ?? {}).not.toHaveProperty('react-dom');
+
     const contents = await readFile(join(__dirname, '.test/new/templates/email.tsx'), 'utf8');
     expect(contents).toMatchSnapshot();
 
diff --git a/test/cli/fixtures/check-preview-props.tsx b/test/cli/fixtures/check-preview-props.tsx
new file mode 100644
index 00000000..056b3117
--- /dev/null
+++ b/test/cli/fixtures/check-preview-props.tsx
@@ -0,0 +1,9 @@
+interface PreviewProps {
+  label: string;
+}
+
+export const previewProps: PreviewProps = {
+  label: 'Preview props loaded'
+};
+
+export const Template = ({ label }: PreviewProps) => <div>{label.toUpperCase()}</div>;
diff --git a/test/cli/moon.yml b/test/cli/moon.yml
index 2653b57e..a572ea0f 100644
--- a/test/cli/moon.yml
+++ b/test/cli/moon.yml
@@ -9,6 +9,12 @@ tasks:
   # Naming this differently so it's not picked up bu the main test workflow
   test.run:
     command: vitest --config ../../shared/vitest.config.ts . --pool=forks
+    deps:
+      - plugin-inline:build
+      - plugin-minify:build
+      - plugin-pretty:build
+      - create-mail:build
+      - jsx-email:build
     inputs:
       - ./**/*.test.ts
       - package.json
diff --git a/test/cli/preview-build-path.test.ts b/test/cli/preview-build-path.test.ts
new file mode 100644
index 00000000..6c68390a
--- /dev/null
+++ b/test/cli/preview-build-path.test.ts
@@ -0,0 +1,51 @@
+import { access, readFile, rm } from 'node:fs/promises';
+import os from 'node:os';
+import { join, resolve } from 'node:path';
+
+import { execa } from 'execa';
+
+describe('cli: preview --build-path', async () => {
+  const outRelational = './.test/build-path';
+  const outAbsolute = resolve(__dirname, outRelational);
+  const templatePath = './.test/.deploy/emails';
+  const isWindows = os.platform() === 'win32';
+
+  beforeAll(async () => {
+    await rm(outAbsolute, { force: true, recursive: true });
+  });
+
+  afterAll(async () => {
+    await rm(outAbsolute, { force: true, recursive: true });
+  });
+
+  if (!isWindows) {
+    test('relative build path writes to an absolute path derived from the original cwd', async () => {
+      await execa({ cwd: __dirname, shell: true })`email create BatmanEmail --out ${templatePath} `;
+      const { stdout } = await execa({
+        cwd: __dirname,
+        shell: true
+      })`email preview ${templatePath} --build-path ${outRelational}`;
+
+      console.log(stdout);
+
+      await access(join(outAbsolute, 'index.html'));
+
+      const html = await readFile(join(outAbsolute, 'index.html'), 'utf8');
+      expect(html).toContain('<div id="root"></div>');
+    }, 60e3);
+  }
+
+  if (isWindows) {
+    test('errors when Vite root and temp build path are on different drives (Windows)', async () => {
+      await execa({ cwd: __dirname, shell: true })`email create BatmanEmail --out ${templatePath} `;
+      await expect(
+        execa({
+          cwd: __dirname,
+          shell: true
+        })`email preview ${templatePath} --build-path ${outRelational}`
+      ).rejects.toThrow(
+        /Temporary directory drive letter different than root directory drive letter/
+      );
+    }, 60e3);
+  }
+});