Skip to content

Commit e246dc7

Browse files
shellscapeshellscape
committed
chore: show warning when using cellPadding and cellSpacing
1 parent c067250 commit e246dc7

File tree

15 files changed

+82
-29
lines changed

15 files changed

+82
-29
lines changed

‎packages/jsx-email/src/components/container.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import * as config from '../config.js';
22
import { debug } from '../debug.js';
33
import type { BaseProps, JsxEmailComponent } from '../types.js';
44

5+
import { cellPropWarning } from './helpers.js';
6+
57
export interface ContainerProps extends Omit<BaseProps<'table'>, 'align' | 'width'> {
68
alignment?: 'center' | 'left' | 'right';
79
containerWidth?: number;
@@ -17,6 +19,8 @@ export const Container: JsxEmailComponent<ContainerProps> = ({
1719
containerWidth = 600,
1820
...props
1921
}) => {
22+
if (props.cellPadding || props.cellSpacing) cellPropWarning();
23+
2024
const configDds = config.current().render.disableDefaultStyle;
2125
return (
2226
<div {...debugProps} style={{ tableLayout: 'fixed', width: '100%' }}>

‎packages/jsx-email/src/components/helpers.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { log } from '../log.js';
2+
3+
export const cellPropWarning = () => {
4+
log.warn(
5+
'Use of the `cellPadding` and `cellSpacing` properties are discouraged due to inconsistencies between email clients'
6+
);
7+
};

‎packages/jsx-email/src/components/row.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import * as config from '../config.js';
22
import { debug } from '../debug.js';
33
import type { BaseProps, JsxEmailComponent } from '../types.js';
44

5+
import { cellPropWarning } from './helpers.js';
6+
57
export interface RowProps extends BaseProps<'table'> {}
68

79
const debugProps = debug.elements.enabled ? { dataType: 'jsx-email/row' } : {};
@@ -14,6 +16,8 @@ export const Row: JsxEmailComponent<RowProps> = ({
1416
}) => {
1517
const configDds = config.current().render.disableDefaultStyle;
1618

19+
if (props.cellPadding || props.cellSpacing) cellPropWarning();
20+
1721
return (
1822
<table
1923
align="center"

‎packages/jsx-email/src/components/section.tsx

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
11
import { debug } from '../debug.js';
22
import type { BaseProps, JsxEmailComponent } from '../types.js';
33

4+
import { cellPropWarning } from './helpers.js';
5+
46
export interface SectionProps extends BaseProps<'table'> {}
57

68
const debugProps = debug.elements.enabled ? { dataType: 'jsx-email/section' } : {};
79

8-
export const Section: JsxEmailComponent<SectionProps> = ({ children, style, ...props }) => (
9-
<table
10-
align="center"
11-
width="100%"
12-
style={style}
13-
border={0}
14-
cellPadding="0"
15-
cellSpacing="0"
16-
role="presentation"
17-
{...props}
18-
{...debugProps}
19-
>
20-
<tbody>
21-
<tr>
22-
<td>{children}</td>
23-
</tr>
24-
</tbody>
25-
</table>
26-
);
10+
export const Section: JsxEmailComponent<SectionProps> = ({ children, style, ...props }) => {
11+
if (props.cellPadding || props.cellSpacing) cellPropWarning();
12+
13+
return (
14+
<table
15+
align="center"
16+
width="100%"
17+
style={style}
18+
border={0}
19+
cellPadding="0"
20+
cellSpacing="0"
21+
role="presentation"
22+
{...props}
23+
{...debugProps}
24+
>
25+
<tbody>
26+
<tr>
27+
<td>{children}</td>
28+
</tr>
29+
</tbody>
30+
</table>
31+
);
32+
};
2733

2834
Section.displayName = 'Section';

‎packages/jsx-email/test/.snapshots/container.test.tsx.snap

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3+
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>"`;
4+
35
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>"`;
46
57
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>"`;

‎packages/jsx-email/test/.snapshots/debug.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ exports[`render > renders with debug attributes 1`] = `
2323
<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\\">
2424
<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>
2525
<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>
26-
<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\\">
26+
<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\\">
2727
<tbody>
2828
<tr>
2929
<td>

‎packages/jsx-email/test/.snapshots/row.test.tsx.snap

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3+
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>"`;
4+
35
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>"`;

‎packages/jsx-email/test/.snapshots/section.test.tsx.snap

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3+
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>"`;
4+
35
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>"`;

‎packages/jsx-email/test/container.test.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,13 @@ describe('<Container> component', async () => {
4646

4747
expect(container).toMatchSnapshot();
4848
});
49+
50+
it(`doesn't override cellPadding and cellSpacing`, async () => {
51+
const actualOutput = await jsxToString(
52+
<Container cellPadding={10} cellSpacing={10} containerWidth={300}>
53+
<button>Hi</button>
54+
</Container>
55+
);
56+
expect(actualOutput).toMatchSnapshot();
57+
});
4958
});

‎packages/jsx-email/test/render/.snapshots/render.test.tsx.snap

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -271,11 +271,11 @@ exports[`render > inlining 2`] = `
271271
<body class=\\"mx-auto my-auto bg-white font-sans dark:bg-black\\">
272272
<div style=\\"table-layout:fixed;width:100%\\">
273273
<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>
274-
<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\\">
274+
<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\\">
275275
<tbody>
276276
<tr style=\\"width:100%\\">
277277
<td align=\\"center\\">
278-
<table align=\\"center\\" width=\\"100%\\" class=\\"mt-[32px]\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\">
278+
<table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" class=\\"mt-[32px]\\">
279279
<tbody>
280280
<tr>
281281
<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`] = `
302302
</tr>
303303
</tbody>
304304
</table>
305-
<table align=\\"center\\" width=\\"100%\\" class=\\"mb-[32px] mt-[32px] text-center\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\">
305+
<table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" class=\\"mb-[32px] mt-[32px] text-center\\">
306306
<tbody>
307307
<tr>
308308
<td>
@@ -541,7 +541,7 @@ exports[`render > renders the vercel demo template 1`] = `
541541
.dark\\\\:bg-black{background-color:rgb(0,0,0);}
542542
@media (prefers-color-scheme: dark){
543543
.dark\\\\:bg-black{background-color:rgb(0,0,0);}}
544-
}</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]>
544+
}</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]>
545545
<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>
546546
<w:anchorlock/>
547547
<center style=\\"font-size:12px;color:#FFFFFF;\\">
@@ -721,11 +721,11 @@ exports[`render > renders the vercel demo template 2`] = `
721721
<body class=\\"mx-auto my-auto bg-white font-sans dark:bg-black\\">
722722
<div style=\\"table-layout:fixed;width:100%\\">
723723
<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>
724-
<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\\">
724+
<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\\">
725725
<tbody>
726726
<tr style=\\"width:100%\\">
727727
<td align=\\"center\\">
728-
<table align=\\"center\\" width=\\"100%\\" class=\\"mt-[32px]\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\">
728+
<table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" class=\\"mt-[32px]\\">
729729
<tbody>
730730
<tr>
731731
<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`] = `
752752
</tr>
753753
</tbody>
754754
</table>
755-
<table align=\\"center\\" width=\\"100%\\" class=\\"mb-[32px] mt-[32px] text-center\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\">
755+
<table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\" class=\\"mb-[32px] mt-[32px] text-center\\">
756756
<tbody>
757757
<tr>
758758
<td>

‎packages/jsx-email/test/row.test.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,11 @@ describe('<Row> component', async () => {
3131
const actualOutput = await jsxToString(<Row children={void 0} />);
3232
expect(actualOutput).toMatchSnapshot();
3333
});
34+
35+
it(`doesn't override cellPadding and cellSpacing`, async () => {
36+
const actualOutput = await jsxToString(
37+
<Row cellPadding={10} cellSpacing={10} children={void 0} />
38+
);
39+
expect(actualOutput).toMatchSnapshot();
40+
});
3441
});

