You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
exports[`Custom plugins config > should be able to use custom plugins 1`] =`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="border:2px solid"></div><!--/$-->"`;
4
+
5
+
exports[`Custom plugins config > should be able to use custom plugins with responsive styles 1`] =`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmllang="en"><head><!--$--><style>@media(min-width:640px){.sm_border-custom{border:2pxsolid!important}}</style></head><body><divclass="sm_border-custom"style="border:2px solid"></div><!--/$--></body></html>"`;
6
+
7
+
exports[`Custom theme config > should be able to use custom border radius 1`] =`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="border-radius:2rem"></div><!--/$-->"`;
8
+
9
+
exports[`Custom theme config > should be able to use custom colors 1`] =`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="color:rgb(31,182,255);background-color:rgb(31,182,255)"></div><!--/$-->"`;
10
+
11
+
exports[`Custom theme config > should be able to use custom fonts 1`] =`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="font-family:Graphik, sans-serif"></div><divstyle="font-family:Merriweather, serif"></div><!--/$-->"`;
12
+
13
+
exports[`Custom theme config > should be able to use custom spacing 1`] =`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="margin:96rem"></div><!--/$-->"`;
14
+
15
+
exports[`Custom theme config > should be able to use custom text alignment 1`] =`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="text-align:justify"></div><!--/$-->"`;
16
+
17
+
exports[`Responsive styles > should add css to <head/> and keep responsive class names 1`] =`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmllang="en"><head><!--$--><style>@media(min-width:640px){.sm_bg-red-300{background-color:rgb(252,165,165)!important}}@media(min-width:768px){.md_bg-red-400{background-color:rgb(248,113,113)!important}}@media(min-width:1024px){.lg_bg-red-500{background-color:rgb(239,68,68)!important}}</style></head><body><divclass="sm_bg-red-300 md_bg-red-400 lg_bg-red-500"style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
18
+
19
+
exports[`Responsive styles > should persist existing <head/> elements 1`] =`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmllang="en"><head><!--$--><style></style><link/><style>@media(min-width:640px){.sm_bg-red-500{background-color:rgb(239,68,68)!important}}</style></head><body><divclass="sm_bg-red-500"style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
20
+
3
21
exports[`Responsive styles > should throw an error when used without a <head/> 1`] =`
4
22
[Error: You are trying to use the following Tailwind classes that have media queries: sm:bg-red-500.
5
23
For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
@@ -10,14 +28,34 @@ Make sure that you have either a <head> element at some point inside of the <Tai
10
28
If you do already have a <head> element at some depth, please file a bug https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml.]
11
29
`;
12
30
13
-
exports[`Responsive styles > should work with relatively complex media query utilities 1`] = `"<head><metacontent="text/html; charset=UTF-8"http-equiv="Content-Type"/><metaname="x-apple-disable-message-reformatting"/><style>@media not all and(min-width:640px){.max-sm_text-red-600{color:rgb(220,38,38)!important}}</style></head><pclass="max-sm_text-red-600"style="color:rgb(29,78,216)">I am some text</p>"`;
31
+
exports[`Responsive styles > should work with arbitrarily deep (in the React tree) <head> elements 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmllang="en"><head><!--$--><style>@media(min-width:640px){.sm_bg-red-300{background-color:rgb(252,165,165)!important}}@media(min-width:768px){.md_bg-red-400{background-color:rgb(248,113,113)!important}}@media(min-width:1024px){.lg_bg-red-500{background-color:rgb(239,68,68)!important}}</style></head><body><divclass="sm_bg-red-300 md_bg-red-400 lg_bg-red-500"style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
32
+
33
+
exports[`Responsive styles > should work with arbitrarily deep (in the React tree) <head> elements 2`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmllang="en"><head><!--$--><style>@media(min-width:640px){.sm_bg-red-300{background-color:rgb(252,165,165)!important}}@media(min-width:768px){.md_bg-red-400{background-color:rgb(248,113,113)!important}}@media(min-width:1024px){.lg_bg-red-500{background-color:rgb(239,68,68)!important}}</style></head><body><divclass="sm_bg-red-300 md_bg-red-400 lg_bg-red-500"style="background-color:rgb(254,202,202)"></div><!--/$--></body></html>"`;
34
+
35
+
exports[`Responsive styles > should work with relatively complex media query utilities 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><metacontent="text/html; charset=UTF-8"http-equiv="Content-Type"/><metaname="x-apple-disable-message-reformatting"/><!--$--><style>@media not all and(min-width:640px){.max-sm_text-red-600{color:rgb(220,38,38)!important}}</style></head><pclass="max-sm_text-red-600"style="color:rgb(29,78,216)">I am some text</p><!--/$-->"`;
exports[`Tailwind component > it should not generate styles from text 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$-->container bg-red-500 bg-blue-300<!-- --><!--/$-->"`;
40
+
41
+
exports[`Tailwind component > should allow for complex children manipulation 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><tablealign="center"width="100%"border="0"cellPadding="0"cellSpacing="0"role="presentation"style="text-align:center;font-size:0;padding:0px 0px 0px 0px"><tbody><tr><td><tablealign="center"width="100%"border="0"cellPadding="0"cellSpacing="0"role="presentation"style="max-width:300px;display:inline-block;vertical-align:top;font-size:16px;box-sizing:border-box"><tbody><tr><td>This is the first column</td></tr></tbody></table><tablealign="center"width="100%"border="0"cellPadding="0"cellSpacing="0"role="presentation"style="max-width:300px;display:inline-block;vertical-align:top;font-size:16px;box-sizing:border-box"><tbody><tr><td>This is the second column</td></tr></tbody></table></td></tr></tbody></table><!--/$-->"`;
42
+
43
+
exports[`Tailwind component > should be able to use background image 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="background-image:url(https://example.com/image.png)"></div><!--/$-->"`;
44
+
45
+
exports[`Tailwind component > should not override inline styles with Tailwind styles 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="background-color:red;font-size:12px"></div><!--/$-->"`;
46
+
47
+
exports[`Tailwind component > should preserve mso styles 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmldir="ltr"lang="en"><head><metacontent="text/html; charset=UTF-8"http-equiv="Content-Type"/><metaname="x-apple-disable-message-reformatting"/><!--$--><style>@media(min-width:640px){.sm_bg-red-50{background-color:rgb(254,242,242)!important}.sm_text-sm{font-size:0.875rem!important;line-height:1.25rem!important}}@media(min-width:768px){.md_text-lg{font-size:1.125rem!important;line-height:1.75rem!important}}</style></head><span><!--[if mso]><istyle="letter-spacing: 10px;mso-font-width:-100%;"hidden> </i><![endif]--></span><divclass="sm_bg-red-50 sm_text-sm md_text-lg custom-class"style="background-color:rgb(255,255,255)"></div><!--/$--></html>"`;
48
+
49
+
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"><htmldir="ltr"lang="en"><head><metacontent="text/html; charset=UTF-8"http-equiv="Content-Type"/><metaname="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){.2xl_bg-blue-500{background-color:rgb(59,130,246)!important}}</style></head><divclass="xl_bg-green-500"style="background-color:rgb(254,226,226)">Test</div><divclass="2xl_bg-blue-500">Test</div><!--/$--></html>"`;
50
+
51
+
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<!-- --><!--/$-->"`;
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><divclass="lg_max-h-calc50pxplus5rem"style="max-height:calc(50px + 3rem);background-color:rgb(254,226,226)"><divstyle="height:200px">something tall</div></div><!--/$-->"`;
16
54
17
-
exports[`Tailwind component > should allow for complex children manipulation 1`] = `"<tablealign="center"width="100%"border="0"cellPadding="0"cellSpacing="0"role="presentation"style="text-align:center;font-size:0;padding:0px 0px 0px 0px"><tbody><tr><td><tablealign="center"width="100%"border="0"cellPadding="0"cellSpacing="0"role="presentation"style="max-width:300px;display:inline-block;vertical-align:top;font-size:16px;box-sizing:border-box"><tbody><tr><td>This is the first column</td></tr></tbody></table><tablealign="center"width="100%"border="0"cellPadding="0"cellSpacing="0"role="presentation"style="max-width:300px;display:inline-block;vertical-align:top;font-size:16px;box-sizing:border-box"><tbody><tr><td>This is the second column</td></tr></tbody></table></td></tr></tbody></table>"`;
55
+
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"><!--$--><divstyle="color:rgb(96,165,250);background-color:rgb(239,68,68)"></div><!--/$-->"`;
18
56
19
-
exports[`Tailwind component > should not override inline styles with Tailwind styles 1`] = `"<divstyle="background-color:red;font-size:12px"></div>"`;
57
+
exports[`Tailwind component > should work with components that return children 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="font-size:50px;line-height:1;margin-top:100px">Hello world</div><divstyle="padding:20px"><pstyle="font-weight:700;font-size:50px">React Email</p></div><!--/$-->"`;
20
58
21
-
exports[`Tailwind component > should work with Heading component 1`] = `"Hello<h1>My testing heading</h1>friends"`;
59
+
exports[`Tailwind component > should work with components that use React.forwardRef 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="font-size:50px;line-height:1;margin-top:100px">Hello world</div><divstyle="padding:20px"><pstyle="font-weight:700;font-size:50px">React Email</p></div><!--/$-->"`;
22
60
23
-
exports[`Tailwind component > should work with class manipulation done on components 1`] = `"<divstyle="color:rgb(96,165,250);background-color:rgb(239,68,68)"></div>"`;
61
+
exports[`Tailwind component > should work with custom components with fragment at the root 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><divstyle="font-size:50px;line-height:1;margin-top:100px">Hello world</div><divstyle="padding:20px"><pstyle="font-weight:700;font-size:50px">React Email</p></div><divstyle="padding:20px"><pstyle="font-weight:700;font-size:50px">React Email</p></div><!--/$-->"`;
0 commit comments