chore: show warning when using cellPadding and cellSpacing

shellscape · Oct 15, 2024 · e246dc7 · e246dc7
1 parent c067250
commit e246dc7
Show file tree

Hide file tree

Showing 15 changed files with 82 additions and 29 deletions.
diff --git a/packages/jsx-email/src/components/container.tsx b/packages/jsx-email/src/components/container.tsx
@@ -2,6 +2,8 @@ import * as config from '../config.js';
 import { debug } from '../debug.js';
 import type { BaseProps, JsxEmailComponent } from '../types.js';
 
+import { cellPropWarning } from './helpers.js';
+
 export interface ContainerProps extends Omit<BaseProps<'table'>, 'align' | 'width'> {
   alignment?: 'center' | 'left' | 'right';
   containerWidth?: number;
@@ -17,6 +19,8 @@ export const Container: JsxEmailComponent<ContainerProps> = ({
   containerWidth = 600,
   ...props
 }) => {
+  if (props.cellPadding || props.cellSpacing) cellPropWarning();
+
   const configDds = config.current().render.disableDefaultStyle;
   return (
     <div {...debugProps} style={{ tableLayout: 'fixed', width: '100%' }}>

diff --git a/packages/jsx-email/src/components/helpers.ts b/packages/jsx-email/src/components/helpers.ts
@@ -0,0 +1,7 @@
+import { log } from '../log.js';
+
+export const cellPropWarning = () => {
+  log.warn(
+    'Use of the `cellPadding` and `cellSpacing` properties are discouraged due to inconsistencies between email clients'
+  );
+};
diff --git a/packages/jsx-email/src/components/row.tsx b/packages/jsx-email/src/components/row.tsx
@@ -2,6 +2,8 @@ import * as config from '../config.js';
 import { debug } from '../debug.js';
 import type { BaseProps, JsxEmailComponent } from '../types.js';
 
+import { cellPropWarning } from './helpers.js';
+
 export interface RowProps extends BaseProps<'table'> {}
 
 const debugProps = debug.elements.enabled ? { dataType: 'jsx-email/row' } : {};
@@ -14,6 +16,8 @@ export const Row: JsxEmailComponent<RowProps> = ({
 }) => {
   const configDds = config.current().render.disableDefaultStyle;
 
+  if (props.cellPadding || props.cellSpacing) cellPropWarning();
+
   return (
     <table
       align="center"

diff --git a/packages/jsx-email/src/components/section.tsx b/packages/jsx-email/src/components/section.tsx
@@ -1,28 +1,34 @@
 import { debug } from '../debug.js';
 import type { BaseProps, JsxEmailComponent } from '../types.js';
 
+import { cellPropWarning } from './helpers.js';
+
 export interface SectionProps extends BaseProps<'table'> {}
 
 const debugProps = debug.elements.enabled ? { dataType: 'jsx-email/section' } : {};
 
-export const Section: JsxEmailComponent<SectionProps> = ({ children, style, ...props }) => (
-  <table
-    align="center"
-    width="100%"
-    style={style}
-    border={0}
-    cellPadding="0"
-    cellSpacing="0"
-    role="presentation"
-    {...props}
-    {...debugProps}
-  >
-    <tbody>
-      <tr>
-        <td>{children}</td>
-      </tr>
-    </tbody>
-  </table>
-);
+export const Section: JsxEmailComponent<SectionProps> = ({ children, style, ...props }) => {
+  if (props.cellPadding || props.cellSpacing) cellPropWarning();
+
+  return (
+    <table
+      align="center"
+      width="100%"
+      style={style}
+      border={0}
+      cellPadding="0"
+      cellSpacing="0"
+      role="presentation"
+      {...props}
+      {...debugProps}
+    >
+      <tbody>
+        <tr>
+          <td>{children}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
 
 Section.displayName = 'Section';
diff --git a/packages/jsx-email/test/.snapshots/container.test.tsx.snap b/packages/jsx-email/test/.snapshots/container.test.tsx.snap
@@ -1,5 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`<Container> component > doesn't override cellPadding and cellSpacing 1`] = `"<div style=\\"table-layout:fixed;width:100%\\"><div style=\\"margin:0 auto;max-width:300px\\"><span><!--[if mso]><table align=\\"center\\" width=\\"300\\" style=\\"border-spacing: 0; width:300px;\\" role=\\"presentation\\"><tr><td><![endif]--></span><table align=\\"center\\" width=\\"100%\\" role=\\"presentation\\" cellSpacing=\\"10\\" cellPadding=\\"10\\" border=\\"0\\" style=\\"max-width:300px\\"><tbody><tr style=\\"width:100%\\"><td align=\\"center\\"><button>Hi</button></td></tr></tbody></table><span><!--[if mso]></td></tr></table><![endif]--></span></div></div>"`;
+
 exports[`<Container> component > renders alternate alignment 1`] = `"<div style=\\"table-layout:fixed;width:100%\\"><div style=\\"margin:0 auto;max-width:600px\\"><span><!--[if mso]><table align=\\"right\\" width=\\"600\\" style=\\"border-spacing: 0; width:600px;\\" role=\\"presentation\\"><tr><td><![endif]--></span><table align=\\"right\\" width=\\"100%\\" role=\\"presentation\\" cellSpacing=\\"0\\" cellPadding=\\"0\\" border=\\"0\\" style=\\"max-width:600px\\"><tbody><tr style=\\"width:100%\\"><td align=\\"right\\"><button>Hi</button></td></tr></tbody></table><span><!--[if mso]></td></tr></table><![endif]--></span></div></div>"`;
 
 exports[`<Container> component > renders correctly 1`] = `"<div style=\\"table-layout:fixed;width:100%\\"><div style=\\"margin:0 auto;max-width:300px\\"><span><!--[if mso]><table align=\\"center\\" width=\\"300\\" style=\\"border-spacing: 0; width:300px;\\" role=\\"presentation\\"><tr><td><![endif]--></span><table align=\\"center\\" width=\\"100%\\" role=\\"presentation\\" cellSpacing=\\"0\\" cellPadding=\\"0\\" border=\\"0\\" style=\\"max-width:300px\\"><tbody><tr style=\\"width:100%\\"><td align=\\"center\\"><button>Hi</button></td></tr></tbody></table><span><!--[if mso]></td></tr></table><![endif]--></span></div></div>"`;
diff --git a/packages/jsx-email/test/.snapshots/debug.test.tsx.snap b/packages/jsx-email/test/.snapshots/debug.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`render > renders with debug attributes 1`] = `
               <td align=\\"center\\"><img data-type=\\"jsx-email/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 data-type=\\"jsx-email/text\\" 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 data-type=\\"jsx-email/heading\\" 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%\\" data-type=\\"jsx-email/section\\" 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\\">
+                <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\\" data-type=\\"jsx-email/section\\">
                   <tbody>
                     <tr>
                       <td>

diff --git a/packages/jsx-email/test/.snapshots/row.test.tsx.snap b/packages/jsx-email/test/.snapshots/row.test.tsx.snap
@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`<Row> component > doesn't override cellPadding and cellSpacing 1`] = `"<table align=\\"center\\" width=\\"100%\\" role=\\"presentation\\" cellSpacing=\\"10\\" cellPadding=\\"10\\" border=\\"0\\"><tbody style=\\"width:100%\\"><tr style=\\"width:100%\\"></tr></tbody></table>"`;
+
 exports[`<Row> component > renders correctly 1`] = `"<table align=\\"center\\" width=\\"100%\\" role=\\"presentation\\" cellSpacing=\\"0\\" cellPadding=\\"0\\" border=\\"0\\"><tbody style=\\"width:100%\\"><tr style=\\"width:100%\\"></tr></tbody></table>"`;
diff --git a/packages/jsx-email/test/.snapshots/section.test.tsx.snap b/packages/jsx-email/test/.snapshots/section.test.tsx.snap
@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`<Section> component > doesn't override cellPadding and cellSpacing 1`] = `"<table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellPadding=\\"10\\" cellSpacing=\\"10\\" role=\\"presentation\\"><tbody><tr><td><td>Lorem ipsum</td></td></tr></tbody></table>"`;
+
 exports[`<Section> component > renders correctly 1`] = `"<table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellPadding=\\"0\\" cellSpacing=\\"0\\" role=\\"presentation\\"><tbody><tr><td>Lorem ipsum</td></tr></tbody></table>"`;
diff --git a/packages/jsx-email/test/container.test.tsx b/packages/jsx-email/test/container.test.tsx
@@ -46,4 +46,13 @@ describe('<Container> component', async () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it(`doesn't override cellPadding and cellSpacing`, async () => {
+    const actualOutput = await jsxToString(
+      <Container cellPadding={10} cellSpacing={10} containerWidth={300}>
+        <button>Hi</button>
+      </Container>
+    );
+    expect(actualOutput).toMatchSnapshot();
+  });
 });
diff --git a/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap b/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap
@@ -271,11 +271,11 @@ exports[`render > inlining 2`] = `
   <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%\\" class=\\"mx-auto my-[40px] w-[465px] border-separate rounded border border-solid border-[#eaeaea] p-[20px]\\" role=\\"presentation\\" cellspacing=\\"0\\" cellpadding=\\"0\\" border=\\"0\\" style=\\"max-width:600px\\">
+        <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\\">
+                <table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" class=\\"mt-[32px]\\">
                   <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>
@@ -302,7 +302,7 @@ exports[`render > inlining 2`] = `
                     </tr>
                   </tbody>
                 </table>
-                <table align=\\"center\\" width=\\"100%\\" class=\\"mb-[32px] mt-[32px] text-center\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\">
+                <table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" class=\\"mb-[32px] mt-[32px] text-center\\">
                   <tbody>
                     <tr>
                       <td>
@@ -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%\\" class=\\"mx-auto my-[40px] w-[465px] border-separate rounded border border-solid border-[#eaeaea] p-[20px]\\" role=\\"presentation\\" cellspacing=\\"0\\" cellpadding=\\"0\\" border=\\"0\\" 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></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%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" class=\\"mt-[32px]\\"><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%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" class=\\"mb-[32px] mt-[32px] text-center\\"><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 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;\\">
@@ -721,11 +721,11 @@ exports[`render > renders the vercel demo template 2`] = `
   <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%\\" class=\\"mx-auto my-[40px] w-[465px] border-separate rounded border border-solid border-[#eaeaea] p-[20px]\\" role=\\"presentation\\" cellspacing=\\"0\\" cellpadding=\\"0\\" border=\\"0\\" style=\\"max-width:600px\\">
+        <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\\">
+                <table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" class=\\"mt-[32px]\\">
                   <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>
@@ -752,7 +752,7 @@ exports[`render > renders the vercel demo template 2`] = `
                     </tr>
                   </tbody>
                 </table>
-                <table align=\\"center\\" width=\\"100%\\" class=\\"mb-[32px] mt-[32px] text-center\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\">
+                <table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" class=\\"mb-[32px] mt-[32px] text-center\\">
                   <tbody>
                     <tr>
                       <td>

diff --git a/packages/jsx-email/test/row.test.tsx b/packages/jsx-email/test/row.test.tsx
@@ -31,4 +31,11 @@ describe('<Row> component', async () => {
     const actualOutput = await jsxToString(<Row children={void 0} />);
     expect(actualOutput).toMatchSnapshot();
   });
+
+  it(`doesn't override cellPadding and cellSpacing`, async () => {
+    const actualOutput = await jsxToString(
+      <Row cellPadding={10} cellSpacing={10} children={void 0} />
+    );
+    expect(actualOutput).toMatchSnapshot();
+  });
 });
diff --git a/packages/jsx-email/test/section.test.tsx b/packages/jsx-email/test/section.test.tsx
@@ -61,4 +61,13 @@ describe('<Section> component', async () => {
     const tdChildrenArr = actualOutput.match(/<td\s*.*?>.*?<\/td>/g);
     expect(tdChildrenArr).toHaveLength(1);
   });
+
+  it(`doesn't override cellPadding and cellSpacing`, async () => {
+    const actualOutput = await jsxToString(
+      <Section cellPadding={10} cellSpacing={10}>
+        <td>Lorem ipsum</td>
+      </Section>
+    );
+    expect(actualOutput).toMatchSnapshot();
+  });
 });
diff --git a/test/smoke/moon.yml b/test/smoke/moon.yml
@@ -34,6 +34,7 @@ tasks:
       - ~:setup.ci
     env:
       DOT_LOG_LEVEL: debug
+      LOCAL_SMOKE: 'true'
     options:
       cache: false
       outputStyle: 'stream'

diff --git a/test/smoke/tests/.snapshots/smoke.test.ts-Code-chromium.snap b/test/smoke/tests/.snapshots/smoke.test.ts-Code-chromium.snap
@@ -92,11 +92,11 @@
         <table
           align="center"
           width="100%"
-          class="border-separate border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]"
           role="presentation"
           cellspacing="0"
           cellpadding="0"
           border="0"
+          class="border-separate border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]"
           style="max-width:600px"
         >
           <tbody>