From c827aa59887db9b19e79d21be875773dab789ff6 Mon Sep 17 00:00:00 2001
From: CharlieHelps <charlie@charlielabs.ai>
Date: Tue, 9 Dec 2025 22:27:39 +0000
Subject: [PATCH] fix(jsx-email): align Conditional/Raw via rehype

---
 docs/components/graph.md                      |   2 +-
 docs/core/compile.md                          |   4 +-
 docs/core/plugins.md                          |   1 +
 .../jsx-email/src/components/conditional.tsx  |  54 ++++-----
 packages/jsx-email/src/components/head.tsx    |  15 +--
 .../jsx-email/src/renderer/conditional.ts     | 106 ++++++++++++++++++
 packages/jsx-email/src/renderer/raw.ts        |  57 ++++++++++
 packages/jsx-email/src/renderer/render.ts     |  18 +--
 .../test/.snapshots/conditional.test.tsx.snap |   8 +-
 .../test/.snapshots/debug.test.tsx.snap       |   2 +-
 .../test/.snapshots/head.test.tsx.snap        |   4 +-
 .../test/.snapshots/raw.test.tsx.snap         |   6 +
 .../test/conditional-endif-closer.test.tsx    |  20 ++++
 .../test/conditional-raw-nodup.test.tsx       |  52 +++++++++
 .../.snapshots/define-config.test.ts.snap     |  40 +++----
 .../.snapshots/load-dotdir.test.ts.snap       |  10 +-
 .../.snapshots/load-mjs-json.test.ts.snap     |  10 +-
 .../load/mjs/.snapshots/load-mjs.test.ts.snap |  10 +-
 .../.snapshots/parent-dir.test.ts.snap        |  10 +-
 packages/jsx-email/test/head.test.tsx         |  15 +--
 packages/jsx-email/test/raw.test.tsx          |  15 ++-
 .../render/.snapshots/render.test.tsx.snap    |  26 ++---
 .../.snapshots/tailwind-head.test.tsx.snap    |   6 +-
 .../.snapshots/tailwind.test.tsx.snap         |   4 +-
 24 files changed, 372 insertions(+), 123 deletions(-)
 create mode 100644 packages/jsx-email/src/renderer/conditional.ts
 create mode 100644 packages/jsx-email/test/conditional-endif-closer.test.tsx
 create mode 100644 packages/jsx-email/test/conditional-raw-nodup.test.tsx

diff --git a/docs/components/graph.md b/docs/components/graph.md
index 0c2eea365..c88a928b4 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 c2c38bbd2..65298c217 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 343fb7253..959f5d7e2 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/jsx-email/src/components/conditional.tsx b/packages/jsx-email/src/components/conditional.tsx
index 8c0390769..09ad88cda 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 ff249d034..ca78a26d7 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/conditional.ts b/packages/jsx-email/src/renderer/conditional.ts
new file mode 100644
index 000000000..5fc78bbce
--- /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 7721c2264..a10eb6ad7 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 a5229b8df..69a6f06b6 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.test.tsx.snap b/packages/jsx-email/test/.snapshots/conditional.test.tsx.snap
index f15449d58..b36a58aef 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 eab541a18..fb89dce37 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 05fd0bfb4..0068ffddb 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 6f49ea9b9..d7195d31a 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 000000000..ff98b18ac
--- /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 000000000..fe6b0d2c8
--- /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/config/.snapshots/define-config.test.ts.snap b/packages/jsx-email/test/config/.snapshots/define-config.test.ts.snap
index f60bbb4d9..1aa4fda0f 100644
--- a/packages/jsx-email/test/config/.snapshots/define-config.test.ts.snap
+++ b/packages/jsx-email/test/config/.snapshots/define-config.test.ts.snap
@@ -20,7 +20,7 @@ exports[`defineConfig > basic set 1`] = `
               "reject": [Function],
               "resolve": [Function],
             },
-            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
             "time": [Function],
             "transports": undefined,
           },
@@ -40,7 +40,7 @@ exports[`defineConfig > basic set 1`] = `
             "WARN": 3,
           },
         },
