Skip to content

Commit 7fa430d

Browse files
gabrielmferngabrielmfern
authored
chore(tailwind): add a warning for safelist and make it do nothing (#1920)
1 parent ad0eeeb commit 7fa430d

File tree

4 files changed

+83
-0
lines changed

4 files changed

+83
-0
lines changed

‎.changeset/red-points-jam.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-email/tailwind": patch
3+
---
4+
5+
Add a warning when using `safelist` and force it to change no behavior

‎packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,45 @@ exports[`Tailwind component > should preserve mso styles 1`] = `"<!DOCTYPE html
2828
2929
exports[`Tailwind component > should recognize custom responsive screen 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"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--><style>@media(min-width:1280px){.xl_bg-green-500{background-color:rgb(34,197,94) !important}}@media(min-width:1536px){.twoxl_bg-blue-500{background-color:rgb(59,130,246) !important}}</style></head><div class="xl_bg-green-500" style="background-color:rgb(254,226,226)">Test</div><div class="twoxl_bg-blue-500">Test</div><!--/$--></html>"`;
3030
31+
exports[`Tailwind component > should warn about safelist not being supported 1`] = `
32+
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
33+
<head>
34+
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
35+
<meta name="x-apple-disable-message-reformatting" />
36+
<!--$-->
37+
<style>
38+
@media(min-width:768px){.md_p-4{padding:1rem !important}}
39+
</style>
40+
</head>
41+
<body>
42+
<button type="button" class="md_p-4" style="background-color:rgb(37,99,235)">
43+
Click me</button
44+
><!--/$-->
45+
</body>
46+
"
47+
`;
48+
3149
exports[`Tailwind component > should work properly with 'no-underline' 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"><head></head><!--$--><body><p style="font-size:14px;color:rgb(0,0,0);line-height:24px">or copy and paste this URL into your browser:<!-- --> <a class="other" href="https://react.email" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://react.email</a></p><p style="font-size:14px;color:rgb(0,0,0);line-height:24px">or copy and paste this URL into your browser:<!-- --> <a href="https://react.email" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://react.email</a></p><!--/$--></body></html>"`;
3250
3351
exports[`Tailwind component > should work with Heading component 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$-->Hello<h1>My testing heading</h1>friends<!--/$-->"`;
3452
53+
exports[`Tailwind component > should work with blocklist 1`] = `
54+
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
55+
<head>
56+
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
57+
<meta name="x-apple-disable-message-reformatting" />
58+
<!--$-->
59+
<style>
60+
@media(min-width:768px){.md_p-4{padding:1rem !important}}
61+
</style>
62+
</head>
63+
<body>
64+
<button type="button" class="bg-blue-600 md_p-4">Click me</button
65+
><!--/$-->
66+
</body>
67+
"
68+
`;
69+
3570
exports[`Tailwind component > should work with calc() with + sign 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><!--$--><style>@media(min-width:1024px){.lg_max-h-calc50pxplus5rem{max-height:calc(50px + 5rem) !important}}</style></head><div class="lg_max-h-calc50pxplus5rem" style="max-height:calc(50px + 3rem);background-color:rgb(254,226,226)"><div style="height:200px">something tall</div></div><!--/$-->"`;
3671
3772
exports[`Tailwind component > should work with class manipulation done on components 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="padding:4px;color:rgb(96,165,250);background-color:rgb(239,68,68)"></div><!--/$-->"`;

‎packages/tailwind/src/tailwind.spec.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Link } from '@react-email/link';
77
import { render } from '@react-email/render';
88
import { ResponsiveColumn, ResponsiveRow } from '@responsive-email/react-email';
99
import React from 'react';
10+
import { vi } from 'vitest';
1011
import type { TailwindConfig } from '.';
1112
import { Tailwind } from '.';
1213

@@ -23,6 +24,41 @@ describe('Tailwind component', () => {
2324
expect(actualOutput).toMatchSnapshot();
2425
});
2526

27+
it('should work with blocklist', async () => {
28+
const actualOutput = await render(
29+
<Tailwind config={{ blocklist: ['bg-blue-600'] }}>
30+
<Head />
31+
<body>
32+
<button type="button" className="bg-blue-600 md:p-4">
33+
Click me
34+
</button>
35+
</body>
36+
</Tailwind>,
37+
{ pretty: true },
38+
);
39+
40+
expect(actualOutput).toMatchSnapshot();
41+
});
42+
43+
it('should warn about safelist not being supported', async () => {
44+
const spy = vi.spyOn(console, 'warn');
45+
46+
const actualOutput = await render(
47+
<Tailwind config={{ safelist: ['bg-red-500'] }}>
48+
<Head />
49+
<body>
50+
<button type="button" className="bg-blue-600 md:p-4">
51+
Click me
52+
</button>
53+
</body>
54+
</Tailwind>,
55+
{ pretty: true },
56+
);
57+
58+
expect(spy).toHaveBeenCalled();
59+
expect(actualOutput).toMatchSnapshot();
60+
});
61+
2662
it('should work with class manipulation done on components', async () => {
2763
const MyComponnt = (props: {
2864
className?: string;

‎packages/tailwind/src/utils/tailwindcss/setup-tailwind.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@ const tailwindAtRulesRoot = parse(
2121
).root();
2222

2323
export function setupTailwind(config: TailwindConfig) {
24+
// See https://github.com/resend/react-email/issues/1907#issuecomment-2668720428
25+
if ('safelist' in config) {
26+
console.warn(
27+
'The `safelist` option is not supported in the `Tailwind` component, it will not change any behavior.',
28+
);
29+
delete config.safelist;
30+
}
2431
const tailwindContext = setupTailwindContext(config);
2532
return {
2633
generateRootForClasses: (classes: string[]) => {

0 commit comments

Comments
 (0)