react-email 6.0.8 → 6.1.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 (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cli/index.mjs +1 -1
  3. package/dist/index.cjs +2 -9
  4. package/dist/index.mjs +2 -9
  5. package/package.json +1 -1
  6. package/src/components/tailwind/tailwind.spec.tsx +28 -4
  7. package/src/components/tailwind/tailwind.tsx +3 -10
  8. package/src/components/tailwind/__snapshots__/tailwind.spec.tsx.snap +0 -25
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # react-email
2
2
 
3
+ ## 6.1.0
4
+
5
+ ### Patch Changes
6
+
7
+ - 47eeece: Tailwind: clearer error when `<Head>` is outside `<Tailwind>`
8
+
3
9
  ## 6.0.8
4
10
 
5
11
  ### Patch Changes
package/dist/cli/index.mjs CHANGED
@@ -6522,7 +6522,7 @@ const getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFil
6522
6522
  //#region package.json
6523
6523
  var package_default = {
6524
6524
  name: "react-email",
6525
- version: "6.0.8",
6525
+ version: "6.1.0",
6526
6526
  description: "A live preview of your emails right in your browser.",
6527
6527
  bin: { "email": "./dist/cli/index.mjs" },
6528
6528
  type: "module",
package/dist/index.cjs CHANGED
@@ -40577,15 +40577,8 @@ function Tailwind({ children, config }) {
40577
40577
  }
40578
40578
  return node;
40579
40579
  });
40580
- if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`You are trying to use the following Tailwind classes that cannot be inlined: ${Array.from(nonInlinableRules.keys()).join(" ")}.
40581
- For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
40582
- the Tailwind component tried finding a <head> element but just wasn't able to find it.
40583
-
40584
- Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth.
40585
- This can also be our <Head> component.
40586
-
40587
- If you do already have a <head> element at some depth,
40588
- please file a bug https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml.`);
40580
+ if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`Tailwind: <head> not found inside <Tailwind>.
40581
+ Move <Head /> inside <Tailwind>, or remove these classes that require a <head>: ${Array.from(nonInlinableRules.keys()).join(" ")}.`);
40589
40582
  return mappedChildren;
40590
40583
  }
40591
40584
  //#endregion
package/dist/index.mjs CHANGED
@@ -40556,15 +40556,8 @@ function Tailwind({ children, config }) {
40556
40556
  }
40557
40557
  return node;
40558
40558
  });
40559
- if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`You are trying to use the following Tailwind classes that cannot be inlined: ${Array.from(nonInlinableRules.keys()).join(" ")}.
40560
- For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
40561
- the Tailwind component tried finding a <head> element but just wasn't able to find it.
40562
-
40563
- Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth.
40564
- This can also be our <Head> component.
40565
-
40566
- If you do already have a <head> element at some depth,
40567
- please file a bug https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml.`);
40559
+ if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`Tailwind: <head> not found inside <Tailwind>.
40560
+ Move <Head /> inside <Tailwind>, or remove these classes that require a <head>: ${Array.from(nonInlinableRules.keys()).join(" ")}.`);
40568
40561
  return mappedChildren;
40569
40562
  }
40570
40563
  //#endregion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-email",
3
- "version": "6.0.8",
3
+ "version": "6.1.0",
4
4
  "description": "A live preview of your emails right in your browser.",