-        "name": "dot-log:∵ root/minify",
+        "name": "dot-log:∵ root/minify",
         "options": {
           "factory": LogFactory {
             "options": {
@@ -51,7 +51,7 @@ exports[`defineConfig > basic set 1`] = `
                 "reject": [Function],
                 "resolve": [Function],
               },
-              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
               "time": [Function],
               "transports": undefined,
             },
@@ -71,9 +71,9 @@ exports[`defineConfig > basic set 1`] = `
               "WARN": 3,
             },
           },
-          "id": "dot-log:∵ root/minify",
+          "id": "dot-log:∵ root/minify",
           "level": "info",
-          "name": "dot-log:∵ root/minify",
+          "name": "dot-log:∵ root/minify",
           "prefix": undefined,
         },
         "trace": [Function],
@@ -116,7 +116,7 @@ exports[`defineConfig > de-dupe plugins 1`] = `
               "reject": [Function],
               "resolve": [Function],
             },
-            "template": "[{{time}}] jsx-email ∵ batman {{level}} ",
+            "template": "[{{time}}] jsx-email ∵ batman {{level}} ",
             "time": [Function],
             "transports": undefined,
           },
@@ -136,7 +136,7 @@ exports[`defineConfig > de-dupe plugins 1`] = `
             "WARN": 3,
           },
         },
-        "name": "dot-log:∵ batman",
+        "name": "dot-log:∵ batman",
         "options": {
           "factory": LogFactory {
             "options": {
@@ -147,7 +147,7 @@ exports[`defineConfig > de-dupe plugins 1`] = `
                 "reject": [Function],
                 "resolve": [Function],
               },
-              "template": "[{{time}}] jsx-email ∵ batman {{level}} ",
+              "template": "[{{time}}] jsx-email ∵ batman {{level}} ",
               "time": [Function],
               "transports": undefined,
             },
@@ -167,9 +167,9 @@ exports[`defineConfig > de-dupe plugins 1`] = `
               "WARN": 3,
             },
           },
-          "id": "dot-log:∵ batman",
+          "id": "dot-log:∵ batman",
           "level": "info",
-          "name": "dot-log:∵ batman",
+          "name": "dot-log:∵ batman",
           "prefix": undefined,
         },
         "trace": [Function],
@@ -226,7 +226,7 @@ exports[`defineConfig > minify and pretty 1`] = `
               "reject": [Function],
               "resolve": [Function],
             },
-            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
             "time": [Function],
             "transports": undefined,
           },
@@ -246,7 +246,7 @@ exports[`defineConfig > minify and pretty 1`] = `
             "WARN": 3,
           },
         },
-        "name": "dot-log:∵ root/minify",
+        "name": "dot-log:∵ root/minify",
         "options": {
           "factory": LogFactory {
             "options": {
@@ -257,7 +257,7 @@ exports[`defineConfig > minify and pretty 1`] = `
                 "reject": [Function],
                 "resolve": [Function],
               },
-              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
               "time": [Function],
               "transports": undefined,
             },
@@ -277,9 +277,9 @@ exports[`defineConfig > minify and pretty 1`] = `
               "WARN": 3,
             },
           },
-          "id": "dot-log:∵ root/minify",
+          "id": "dot-log:∵ root/minify",
           "level": "info",
-          "name": "dot-log:∵ root/minify",
+          "name": "dot-log:∵ root/minify",
           "prefix": undefined,
         },
         "trace": [Function],
@@ -307,7 +307,7 @@ exports[`defineConfig > minify and pretty 1`] = `
               "reject": [Function],
               "resolve": [Function],
             },
-            "template": "[{{time}}] jsx-email ∵ root/pretty {{level}} ",
+            "template": "[{{time}}] jsx-email ∵ root/pretty {{level}} ",
             "time": [Function],
             "transports": undefined,
           },
@@ -327,7 +327,7 @@ exports[`defineConfig > minify and pretty 1`] = `
             "WARN": 3,
           },
         },
