Skip to content

Commit f48731f

Browse files
bukinoshitabukinoshita
authored
Merge branch 'canary' into dependabot/npm_and_yarn/happy-dom-20.0.2
2 parents 1657480 + ffe1dbe commit f48731f

File tree

70 files changed

+2815
-1092
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+2815
-1092
lines changed

‎.changeset/eighty-ravens-juggle.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-email/preview-server": patch
3+
---
4+
5+
fix compatibility checking not woring with inline object styles, and not working on properties such as `justifyContent`/`justify-content`

‎.changeset/famous-pandas-unite.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@react-email/preview-server": patch
3+
"react-email": patch
4+
---
5+
6+
fallback to not text coloring for Node.js < 20

‎.changeset/grumpy-banks-glow.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-email/tailwind": patch
3+
---
4+
5+
expose `setupTailwind`, `sanitizeDeclarations` and `inlineStyles` for use in the preview server

‎.changeset/pre.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,13 @@
3535
"tsconfig": "0.0.0",
3636
"playground": "0.0.9"
3737
},
38-
"changesets": ["pink-rabbits-deny", "rich-files-stick"]
38+
"changesets": [
39+
"eighty-ravens-juggle",
40+
"famous-pandas-unite",
41+
"grumpy-banks-glow",
42+
"pink-rabbits-deny",
43+
"quick-ways-cross",
44+
"rich-files-stick",
45+
"tasty-poets-slide"
46+
]
3947
}

‎.changeset/quick-ways-cross.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@react-email/render": major
3+
---
4+
5+
Removes deprecated `renderAsync`.
6+
7+
## Migration
8+
9+
Replace `renderAsync` with `render`. It should be a drop-in replacement, without any issues.

‎.changeset/tasty-poets-slide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@react-email/preview-server": major
3+
---
4+
5+
only check compatibility with tailwindcss@4

