react-email 6.0.8 → 6.1.1
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.
- package/CHANGELOG.md +12 -0
- package/dist/cli/index.mjs +1 -1
- package/dist/index.cjs +3 -9
- package/dist/index.mjs +3 -9
- package/package.json +1 -1
- package/src/components/hr/hr.spec.tsx +1 -1
- package/src/components/hr/hr.tsx +1 -0
- package/src/components/tailwind/tailwind.spec.tsx +29 -5
- package/src/components/tailwind/tailwind.tsx +3 -10
- package/src/components/tailwind/__snapshots__/tailwind.spec.tsx.snap +0 -25
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# react-email
|
|
2
2
|
|
|
3
|
+
## 6.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 3c62bd0: fix divider with extra borders around other corners
|
|
8
|
+
|
|
9
|
+
## 6.1.0
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 47eeece: Tailwind: clearer error when `<Head>` is outside `<Tailwind>`
|
|
14
|
+
|
|
3
15
|
## 6.0.8
|
|
4
16
|
|
|
5
17
|
### 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.
|
|
6525
|
+
version: "6.1.1",
|
|
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
|
@@ -17569,6 +17569,7 @@ const Hr = react.forwardRef(({ style, ...props }, ref) => /* @__PURE__ */ (0, re
|
|
|
17569
17569
|
style: {
|
|
17570
17570
|
width: "100%",
|
|
17571
17571
|
border: "none",
|
|
17572
|
+
borderColor: "transparent",
|
|
17572
17573
|
borderTop: "1px solid #eaeaea",
|
|
17573
17574
|
...style
|
|
17574
17575
|
}
|
|
@@ -40577,15 +40578,8 @@ function Tailwind({ children, config }) {
|
|
|
40577
40578
|
}
|
|
40578
40579
|
return node;
|
|
40579
40580
|
});
|
|
40580
|
-
if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`
|
|
40581
|
-
|
|
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.`);
|
|
40581
|
+
if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`Tailwind: <head> not found inside <Tailwind>.
|
|
40582
|
+
Move <Head /> inside <Tailwind>, or remove these classes that require a <head>: ${Array.from(nonInlinableRules.keys()).join(" ")}.`);
|
|
40589
40583
|
return mappedChildren;
|
|
40590
40584
|
}
|
|
40591
40585
|
//#endregion
|
package/dist/index.mjs
CHANGED
|
@@ -17548,6 +17548,7 @@ const Hr = React$1.forwardRef(({ style, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
|
17548
17548
|
style: {
|
|
17549
17549
|
width: "100%",
|
|
17550
17550
|
border: "none",
|
|
17551
|
+
borderColor: "transparent",
|
|
17551
17552
|
borderTop: "1px solid #eaeaea",
|
|
17552
17553
|
...style
|
|
17553
17554
|
}
|
|
@@ -40556,15 +40557,8 @@ function Tailwind({ children, config }) {
|
|
|
40556
40557
|
}
|
|
40557
40558
|
return node;
|
|
40558
40559
|
});
|
|
40559
|
-
if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`
|
|
40560
|
-
|
|
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.`);
|
|
40560
|
+
if (hasNonInlineStylesToApply && !appliedNonInlineStyles) throw new Error(`Tailwind: <head> not found inside <Tailwind>.
|
|
40561
|
+
Move <Head /> inside <Tailwind>, or remove these classes that require a <head>: ${Array.from(nonInlinableRules.keys()).join(" ")}.`);
|
|
40568
40562
|
return mappedChildren;
|
|
40569
40563
|
}
|
|
40570
40564
|
//#endregion
|
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@ describe('<Hr> component', () => {
|
|
|
16
16
|
it('renders correctly', async () => {
|
|
17
17
|
const actualOutput = await render(<Hr />);
|
|
18
18
|
expect(actualOutput).toMatchInlineSnapshot(
|
|
19
|
-
`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><hr style="width:100%;border:none;border-top:1px solid #eaeaea"/><!--/$-->"`,
|
|
19
|
+
`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><hr style="width:100%;border:none;border-color:transparent;border-top:1px solid #eaeaea"/><!--/$-->"`,
|
|
20
20
|
);
|
|
21
21
|
});
|
|
22
22
|
});
|
package/src/components/hr/hr.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>
|
|
@@ -327,7 +330,7 @@ describe('Tailwind component', () => {
|
|
|
327
330
|
);
|
|
328
331
|
|
|
329
332
|
expect(actualOutput).toMatchInlineSnapshot(
|
|
330
|
-
`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><hr style="width:3rem;border:none;border-top:1px solid #eaeaea"/><!--/$-->"`,
|
|
333
|
+
`"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><hr style="width:3rem;border:none;border-color:transparent;border-top:1px solid #eaeaea"/><!--/$-->"`,
|
|
331
334
|
);
|
|
332
335
|
});
|
|
333
336
|
|
|
@@ -638,9 +641,9 @@ describe('Tailwind component', () => {
|
|
|
638
641
|
);
|
|
639
642
|
}
|
|
640
643
|
|
|
641
|
-
await expect(
|
|
642
|
-
|
|
643
|
-
)
|
|
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.
|
|
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 () => {
|
|
@@ -158,17 +158,10 @@ export function Tailwind({ children, config }: TailwindProps) {
|
|
|
158
158
|
|
|
159
159
|
if (hasNonInlineStylesToApply && !appliedNonInlineStyles) {
|
|
160
160
|
throw new Error(
|
|
161
|
-
`
|
|
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
|
|
|
@@ -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
|
-
`;
|