5
5
  "bin": {
6
6
  "email": "./dist/cli/index.mjs"
package/src/components/tailwind/tailwind.spec.tsx CHANGED
@@ -13,6 +13,9 @@ import type { TailwindConfig } from './tailwind.js';
13
13
  import { Tailwind } from './tailwind.js';
14
14
 
15
15
  describe('Tailwind component', () => {
16
+ const headMissingError =
17
+ 'Tailwind: <head> not found inside <Tailwind>.\nMove <Head /> inside <Tailwind>, or remove these classes that require a <head>:';
18
+
16
19
  it('allows for complex children manipulation', async () => {
17
20
  const actualOutput = await render(
18
21
  <Tailwind>
@@ -638,9 +641,9 @@ describe('Tailwind component', () => {
638
641
  );
639
642
  }
640
643
 
641
- await expect(
642
- renderComplexEmailWithoutHead,
643
- ).rejects.toThrowErrorMatchingSnapshot();
644
+ await expect(renderComplexEmailWithoutHead).rejects.toThrow(
645
+ `${headMissingError} sm:h-10 sm:w-10.`,
646
+ );
644
647
  });
645
648
 
646
649
  it('works with relatively complex media query utilities', async () => {
@@ -668,6 +671,25 @@ describe('Tailwind component', () => {
668
671
  `);
669
672
  });
670
673
 
674
+ it('throws a clear error when <Head> is outside <Tailwind> and dark: classes are used', async () => {
675
+ function renderEmailWithHeadOutsideTailwind() {
676
+ return render(
677
+ <Html>
678
+ <Head />
679
+ <Tailwind>
680
+ <Body className="dark:bg-white dark:text-gray-100">
681
+ this is the body
682
+ </Body>
683
+ </Tailwind>
684
+ </Html>,
685
+ );
686
+ }
687
+
688
+ await expect(renderEmailWithHeadOutsideTailwind).rejects.toThrow(
689
+ `${headMissingError} dark:bg-white dark:text-gray-100.`,
690
+ );
691
+ });
692
+
671
693
  it('throws an error when used without a <head/>', async () => {
672
694
  function noHead() {
673
695
  return render(
@@ -679,7 +701,9 @@ describe('Tailwind component', () => {
679
701
  </Tailwind>,
680
702
  ).then(pretty);
681
703
  }
682
- await expect(noHead).rejects.toThrowErrorMatchingSnapshot();
704
+ await expect(noHead).rejects.toThrow(
705
+ `${headMissingError} sm:bg-red-500.`,
706
+ );
683
707
  });
684
708
 
685
709
  it('persists existing <head/> elements', async () => {
package/src/components/tailwind/tailwind.tsx CHANGED
@@ -158,17 +158,10 @@ export function Tailwind({ children, config }: TailwindProps) {
158
158
 
159
159
  if (hasNonInlineStylesToApply && !appliedNonInlineStyles) {
160
160
  throw new Error(
161
- `You are trying to use the following Tailwind classes that cannot be inlined: ${Array.from(
161
+ `Tailwind: <head> not found inside <Tailwind>.
162
+ Move <Head /> inside <Tailwind>, or remove these classes that require a <head>: ${Array.from(
162
163
  nonInlinableRules.keys(),
163
- ).join(' ')}.
164
- For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
165
- the Tailwind component tried finding a <head> element but just wasn't able to find it.
166
-
167
- Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth.
168
- This can also be our <Head> component.
169
-
170
- If you do already have a <head> element at some depth,
171
- please file a bug https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml.`,
164
+ ).join(' ')}.`,
172
165
  );
173
166
  }
174
167
 
package/src/components/tailwind/__snapshots__/tailwind.spec.tsx.snap DELETED
@@ -1,25 +0,0 @@
1
- // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
-
3
- exports[`Tailwind component > with non-inlinable styles > throws an error when used without a <head/> 1`] = `
4
- [Error: You are trying to use the following Tailwind classes that cannot be inlined: sm:bg-red-500.
5
- For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
6
- the Tailwind component tried finding a <head> element but just wasn't able to find it.
7
-
8
- Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth.
9
- This can also be our <Head> component.
10
-
11
- If you do already have a <head> element at some depth,
12
- please file a bug https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml.]
13
- `;
14
-
15
- exports[`Tailwind component > with non-inlinable styles > throws error when used without the head and with media query class names very deeply nested 1`] = `
16
- [Error: You are trying to use the following Tailwind classes that cannot be inlined: sm:h-10 sm:w-10.
17
- For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
18
- the Tailwind component tried finding a <head> element but just wasn't able to find it.
19
-
20
- Make sure that you have a <head> element at some point inside of the <Tailwind> component at any depth.
21
- This can also be our <Head> component.
22
-
23
- If you do already have a <head> element at some depth,
24
- please file a bug https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml.]
25
- `;