-        "name": "dot-log:∵ root/pretty",
+        "name": "dot-log:∵ root/pretty",
         "options": {
           "factory": LogFactory {
             "options": {
@@ -338,7 +338,7 @@ exports[`defineConfig > minify and pretty 1`] = `
                 "reject": [Function],
                 "resolve": [Function],
               },
-              "template": "[{{time}}] jsx-email ∵ root/pretty {{level}} ",
+              "template": "[{{time}}] jsx-email ∵ root/pretty {{level}} ",
               "time": [Function],
               "transports": undefined,
             },
@@ -358,9 +358,9 @@ exports[`defineConfig > minify and pretty 1`] = `
               "WARN": 3,
             },
           },
-          "id": "dot-log:∵ root/pretty",
+          "id": "dot-log:∵ root/pretty",
           "level": "info",
-          "name": "dot-log:∵ root/pretty",
+          "name": "dot-log:∵ root/pretty",
           "prefix": undefined,
         },
         "trace": [Function],
diff --git a/packages/jsx-email/test/config/load/dotdir/.snapshots/load-dotdir.test.ts.snap b/packages/jsx-email/test/config/load/dotdir/.snapshots/load-dotdir.test.ts.snap
index e8a181f79..28a4b5f23 100644
--- a/packages/jsx-email/test/config/load/dotdir/.snapshots/load-dotdir.test.ts.snap
+++ b/packages/jsx-email/test/config/load/dotdir/.snapshots/load-dotdir.test.ts.snap
@@ -20,7 +20,7 @@ exports[`loadConfig → dotdir > loadConfig 1`] = `
               "reject": [Function],
               "resolve": [Function],
             },
-            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
             "time": [Function],
             "transports": undefined,
           },
@@ -40,7 +40,7 @@ exports[`loadConfig → dotdir > loadConfig 1`] = `
             "WARN": 3,
           },
         },
-        "name": "dot-log:∵ root/minify",
+        "name": "dot-log:∵ root/minify",
         "options": {
           "factory": LogFactory {
             "options": {
@@ -51,7 +51,7 @@ exports[`loadConfig → dotdir > loadConfig 1`] = `
                 "reject": [Function],
                 "resolve": [Function],
               },
-              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
               "time": [Function],
               "transports": undefined,
             },
@@ -71,9 +71,9 @@ exports[`loadConfig → dotdir > loadConfig 1`] = `
               "WARN": 3,
             },
           },
-          "id": "dot-log:∵ root/minify",
+          "id": "dot-log:∵ root/minify",
           "level": "info",
-          "name": "dot-log:∵ root/minify",
+          "name": "dot-log:∵ root/minify",
           "prefix": undefined,
         },
         "trace": [Function],
diff --git a/packages/jsx-email/test/config/load/mjs-json/.snapshots/load-mjs-json.test.ts.snap b/packages/jsx-email/test/config/load/mjs-json/.snapshots/load-mjs-json.test.ts.snap
index 29b72af36..44c68a5f9 100644
--- a/packages/jsx-email/test/config/load/mjs-json/.snapshots/load-mjs-json.test.ts.snap
+++ b/packages/jsx-email/test/config/load/mjs-json/.snapshots/load-mjs-json.test.ts.snap
@@ -20,7 +20,7 @@ exports[`loadConfig → mjs-json > loadConfig 1`] = `
               "reject": [Function],
               "resolve": [Function],
             },
-            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
             "time": [Function],
             "transports": undefined,
           },
@@ -40,7 +40,7 @@ exports[`loadConfig → mjs-json > loadConfig 1`] = `
             "WARN": 3,
           },
         },
-        "name": "dot-log:∵ root/minify",
+        "name": "dot-log:∵ root/minify",
         "options": {
           "factory": LogFactory {
             "options": {
@@ -51,7 +51,7 @@ exports[`loadConfig → mjs-json > loadConfig 1`] = `
                 "reject": [Function],
                 "resolve": [Function],
               },
-              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
               "time": [Function],
               "transports": undefined,
             },
@@ -71,9 +71,9 @@ exports[`loadConfig → mjs-json > loadConfig 1`] = `
               "WARN": 3,
             },
           },
-          "id": "dot-log:∵ root/minify",
+          "id": "dot-log:∵ root/minify",
           "level": "info",
-          "name": "dot-log:∵ root/minify",
+          "name": "dot-log:∵ root/minify",
           "prefix": undefined,
         },
         "trace": [Function],
