search

resend / react-email

💌 Build and send emails using React
https://react.email
MIT License
12.57k stars 571 forks source link

fix(tailwind): Children always being transformed into an array #1397

Closed gabrielmfern closed 1 month ago

gabrielmfern commented 1 month ago

I noticed that, when testing to make sure that the new canary release of Tailwind actually had

1391 fixed after #1335 being updated with the small Tailwind refactor from before, the <Heading> didn't

work like when I checked before the fixing of the conflitcs.

After debugging for a while, I noticed that, since we use radix-ui's <Slot> component on the <Heading>, it expects its children to be exactly one element, not an array, meaning that our mapping of children for elements was making the <SlotClone> return null which made the <Heading> not render.

The fix for the issue was very simple — just looking at the array and checking if it has only one value inside, in which case it would return that value instead of the whole array. Otherwise, is just returning the plain array like it should.

This then fixes the issue, and adds a unit test to make sure that these kinds of issues are caught before any release:

https://github.com/resend/react-email/blob/16a998a527ff42f30682c167062878f950014e96/packages/tailwind/src/tailwind.spec.tsx#L104-L116

And you can check that the snapshot actually contains the proper <h1> here:

https://github.com/resend/react-email/blob/16a998a527ff42f30682c167062878f950014e96/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap#L10-L13

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
react-email ✅ Ready (Inspect) Visit Preview Apr 3, 2024 4:58pm
react-email-demo ✅ Ready (Inspect) Visit Preview Apr 3, 2024 4:58pm