Skip to content

Commit 524df35

Browse files
shellscapeshellscape
authored
fix(jsx-email): assert media query for Tailwind dark mode variants (#167)
1 parent 06f191c commit 524df35

File tree

5 files changed

+103
-24
lines changed

5 files changed

+103
-24
lines changed

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,12 @@ const getUno = (config: ConfigBase, production: boolean) => {
4949
config.theme = { ...config.theme, ...extend };
5050
}
5151

52-
const presets = [...(config.presets || []), presetTypography(), presetUno(), presetWind()];
52+
const presets = [
53+
...(config.presets || []),
54+
presetTypography(),
55+
presetUno({ dark: 'media' }),
56+
presetWind()
57+
];
5358
const uno = createGenerator({
5459
...(config as any),
5560
presets,

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

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,12 @@ exports[`render > renders the vercel demo template 1`] = `
180180
.font-semibold{font-weight:600;}
181181
.leading-\\\\[24px\\\\]{line-height:24px;}
182182
.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,\\"Helvetica Neue\\",Arial,\\"Noto Sans\\",sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\",\\"Noto Color Emoji\\";}
183-
.no-underline{text-decoration:none;}</style></head><body class=\\"bg-white my-auto mx-auto font-sans\\"><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\\" style=\\"max-width:37.5em\\"><tbody><tr style=\\"width:100%\\"><td><table align=\\"center\\" width=\\"100%\\" class=\\"mt-[32px]\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\"><tbody><tr><td><img class=\\"my-0 mx-auto\\" 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=\\"text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0\\" style>Join <strong></strong> on <strong>Vercel</strong></h1><p class=\\"text-black text-[14px] leading-[24px]\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">Hello,</p><p class=\\"text-black text-[14px] leading-[24px]\\" 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=\\"text-center mt-[32px] mb-[32px]\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\"><tbody><tr><td><a class=\\"bg-[#000000] rounded text-white text-[12px] px-5 py-3 font-semibold no-underline text-center\\" href style=\\"display:inline-block;line-height:100%;max-width:100%;text-decoration:none\\"><span><!--[if mso]><i style=\\"mso-font-width:-100%;\\" hidden>&nbsp;</i><![endif]--></span><span style=\\"display:inline-block;line-height:120%;max-width:100%;mso-padding-alt:0px;mso-text-raise:0\\">Join the team</span><span><!--[if mso]><i style=\\"mso-font-width:-100%\\" hidden>&nbsp;</i><![endif]--></span></a></td></tr></tbody></table><p class=\\"text-black !text-[14px] leading-[24px]\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">or copy and paste this URL into your browser: <a href class=\\"text-blue-600 no-underline\\" style=\\"color:#067df7;text-decoration:none\\"></a></p><hr class=\\"border border-solid border-[#eaeaea] my-[26px] mx-0 w-full\\" style=\\"border:none;border-top:1px solid #eaeaea;width:100%\\"><p class=\\"text-[#666666] !text-[12px] leading-[24px]\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">This invitation was intended for <span class=\\"text-black\\"> </span>.This invite was sent from <span class=\\"text-black\\"></span> located in <span class=\\"text-black\\"></span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table></body></html>"
183+
.no-underline{text-decoration:none;}
184+
@media (prefers-color-scheme: dark){
185+
.dark\\\\:bg-black{background-color:rgb(0,0,0);}
186+
@media (prefers-color-scheme: dark){
187+
.dark\\\\:bg-black{background-color:rgb(0,0,0);}}
188+
}</style></head><body class=\\"mx-auto my-auto bg-white font-sans dark:bg-black\\"><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:37.5em\\"><tbody><tr style=\\"width:100%\\"><td><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><a class=\\"rounded bg-[#000000] px-5 py-3 text-center text-[12px] font-semibold text-white no-underline\\" href style=\\"display:inline-block;line-height:100%;max-width:100%;text-decoration:none\\"><span><!--[if mso]><i style=\\"mso-font-width:-100%;\\" hidden>&nbsp;</i><![endif]--></span><span style=\\"display:inline-block;line-height:120%;max-width:100%;mso-padding-alt:0px;mso-text-raise:0\\">Join the team</span><span><!--[if mso]><i style=\\"mso-font-width:-100%\\" hidden>&nbsp;</i><![endif]--></span></a></td></tr></tbody></table><p class=\\"!text-[14px] leading-[24px] text-black\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">or copy and paste this URL into your browser: <a href class=\\"text-blue-600 no-underline\\" style=\\"color:#067df7;text-decoration:none\\"></a></p><hr class=\\"mx-0 my-[26px] w-full border border-solid border-[#eaeaea]\\" style=\\"border:none;border-top:1px solid #eaeaea;width:100%\\"><p class=\\"!text-[12px] leading-[24px] text-[#666666]\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">This invitation was intended for <span class=\\"text-black\\"> </span>.This invite was sent from <span class=\\"text-black\\"></span> located in <span class=\\"text-black\\"></span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table></body></html>"
184189
`;
185190
186191
exports[`render > renders the vercel demo template 2`] = `
@@ -352,24 +357,36 @@ exports[`render > renders the vercel demo template 2`] = `
352357
.no-underline {
353358
text-decoration: none;
354359
}
360+
361+
@media (prefers-color-scheme: dark) {
362+
.dark\\\\:bg-black {
363+
background-color: rgb(0, 0, 0);
364+
}
365+
366+
@media (prefers-color-scheme: dark) {
367+
.dark\\\\:bg-black {
368+
background-color: rgb(0, 0, 0);
369+
}
370+
}
371+
}
355372
</style>
356373
</head>
357374
358-
<body class=\\"bg-white my-auto mx-auto font-sans\\">
359-
<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\\" style=\\"max-width:37.5em\\">
375+
<body class=\\"mx-auto my-auto bg-white font-sans dark:bg-black\\">
376+
<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:37.5em\\">
360377
<tbody>
361378
<tr style=\\"width:100%\\">
362379
<td>
363380
<table align=\\"center\\" width=\\"100%\\" class=\\"mt-[32px]\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\">
364381
<tbody>
365382
<tr>
366-
<td><img class=\\"my-0 mx-auto\\" alt=\\"Vercel\\" src=\\"vercel-logo.png\\" width=\\"40\\" height=\\"37\\" style=\\"border:none;display:block;outline:none;text-decoration:none\\"></td>
383+
<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>
367384
</tr>
368385
</tbody>
369386
</table>
370-
<h1 class=\\"text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0\\" style>Join <strong></strong> on <strong>Vercel</strong></h1>
371-
<p class=\\"text-black text-[14px] leading-[24px]\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">Hello,</p>
372-
<p class=\\"text-black text-[14px] leading-[24px]\\" 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>
387+
<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>
388+
<p class=\\"text-[14px] leading-[24px] text-black\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">Hello,</p>
389+
<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>
373390
<table align=\\"center\\" width=\\"100%\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\">
374391
<tbody>
375392
<tr>
@@ -387,16 +404,16 @@ exports[`render > renders the vercel demo template 2`] = `
387404
</tr>
388405
</tbody>
389406
</table>
390-
<table align=\\"center\\" width=\\"100%\\" class=\\"text-center mt-[32px] mb-[32px]\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\">
407+
<table align=\\"center\\" width=\\"100%\\" class=\\"mb-[32px] mt-[32px] text-center\\" border=\\"0\\" cellpadding=\\"0\\" cellspacing=\\"0\\" role=\\"presentation\\">
391408
<tbody>
392409
<tr>
393-
<td><a class=\\"bg-[#000000] rounded text-white text-[12px] px-5 py-3 font-semibold no-underline text-center\\" href style=\\"display:inline-block;line-height:100%;max-width:100%;text-decoration:none\\"><span><!--[if mso]><i style=\\"mso-font-width:-100%;\\" hidden>&nbsp;</i><![endif]--></span><span style=\\"display:inline-block;line-height:120%;max-width:100%;mso-padding-alt:0px;mso-text-raise:0\\">Join the team</span><span><!--[if mso]><i style=\\"mso-font-width:-100%\\" hidden>&nbsp;</i><![endif]--></span></a></td>
410+
<td><a class=\\"rounded bg-[#000000] px-5 py-3 text-center text-[12px] font-semibold text-white no-underline\\" href style=\\"display:inline-block;line-height:100%;max-width:100%;text-decoration:none\\"><span><!--[if mso]><i style=\\"mso-font-width:-100%;\\" hidden>&nbsp;</i><![endif]--></span><span style=\\"display:inline-block;line-height:120%;max-width:100%;mso-padding-alt:0px;mso-text-raise:0\\">Join the team</span><span><!--[if mso]><i style=\\"mso-font-width:-100%\\" hidden>&nbsp;</i><![endif]--></span></a></td>
394411
</tr>
395412
</tbody>
396413
</table>
397-
<p class=\\"text-black !text-[14px] leading-[24px]\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">or copy and paste this URL into your browser: <a href class=\\"text-blue-600 no-underline\\" style=\\"color:#067df7;text-decoration:none\\"></a></p>
398-
<hr class=\\"border border-solid border-[#eaeaea] my-[26px] mx-0 w-full\\" style=\\"border:none;border-top:1px solid #eaeaea;width:100%\\">
399-
<p class=\\"text-[#666666] !text-[12px] leading-[24px]\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">This invitation was intended for <span class=\\"text-black\\"> </span>.This invite was sent from <span class=\\"text-black\\"></span> located in <span class=\\"text-black\\"></span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch with us.</p>
414+
<p class=\\"!text-[14px] leading-[24px] text-black\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">or copy and paste this URL into your browser: <a href class=\\"text-blue-600 no-underline\\" style=\\"color:#067df7;text-decoration:none\\"></a></p>
415+
<hr class=\\"mx-0 my-[26px] w-full border border-solid border-[#eaeaea]\\" style=\\"border:none;border-top:1px solid #eaeaea;width:100%\\">
416+
<p class=\\"!text-[12px] leading-[24px] text-[#666666]\\" style=\\"font-size:14px;line-height:24px;margin:16px 0\\">This invitation was intended for <span class=\\"text-black\\"> </span>.This invite was sent from <span class=\\"text-black\\"></span> located in <span class=\\"text-black\\"></span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch with us.</p>
400417
</td>
401418
</tr>
402419
</tbody>

‎packages/jsx-email/test/render/fixtures/tailwind.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable */
12
import {
23
Body,
34
Button,
@@ -19,22 +20,22 @@ export const Template = () => (
1920
<Html>
2021
<Head />
2122
<Tailwind>
22-
<Body className="bg-white my-auto mx-auto font-sans">
23-
<Container className="border-separate border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
23+
<Body className="mx-auto my-auto bg-white font-sans dark:bg-black">
24+
<Container className="mx-auto my-[40px] w-[465px] border-separate rounded border border-solid border-[#eaeaea] p-[20px]">
2425
<Section className="mt-[32px]">
2526
<Img
2627
src={`vercel-logo.png`}
2728
width="40"
2829
height="37"
2930
alt="Vercel"
30-
className="my-0 mx-auto"
31+
className="mx-auto my-0"
3132
/>
3233
</Section>
33-
<Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
34+
<Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black">
3435
Join <strong></strong> on <strong>Vercel</strong>
3536
</Heading>
36-
<Text className="text-black text-[14px] leading-[24px]">Hello,</Text>
37-
<Text className="text-black text-[14px] leading-[24px]">
37+
<Text className="text-[14px] leading-[24px] text-black">Hello,</Text>
38+
<Text className="text-[14px] leading-[24px] text-black">
3839
<strong></strong> (<Link href={`mailto:`} className="text-blue-600 no-underline"></Link>
3940
) has invited you to the <strong></strong> team on <strong>Vercel</strong>.
4041
</Text>
@@ -51,20 +52,20 @@ export const Template = () => (
5152
</Column>
5253
</Row>
5354
</Section>
54-
<Section className="text-center mt-[32px] mb-[32px]">
55+
<Section className="mb-[32px] mt-[32px] text-center">
5556
<Button
56-
className="bg-[#000000] rounded text-white text-[12px] px-5 py-3 font-semibold no-underline text-center"
57+
className="rounded bg-[#000000] px-5 py-3 text-center text-[12px] font-semibold text-white no-underline"
5758
href=""
5859
>
5960
Join the team
6061
</Button>
6162
</Section>
62-
<Text className="text-black !text-[14px] leading-[24px]">
63+
<Text className="!text-[14px] leading-[24px] text-black">
6364
or copy and paste this URL into your browser:{' '}
6465
<Link href="" className="text-blue-600 no-underline"></Link>
6566
</Text>
66-
<Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
67-
<Text className="text-[#666666] !text-[12px] leading-[24px]">
67+
<Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
68+
<Text className="!text-[12px] leading-[24px] text-[#666666]">
6869
This invitation was intended for <span className="text-black"> </span>.This invite was
6970
sent from <span className="text-black"></span> located in{' '}
7071
<span className="text-black"></span>. If you were not expecting this invitation, you can

‎scripts/test.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import {
2+
Body,
3+
Button,
4+
Container,
5+
Head,
6+
Hr,
7+
Html,
8+
Link,
9+
Preview,
10+
Section,
11+
Tailwind,
12+
Text
13+
} from 'jsx-email';
14+
15+
export const TemplateName = 'Reproduction';
16+
17+
export const PreviewProps = {
18+
email: '[email protected]',
19+
name: 'Bruce Wayne'
20+
};
21+
22+
export interface TemplateProps {
23+
email?: string;
24+
name?: string;
25+
}
26+
27+
export const Template = ({ email, name }: TemplateProps) => (
28+
<Html>
29+
<Tailwind>
30+
<Head />
31+
<Preview>
32+
This is our email preview text for {name} &lt;{email}&gt;
33+
</Preview>
34+
<Body className="m-0 bg-neutral-100 dark:bg-black">
35+
<Container>
36+
<Section>
37+
<Text>This is our email body text</Text>
38+
<Button href="https://example.com">Action Button</Button>
39+
<Hr />
40+
<Text>
41+
This is text content with a <Link href="mailto:{email}">link</Link>.
42+
</Text>
43+
</Section>
44+
</Container>
45+
</Body>
46+
</Tailwind>
47+
</Html>
48+
);

‎scripts/tester.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { jsxToString } from 'jsx-email';
2+
3+
import { Template } from './test';
4+
5+
(async () => {
6+
const res = await jsxToString(<Template />);
7+
console.log(res);
8+
})();

0 commit comments

Comments
 (0)