Skip to content

Commit 8e6ae06

Browse files
committed
chore(tailwind): add test for #2388
1 parent 8f0ae22 commit 8e6ae06

File tree

2 files changed

+40
-10
lines changed

2 files changed

+40
-10
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ exports[`Tailwind component > preserves mso styles 1`] = `
3131
"
3232
`;
3333
34+
exports[`Tailwind component > properly does not inline custom utilities 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>.text-body{color:green!important;@media (prefers-color-scheme:dark){color:orange!important}}</style></head><body class="text-body"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td>this is the body</td></tr></tbody></table><!--/$--></body></html>"`;
35+
3436
exports[`Tailwind component > recognizes custom responsive screen 1`] = `
3537
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3638
<html dir="ltr" lang="en">

packages/tailwind/src/tailwind.spec.tsx

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Body } from '@react-email/body';
12
import { Button } from '@react-email/button';
23
import { Head } from '@react-email/head';
34
import { Heading } from '@react-email/heading';
@@ -7,6 +8,7 @@ import { Link } from '@react-email/link';
78
import { pretty, render } from '@react-email/render';
89
import { ResponsiveColumn, ResponsiveRow } from '@responsive-email/react-email';
910
import React from 'react';
11+
import plugin from 'tailwindcss/plugin';
1012
import type { TailwindConfig } from '.';
1113
import { Tailwind } from '.';
1214

@@ -295,6 +297,32 @@ describe('Tailwind component', () => {
295297
expect(actualOutput).toMatchSnapshot();
296298
});
297299

300+
// See https://github.com/resend/react-email/issues/2388
301+
it('properly does not inline custom utilities', async () => {
302+
const actualOutput = await render(
303+
<Tailwind
304+
config={{
305+
plugins: [
306+
plugin(({ addUtilities }) => {
307+
addUtilities({
308+
'.text-body': {
309+
'@apply text-[green] dark:text-[orange]': {},
310+
},
311+
});
312+
}),
313+
],
314+
}}
315+
>
316+
<Html>
317+
<Head />
318+
<Body className="text-body">this is the body</Body>
319+
</Html>
320+
</Tailwind>,
321+
);
322+
323+
expect(actualOutput).toMatchSnapshot();
324+
});
325+
298326
it('recognizes custom responsive screen', async () => {
299327
const actualOutput = await render(
300328
<Html>
@@ -336,16 +364,16 @@ describe('Tailwind component', () => {
336364

337365
describe('with non-inlinable styles', () => {
338366
/*
339-
This test is because of https://github.com/resend/react-email/issues/1112
340-
which was being caused because we required to, either have our <Head> component,
341-
or a <head> element directly inside the <Tailwind> component for media queries to be applied
342-
onto. The problem with this approach was that the check to see if an element was an instance of
343-
the <Head> component fails after minification as we did it by the function name.
344-
345-
The best solution is to check for the Head element on arbitrarily deep levels of the React tree
346-
and apply the styles there. This also fixes the issue where it would not be allowed to use
347-
Tailwind classes on the <html> element as the <head> would be required directly bellow Tailwind.
348-
*/
367+
This test is because of https://github.com/resend/react-email/issues/1112
368+
which was being caused because we required to, either have our <Head> component,
369+
or a <head> element directly inside the <Tailwind> component for media queries to be applied
370+
onto. The problem with this approach was that the check to see if an element was an instance of
371+
the <Head> component fails after minification as we did it by the function name.
372+
373+
The best solution is to check for the Head element on arbitrarily deep levels of the React tree
374+
and apply the styles there. This also fixes the issue where it would not be allowed to use
375+
Tailwind classes on the <html> element as the <head> would be required directly bellow Tailwind.
376+
*/
349377
it('works with arbitrarily deep (in the React tree) <head> elements', async () => {
350378
expect(
351379
await render(

0 commit comments

Comments
 (0)