‎apps/web/components/article-with-multiple-authors/inline-styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const component = (
5353
height={48}
5454
src={author.imgSrc}
5555
style={{
56-
borderRadius: 9999,
56+
borderRadius: '9999px',
5757
display: 'block',
5858
objectFit: 'cover',
5959
objectPosition: 'center',

‎apps/web/components/avatars-circular/inline-styles.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Column, Img, Row } from '@react-email/components';
2+
import { Layout } from '../_components/layout';
3+
4+
export const component = (
5+
<Row>
6+
<Column align="center">
7+
<Img
8+
src="https://github.com/luxonauta.png?size=100"
9+
alt="Lucas de França"
10+
width="30"
11+
height="30"
12+
style={{
13+
display: 'inline-block',
14+
width: '30px',
15+
height: '30px',
16+
borderRadius: '9999px',
17+
}}
18+
/>
19+
</Column>
20+
<Column align="center">
21+
<Img
22+
src="https://github.com/luxonauta.png?size=100"
23+
alt="Lucas de França"
24+
width="42"
25+
height="42"
26+
style={{
27+
display: 'inline-block',
28+
width: '42px',
29+
height: '42px',
30+
borderRadius: '9999px',
31+
}}
32+
/>
33+
</Column>
34+
<Column align="center">
35+
<Img
36+
src="https://github.com/luxonauta.png?size=100"
37+
alt="Lucas de França"
38+
width="54"
39+
height="54"
40+
style={{
41+
display: 'inline-block',
42+
width: '54px',
43+
height: '54px',
44+
borderRadius: '9999px',
45+
}}
46+
/>
47+
</Column>
48+
<Column align="center">
49+
<Img
50+
src="https://github.com/luxonauta.png?size=100"
51+
alt="Lucas de França"
52+
width="66"
53+
height="66"
54+
style={{
55+
display: 'inline-block',
56+
width: '66px',
57+
height: '66px',
58+
borderRadius: '9999px',
59+
}}
60+
/>
61+
</Column>
62+
</Row>
63+
);
64+
65+
export default () => {
66+
return <Layout>{component}</Layout>;
67+
};

‎apps/web/components/avatars-circular/tailwind.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Column, Img, Row } from '@react-email/components';
2+
import { Layout } from '../_components/layout';
3+
4+
export const component = (
5+
<Row>
6+
<Column align="center">
7+
<Img
8+
src="https://github.com/luxonauta.png?size=100"
9+
alt="Lucas de França"
10+
width="30"
11+
height="30"
12+
className="inline-block w-[30px] h-[30px] rounded-full"
13+
/>
14+
</Column>
15+
<Column align="center">
16+
<Img
17+
src="https://github.com/luxonauta.png?size=100"
18+
alt="Lucas de França"
19+
width="42"
20+
height="42"
21+
className="inline-block w-[42px] h-[42px] rounded-full"
22+
/>
23+
</Column>
24+
<Column align="center">
25+
<Img
26+
src="https://github.com/luxonauta.png?size=100"
27+
alt="Lucas de França"
28+
width="54"
29+
height="54"
30+
className="inline-block w-[54px] h-[54px] rounded-full"
31+
/>
32+
</Column>
33+
<Column align="center">
34+
<Img
35+
src="https://github.com/luxonauta.png?size=100"
36+
alt="Lucas de França"
37+
width="66"
38+
height="66"
39+
className="inline-block w-[66px] h-[66px] rounded-full"
40+
/>
41+
</Column>
42+
</Row>
43+
);
44+
45+
export default () => {
46+
return <Layout>{component}</Layout>;
47+
};

‎apps/web/components/avatars-group-stacked/inline-styles.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { Column, Img, Row } from '@react-email/components';
2+
import { Layout } from '../_components/layout';
3+
4+
export const component = (
5+
<Row
6+
width={undefined}
7+
style={{
8+
tableLayout: 'fixed',
9+
borderCollapse: 'collapse',
10+
borderSpacing: 0,
11+
}}
12+
>
13+
<Column
14+
width="44"
15+
height="44"
16+
style={{
17+
height: '44px',
18+
width: '44px',
19+
padding: 0,
20+
textAlign: 'center',
21+
verticalAlign: 'middle',
22+
lineHeight: '0px',
23+
}}
24+
>
25+
<div
26+
style={{
27+
boxSizing: 'border-box',
28+
height: '100%',
29+
width: '100%',
30+
overflow: 'hidden',
31+
borderRadius: '9999px',
32+
border: '4px solid white',
33+
backgroundColor: '#030712',
34+
}}
35+
>
36+
<Img
37+
src="https://github.com/bukinoshita.png?size=100"
38+
alt="Bu Kinoshita"
39+
width="40"
40+
height="40"
41+
style={{
42+
display: 'inline-block',
43+
height: '100%',
44+
width: '100%',
45+
objectFit: 'cover',
46+
objectPosition: 'center',
47+
}}
48+
/>
49+
</div>
50+
</Column>
51+
<Column
52+
width="44"
53+
height="44"
54+
style={{
55+
position: 'relative',
56+
left: '-12px',
57+
height: '44px',
58+
width: '44px',
59+
padding: 0,
60+
textAlign: 'center',
61+
verticalAlign: 'middle',
62+
lineHeight: '0px',
63+
}}
64+
>
65+
<div
66+
style={{
67+
boxSizing: 'border-box',
68+
height: '100%',
69+
width: '100%',
70+
overflow: 'hidden',
71+
borderRadius: '9999px',
72+
border: '4px solid white',
73+
backgroundColor: '#030712',
74+
}}
75+
>
76+
<Img
77+
src="https://github.com/bukinoshita.png?size=100"
78+
alt="Bu Kinoshita"
79+
width="40"
80+
height="40"
81+
style={{
82+
display: 'inline-block',
83+
height: '100%',
84+
width: '100%',
85+
objectFit: 'cover',
86+
objectPosition: 'center',
87+
}}
88+
/>
89+
</div>
90+
</Column>
91+
<Column
92+
width="44"
93+
height="44"
94+
style={{
95+
position: 'relative',
96+
left: '-24px',
97+
height: '44px',
98+
width: '44px',
99+
padding: 0,
100+
textAlign: 'center',
101+
verticalAlign: 'middle',
102+
lineHeight: '0px',
103+
}}
104+
>
105+
<div
106+
style={{
107+
boxSizing: 'border-box',
108+
height: '100%',
109+
width: '100%',
110+
overflow: 'hidden',
111+
borderRadius: '9999px',
112+
border: '4px solid white',
113+
backgroundColor: '#030712',
114+
}}
115+
>
116+
<Img
117+
src="https://github.com/bukinoshita.png?size=100"
118+
alt="Bu Kinoshita"
119+
width="40"
120+
height="40"
121+
style={{
122+
display: 'inline-block',
123+
height: '100%',
124+
width: '100%',
125+
objectFit: 'cover',
126+
objectPosition: 'center',
127+
}}
128+
/>
129+
</div>
130+
</Column>
131+
</Row>
132+
);
133+
134+
export default () => {
135+
return <Layout>{component}</Layout>;
136+
};

0 commit comments

Comments
 (0)