diff --git a/packages/jsx-email/test/config/load/mjs/.snapshots/load-mjs.test.ts.snap b/packages/jsx-email/test/config/load/mjs/.snapshots/load-mjs.test.ts.snap
index f196bb352..08a0533df 100644
--- a/packages/jsx-email/test/config/load/mjs/.snapshots/load-mjs.test.ts.snap
+++ b/packages/jsx-email/test/config/load/mjs/.snapshots/load-mjs.test.ts.snap
@@ -20,7 +20,7 @@ exports[`loadConfig → mjs > loadConfig 1`] = `
               "reject": [Function],
               "resolve": [Function],
             },
-            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
             "time": [Function],
             "transports": undefined,
           },
@@ -40,7 +40,7 @@ exports[`loadConfig → mjs > loadConfig 1`] = `
             "WARN": 3,
           },
         },
-        "name": "dot-log:∵ root/minify",
+        "name": "dot-log:∵ root/minify",
         "options": {
           "factory": LogFactory {
             "options": {
@@ -51,7 +51,7 @@ exports[`loadConfig → mjs > loadConfig 1`] = `
                 "reject": [Function],
                 "resolve": [Function],
               },
-              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
               "time": [Function],
               "transports": undefined,
             },
@@ -71,9 +71,9 @@ exports[`loadConfig → mjs > loadConfig 1`] = `
               "WARN": 3,
             },
           },
-          "id": "dot-log:∵ root/minify",
+          "id": "dot-log:∵ root/minify",
           "level": "info",
-          "name": "dot-log:∵ root/minify",
+          "name": "dot-log:∵ root/minify",
           "prefix": undefined,
         },
         "trace": [Function],
diff --git a/packages/jsx-email/test/config/load/parent-dir/child-dir/.snapshots/parent-dir.test.ts.snap b/packages/jsx-email/test/config/load/parent-dir/child-dir/.snapshots/parent-dir.test.ts.snap
index 62b020dff..3fee73922 100644
--- a/packages/jsx-email/test/config/load/parent-dir/child-dir/.snapshots/parent-dir.test.ts.snap
+++ b/packages/jsx-email/test/config/load/parent-dir/child-dir/.snapshots/parent-dir.test.ts.snap
@@ -20,7 +20,7 @@ exports[`loadConfig → parent dir > loadConfig 1`] = `
               "reject": [Function],
               "resolve": [Function],
             },
-            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+            "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
             "time": [Function],
             "transports": undefined,
           },
@@ -40,7 +40,7 @@ exports[`loadConfig → parent dir > loadConfig 1`] = `
             "WARN": 3,
           },
         },
-        "name": "dot-log:∵ root/minify",
+        "name": "dot-log:∵ root/minify",
         "options": {
           "factory": LogFactory {
             "options": {
@@ -51,7 +51,7 @@ exports[`loadConfig → parent dir > loadConfig 1`] = `
                 "reject": [Function],
                 "resolve": [Function],
               },
-              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
+              "template": "[{{time}}] jsx-email ∵ root/minify {{level}} ",
               "time": [Function],
               "transports": undefined,
             },
@@ -71,9 +71,9 @@ exports[`loadConfig → parent dir > loadConfig 1`] = `
               "WARN": 3,
             },
           },
-          "id": "dot-log:∵ root/minify",
+          "id": "dot-log:∵ root/minify",
           "level": "info",
-          "name": "dot-log:∵ root/minify",
+          "name": "dot-log:∵ root/minify",
           "prefix": undefined,
         },
         "trace": [Function],
diff --git a/packages/jsx-email/test/head.test.tsx b/packages/jsx-email/test/head.test.tsx
index 4589990e1..a0ab75214 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 4eea43f7d..41c2a0005 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 da9a9e0cd..29588d1d5 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/tailwind/.snapshots/tailwind-head.test.tsx.snap b/packages/jsx-email/test/tailwind/.snapshots/tailwind-head.test.tsx.snap
index c4df61e43..64d5d5447 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 ddaab0491..234e3e4c9 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);}