‎packages/jsx-email/test/section.test.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,13 @@ describe('<Section> component', async () => {
6161
const tdChildrenArr = actualOutput.match(/<td\s*.*?>.*?<\/td>/g);
6262
expect(tdChildrenArr).toHaveLength(1);
6363
});
64+
65+
it(`doesn't override cellPadding and cellSpacing`, async () => {
66+
const actualOutput = await jsxToString(
67+
<Section cellPadding={10} cellSpacing={10}>
68+
<td>Lorem ipsum</td>
69+
</Section>
70+
);
71+
expect(actualOutput).toMatchSnapshot();
72+
});
6473
});

‎test/smoke/moon.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ tasks:
3434
- ~:setup.ci
3535
env:
3636
DOT_LOG_LEVEL: debug
37+
LOCAL_SMOKE: 'true'
3738
options:
3839
cache: false
3940
outputStyle: 'stream'

‎test/smoke/tests/.snapshots/smoke.test.ts-Code-chromium.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,11 @@
9292
<table
9393
align="center"
9494
width="100%"
95-
class="border-separate border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]"
9695
role="presentation"
9796
cellspacing="0"
9897
cellpadding="0"
9998
border="0"
99+
class="border-separate border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]"
100100
style="max-width:600px"
101101
>
102102
<tbody>

0 commit comments

Comments
 (0)