react-email 6.0.0-canary.2 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dev/CHANGELOG.md +2 -0
  3. package/dev/package.json +1 -1
  4. package/dist/cli/index.mjs +753 -619
  5. package/dist/index.cjs +3837 -3206
  6. package/dist/index.d.cts +2 -2
  7. package/dist/index.d.mts +2 -2
  8. package/dist/index.mjs +3818 -3188
  9. package/package.json +7 -7
  10. package/src/components/body/__snapshots__/body.spec.tsx.snap +11 -11
  11. package/src/components/body/body.spec.tsx +1 -1
  12. package/src/components/head/head.spec.tsx +3 -3
  13. package/src/components/html/html.spec.tsx +1 -1
  14. package/src/components/tailwind/e2e/nextjs/package.json +1 -1
  15. package/src/components/tailwind/tailwind.spec.tsx +19 -21
  16. package/tsdown.config.ts +4 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-email",
3
- "version": "6.0.0-canary.2",
3
+ "version": "6.0.0",
4
4
  "description": "A live preview of your emails right in your browser.",
5
5
  "bin": {
6
6
  "email": "./dist/cli/index.mjs"
@@ -32,13 +32,13 @@
32
32
  "dependencies": {
33
33
  "@babel/parser": "7.27.0",
34
34
  "@babel/traverse": "7.27.0",
35
- "@react-email/render": ">=2.0.7-canary.0",
35
+ "@react-email/render": ">=2.0.7",
36
36
  "chokidar": "^4.0.3",
37
37
  "commander": "^13.0.0",
38
38
  "conf": "^15.0.2",
39
- "css-tree": "3.1.0",
39
+ "css-tree": "3.2.1",
40
40
  "debounce": "^2.0.0",
41
- "esbuild": "0.27.4",
41
+ "esbuild": "0.27.5",
42
42
  "glob": "^13.0.6",
43
43
  "jiti": "2.4.2",
44
44
  "log-symbols": "^7.0.0",
@@ -61,12 +61,12 @@
61
61
  "@types/mime-types": "2.1.4",
62
62
  "@types/prompts": "2.4.9",
63
63
  "next": "16.2.3",
64
- "react": "19.0.0",
65
- "react-dom": "19.0.0",
64
+ "react": "19.2.4",
65
+ "react-dom": "19.2.4",
66
66
  "shlex": "3.0.0",
67
67
  "tsx": "4.21.0",
68
68
  "typescript": "5.9.3",
69
- "@react-email/render": "2.0.7-canary.0"
69
+ "@react-email/render": "2.0.7"
70
70
  },
71
71
  "scripts": {
72
72
  "build": "tsdown",
package/src/components/body/__snapshots__/body.spec.tsx.snap CHANGED
@@ -1,23 +1,23 @@
1
1
  // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
- exports[`<Body> component > margin resetting behavior > should reset the margin property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body style="margin:0"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
3
+ exports[`<Body> component > margin resetting behavior > should reset the margin property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
4
4
 
5
- exports[`<Body> component > margin resetting behavior > should reset the marginBlock property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body style="margin-block:0"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-block:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
5
+ exports[`<Body> component > margin resetting behavior > should reset the marginBlock property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-block:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-block:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
6
6
 
7
- exports[`<Body> component > margin resetting behavior > should reset the marginBlockEnd property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body style="margin-block-end:0"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-block-end:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
7
+ exports[`<Body> component > margin resetting behavior > should reset the marginBlockEnd property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-block-end:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-block-end:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
8
8
 
9
- exports[`<Body> component > margin resetting behavior > should reset the marginBlockStart property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body style="margin-block-start:0"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-block-start:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
9
+ exports[`<Body> component > margin resetting behavior > should reset the marginBlockStart property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-block-start:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-block-start:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
10
10
 
11
- exports[`<Body> component > margin resetting behavior > should reset the marginBottom property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body style="margin-bottom:0"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-bottom:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
11
+ exports[`<Body> component > margin resetting behavior > should reset the marginBottom property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-bottom:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-bottom:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
12
12
 
13
- exports[`<Body> component > margin resetting behavior > should reset the marginInline property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body style="margin-inline:0"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-inline:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
13
+ exports[`<Body> component > margin resetting behavior > should reset the marginInline property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-inline:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-inline:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
14
14
 
15
- exports[`<Body> component > margin resetting behavior > should reset the marginInlineEnd property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body style="margin-inline-end:0"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-inline-end:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
15
+ exports[`<Body> component > margin resetting behavior > should reset the marginInlineEnd property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-inline-end:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-inline-end:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
16
16
 
17
- exports[`<Body> component > margin resetting behavior > should reset the marginInlineStart property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body style="margin-inline-start:0"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-inline-start:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
17
+ exports[`<Body> component > margin resetting behavior > should reset the marginInlineStart property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-inline-start:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-inline-start:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
18
18
 
19
- exports[`<Body> component > margin resetting behavior > should reset the marginLeft property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body style="margin-left:0"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-left:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
19
+ exports[`<Body> component > margin resetting behavior > should reset the marginLeft property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-left:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-left:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
20
20
 
21
- exports[`<Body> component > margin resetting behavior > should reset the marginRight property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body style="margin-right:0"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-right:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
21
+ exports[`<Body> component > margin resetting behavior > should reset the marginRight property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-right:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-right:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
22
22
 
23
- exports[`<Body> component > margin resetting behavior > should reset the marginTop property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body style="margin-top:0"><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-top:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
23
+ exports[`<Body> component > margin resetting behavior > should reset the marginTop property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-top:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-top:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
package/src/components/body/body.spec.tsx CHANGED
@@ -23,7 +23,7 @@ describe('<Body> component', () => {
23
23
  it('renders correctly', async () => {
24
24
  const actualOutput = await render(<Body>Lorem ipsum</Body>);
25
25
  expect(actualOutput).toMatchInlineSnapshot(
26
- `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><body><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td>Lorem ipsum</td></tr></tbody></table><!--/$--></body>"`,
26
+ `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td>Lorem ipsum</td></tr></tbody></table><!--/$--></body>"`,
27
27
  );
28
28
  });
29
29
 
package/src/components/head/head.spec.tsx CHANGED
@@ -11,7 +11,7 @@ describe('<Head> component', () => {
11
11
  it('renders correctly', async () => {
12
12
  const actualOutput = await render(<Head />);
13
13
  expect(actualOutput).toMatchInlineSnapshot(
14
- `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><!--/$-->"`,
14
+ `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/></head><!--$--><!--head--><!--/$-->"`,
15
15
  );
16
16
  });
17
17
 
@@ -26,9 +26,9 @@ describe('<Head> component', () => {
26
26
  </Head>,
27
27
  );
28
28
  expect(actualOutput).toMatchInlineSnapshot(`
29
- "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--><style>body{
29
+ "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><style>body{
30
30
  color: red;
31
- }</style></head><!--/$-->"
31
+ }</style></head><!--$--><!--head--><!--/$-->"
32
32
  `);
33
33
  });
34
34
  });
package/src/components/html/html.spec.tsx CHANGED
@@ -20,7 +20,7 @@ describe('<Html> component', () => {
20
20
  it('renders correctly', async () => {
21
21
  const actualOutput = await render(<Html />);
22
22
  expect(actualOutput).toMatchInlineSnapshot(
23
- `"<!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><!--$--><!--/$--></html>"`,
23
+ `"<!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><!--$--><!--html--><!--/$--></html>"`,
24
24
  );
25
25
  });
26
26
  });
package/src/components/tailwind/e2e/nextjs/package.json CHANGED
@@ -17,7 +17,7 @@
17
17
  },
18
18
  "devDependencies": {
19
19
  "@types/node": "^22.0.0",
20
- "@types/react": "19.2.13",
20
+ "@types/react": "19.2.14",
21
21
  "@types/react-dom": "19.2.3",
22
22
  "typescript": "^5",
23
23
  "yalc": "1.0.0-pre.53"
package/src/components/tailwind/tailwind.spec.tsx CHANGED
@@ -49,13 +49,15 @@ describe('Tailwind component', () => {
49
49
  <head>
50
50
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
51
51
  <meta name="x-apple-disable-message-reformatting" />
52
- <!--$-->
53
52
  <style>
54
53
  .md_p-4{@media (width>=48rem){padding:1rem!important}}
55
54
  </style>
56
55
  </head>
57
56
  <body>
58
- <button type="button" class="bg-blue-600 md_p-4">Click me</button
57
+ <!--$--><!--head--><!--body--><button
58
+ type="button"
59
+ class="bg-blue-600 md_p-4">
60
+ Click me</button
59
61
  ><!--/$-->
60
62
  </body>
61
63
  "
@@ -138,7 +140,7 @@ describe('Tailwind component', () => {
138
140
  </Html>,
139
141
  );
140
142
  expect(actualOutput).toMatchInlineSnapshot(
141
- `"<!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(21,93,252);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(21,93,252);text-decoration-line:none" target="_blank">https://react.email</a></p><!--/$--></body></html>"`,
143
+ `"<!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><!--$--><!--html--><!--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(21,93,252);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(21,93,252);text-decoration-line:none" target="_blank">https://react.email</a></p><!--/$--></body></html>"`,
142
144
  );
143
145
  });
144
146
 
@@ -350,11 +352,10 @@ describe('Tailwind component', () => {
350
352
  <head>
351
353
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
352
354
  <meta name="x-apple-disable-message-reformatting" />
353
- <!--$-->
354
355
  <style>
355
356
  .sm_bg-red-50{@media (width>=40rem){background-color:rgb(254,242,242)!important}}.sm_text-sm{@media (width>=40rem){font-size:0.875rem!important;line-height:1.4285714285714286!important}}.md_text-lg{@media (width>=48rem){font-size:1.125rem!important;line-height:1.5555555555555556!important}}
356
357
  </style></head
357
- ><span
358
+ ><!--$--><!--html--><!--head--><span
358
359
  ><!--[if mso]><i style="letter-spacing: 10px;mso-font-width:-100%;" hidden>&nbsp;</i><![endif]--></span
359
360
  >
360
361
  <div
@@ -390,7 +391,7 @@ describe('Tailwind component', () => {
390
391
  );
391
392
 
392
393
  expect(actualOutput).toMatchInlineSnapshot(
393
- `"<!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{@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 style="color:green">this is the body</td></tr></tbody></table><!--/$--></body></html>"`,
394
+ `"<!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{@media (prefers-color-scheme:dark){color:orange!important}}</style></head><body class="text-body"><!--$--><!--html--><!--head--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="color:green">this is the body</td></tr></tbody></table><!--/$--></body></html>"`,
394
395
  );
395
396
  });
396
397
 
@@ -423,11 +424,10 @@ describe('Tailwind component', () => {
423
424
  <head>
424
425
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
425
426
  <meta name="x-apple-disable-message-reformatting" />
426
- <!--$-->
427
427
  <style>
428
428
  .xl_bg-green-500{@media (width>=1280px){background-color:rgb(0,201,80)!important}}.twoxl_bg-blue-500{@media (width>=1536px){background-color:rgb(43,127,255)!important}}
429
- </style>
430
- </head>
429
+ </style></head
430
+ ><!--$--><!--html--><!--head-->
431
431
  <div class="xl_bg-green-500" style="background-color:rgb(255,226,226)">
432
432
  Test
433
433
  </div>
@@ -451,11 +451,10 @@ describe('Tailwind component', () => {
451
451
  expect(actualOutput).toMatchInlineSnapshot(`
452
452
  "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
453
453
  <head>
454
- <!--$-->
455
454
  <style>
456
455
  .lg_max-h-calc50pxplus5rem{@media (width>=64rem){max-height:calc(50px + 5rem)!important}}
457
- </style>
458
- </head>
456
+ </style></head
457
+ ><!--$--><!--head-->
459
458
  <div
460
459
  class="lg_max-h-calc50pxplus5rem"
461
460
  style="max-height:calc(50px + 3rem);background-color:rgb(255,226,226)">
@@ -494,12 +493,12 @@ describe('Tailwind component', () => {
494
493
  "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
495
494
  <html lang="en">
496
495
  <head>
497
- <!--$-->
498
496
  <style>
499
497
  .sm_bg-red-300{@media (width>=40rem){background-color:rgb(255,162,162)!important}}.md_bg-red-400{@media (width>=48rem){background-color:rgb(255,100,103)!important}}.lg_bg-red-500{@media (width>=64rem){background-color:rgb(251,44,54)!important}}
500
498
  </style>
501
499
  </head>
502
500
  <body>
501
+ <!--$--><!--html--><!--head--><!--body-->
503
502
  <div
504
503
  class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500"
505
504
  style="background-color:rgb(255,201,201)"></div>
@@ -525,7 +524,7 @@ describe('Tailwind component', () => {
525
524
  </Tailwind>,
526
525
  ),
527
526
  ).toMatchInlineSnapshot(
528
- `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head><!--$--><style>.sm_bg-red-300{@media (width>=40rem){background-color:rgb(255,162,162)!important}}.md_bg-red-400{@media (width>=48rem){background-color:rgb(255,100,103)!important}}.lg_bg-red-500{@media (width>=64rem){background-color:rgb(251,44,54)!important}}</style></head><body><div class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(255,201,201)"></div><!--/$--></body></html>"`,
527
+ `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head><style>.sm_bg-red-300{@media (width>=40rem){background-color:rgb(255,162,162)!important}}.md_bg-red-400{@media (width>=48rem){background-color:rgb(255,100,103)!important}}.lg_bg-red-500{@media (width>=64rem){background-color:rgb(251,44,54)!important}}</style></head><body><!--$--><!--html--><!--head--><!--body--><div class="sm_bg-red-300 md_bg-red-400 lg_bg-red-500" style="background-color:rgb(255,201,201)"></div><!--/$--></body></html>"`,
529
528
  );
530
529
  });
531
530
 
@@ -558,12 +557,12 @@ describe('Tailwind component', () => {
558
557
  "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
559
558
  <html lang="en">
560
559
  <head>
561
- <!--$-->
562
560
  <style>
563
561
  .text-body{@media (width>=40rem){color:darkgreen!important}}
564
562
  </style>
565
563
  </head>
566
564
  <body>
565
+ <!--$--><!--html--><!--head--><!--body-->
567
566
  <div class="text-body" style="color:green"></div>
568
567
  <!--/$-->
569
568
  </body>
@@ -588,12 +587,12 @@ describe('Tailwind component', () => {
588
587
  "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
589
588
  <html lang="en">
590
589
  <head>
591
- <!--$-->
592
590
  <style>
593
591
  .hover_bg-red-600{&:hover{@media (hover:hover){background-color:rgb(231,0,11)!important}}}.focus_bg-red-700{&:focus{background-color:rgb(193,0,7)!important}}.sm_bg-red-300{@media (width>=40rem){background-color:rgb(255,162,162)!important}}.sm_hover_bg-red-200{@media (width>=40rem){&:hover{@media (hover:hover){background-color:rgb(255,201,201)!important}}}}.md_bg-red-400{@media (width>=48rem){background-color:rgb(255,100,103)!important}}.lg_bg-red-500{@media (width>=64rem){background-color:rgb(251,44,54)!important}}
594
592
  </style>
595
593
  </head>
596
594
  <body>
595
+ <!--$--><!--html--><!--head--><!--body-->
597
596
  <div
598
597
  class="hover_bg-red-600 focus_bg-red-700 sm_bg-red-300 sm_hover_bg-red-200 md_bg-red-400 lg_bg-red-500"
599
598
  style="background-color:rgb(255,201,201)"></div>
@@ -659,11 +658,10 @@ describe('Tailwind component', () => {
659
658
  <head>
660
659
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
661
660
  <meta name="x-apple-disable-message-reformatting" />
662
- <!--$-->
663
661
  <style>
664
662
  .max-sm_text-red-600{@media (width<40rem){color:rgb(231,0,11)!important}}
665
- </style>
666
- </head>
663
+ </style></head
664
+ ><!--$--><!--head-->
667
665
  <p class="max-sm_text-red-600" style="color:rgb(20,71,230)">I am some text</p>
668
666
  <!--/$-->
669
667
  "
@@ -703,7 +701,6 @@ describe('Tailwind component', () => {
703
701
  "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
704
702
  <html lang="en">
705
703
  <head>
706
- <!--$-->
707
704
  <style>
708
705
  .sm_bg-red-500{@media (width>=40rem){background-color:rgb(251,44,54)!important}}
709
706
  </style>
@@ -711,6 +708,7 @@ describe('Tailwind component', () => {
711
708
  <link />
712
709
  </head>
713
710
  <body>
711
+ <!--$--><!--html--><!--head--><!--body-->
714
712
  <div class="sm_bg-red-500" style="background-color:rgb(255,201,201)"></div>
715
713
  <!--/$-->
716
714
  </body>
@@ -924,12 +922,12 @@ describe('Tailwind component', () => {
924
922
  "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
925
923
  <html lang="en">
926
924
  <head>
927
- <!--$-->
928
925
  <style>
929
926
  .sm_border-custom{@media (width>=40rem){border:2px solid!important}}
930
927
  </style>
931
928
  </head>
932
929
  <body>
930
+ <!--$--><!--html--><!--head--><!--body-->
933
931
  <div class="sm_border-custom" style="border:2px solid"></div>
934
932
  <!--/$-->
935
933
  </body>
package/tsdown.config.ts CHANGED
@@ -47,8 +47,10 @@ export default defineConfig([
47
47
  entry: ['./src/index.ts'],
48
48
  format: ['esm', 'cjs'],
49
49
  outDir: 'dist',
50
- noExternal: ['css-tree'],
51
- external: [/^react($|\/)/, /^react-dom($|\/)/],
50
+ deps: {
51
+ alwaysBundle: ['css-tree'],
52
+ neverBundle: [/^react($|\/)/, /^react-dom($|\/)/],
53
+ },
52
54
  plugins: [hoistCreateRequireImports],
53
55
  },
54
56
  ]);