Skip to content

feat(tailwind): extract pseudo classes to stylesheet #1864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

Sjoertjuh
Copy link
Contributor

Solves the following discussion: #1338

This extracts pseudo classes like :hover to the stylesheet.

Copy link

changeset-bot bot commented Jan 13, 2025

🦋 Changeset detected

Latest commit: 64bdc96

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages
Name Type
@react-email/tailwind Minor
@react-email/components Patch
react-email-with-aws-ses Patch
react-email-with-mailersend Patch
react-email-with-nodemailer Patch
react-email-with-plunk Patch
react-email-with-postmark Patch
react-email-with-resend Patch
react-email-with-sendgrid Patch
react-email-with-next-scaleway Patch
react-email-with-node-scaleway Patch
react-email-starter Patch
create-email Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Jan 13, 2025

@Sjoertjuh is attempting to deploy a commit to the resend Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Collaborator

@gabrielmfern gabrielmfern left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work, really nice! We planned on having this at some point, so this is really helpful!

One thing that still needs an adjustment is when the user has a media query with pseudo selectors as well, I also added in a change in the tests that currently fails to ensure that this works.

https://github.com/Sjoertjuh/react-email/blob/a15b0b014e60d19b17e3f25f0cc6fd2e20578e77/packages/tailwind/src/tailwind.spec.tsx#L404-L409

Another thing I'd like improvement is the duplicated code between the sanitization of media queries and of the pseudo selectors, since they seem to be mostly the same.

@Sjoertjuh
Copy link
Contributor Author

I indeed forgot that you could mix media queries with pseudo classes, so I added that. Also the change in the test was not completely correct, so that is updated as well.
I don't have too much time at the moment, so I'll have a look later if some parts could be shared between the two (or maybe even put into a single function)

@gabrielmfern gabrielmfern force-pushed the canary branch 4 times, most recently from 9b6098c to ee6d8fb Compare January 22, 2025 15:11
@Sjoertjuh Sjoertjuh force-pushed the feature/extract-tailwind-pseudo-classes branch from b466e15 to aef20d1 Compare January 23, 2025 19:30
@Sjoertjuh
Copy link
Contributor Author

I extracted some common logic from the two functions. Let me know if this is alright!

@Sjoertjuh
Copy link
Contributor Author

Hey @gabrielmfern, whenever you get a chance, would love to hear your thoughts on this PR. Thanks!

@gabrielmfern gabrielmfern force-pushed the feature/extract-tailwind-pseudo-classes branch from 3f49802 to bfc09bf Compare February 17, 2025 11:30
@gabrielmfern
Copy link
Collaborator

Sorry for taking so long to review this again @Sjoertjuh. Added a comment on the changes you made, just a heads up, when updating this branch to the upstream canary one, do it with a rebase or the changed files get messy

@Sjoertjuh Sjoertjuh force-pushed the feature/extract-tailwind-pseudo-classes branch from bfc09bf to 72efb50 Compare February 18, 2025 16:43
@gabrielmfern gabrielmfern force-pushed the canary branch 3 times, most recently from 98cabbc to 07e33b1 Compare February 20, 2025 13:30
@Sjoertjuh
Copy link
Contributor Author

@gabrielmfern No problem, I'm not in a hurry. I did a rebase and refactored the functions into a single function, which I think looks pretty good now. Let me know if you need anything else done.

bukinoshita pushed a commit that referenced this pull request Apr 19, 2025
gabrielmfern added a commit that referenced this pull request Apr 23, 2025
gabrielmfern added a commit that referenced this pull request Apr 23, 2025
gabrielmfern added a commit that referenced this pull request Apr 23, 2025
gabrielmfern added a commit that referenced this pull request Apr 24, 2025
gabrielmfern added a commit that referenced this pull request Apr 24, 2025
gabrielmfern added a commit that referenced this pull request Apr 24, 2025
gabrielmfern added a commit that referenced this pull request Apr 25, 2025
gabrielmfern added a commit that referenced this pull request May 1, 2025
gabrielmfern added a commit that referenced this pull request May 1, 2025
gabrielmfern added a commit that referenced this pull request May 2, 2025
gabrielmfern added a commit that referenced this pull request May 2, 2025
gabrielmfern added a commit that referenced this pull request May 9, 2025
gabrielmfern added a commit that referenced this pull request May 9, 2025
gabrielmfern added a commit that referenced this pull request May 12, 2025
gabrielmfern added a commit that referenced this pull request May 12, 2025
gabrielmfern added a commit that referenced this pull request May 13, 2025
gabrielmfern added a commit that referenced this pull request May 16, 2025
gabrielmfern added a commit that referenced this pull request May 16, 2025
gabrielmfern added a commit that referenced this pull request May 20, 2025
gabrielmfern added a commit that referenced this pull request May 20, 2025
gabrielmfern added a commit that referenced this pull request May 28, 2025
gabrielmfern added a commit that referenced this pull request Jun 3, 2025
gabrielmfern added a commit that referenced this pull request Jun 4, 2025
gabrielmfern added a commit that referenced this pull request Jun 10, 2025
gabrielmfern added a commit that referenced this pull request Jun 10, 2025
gabrielmfern added a commit that referenced this pull request Jun 10, 2025
gabrielmfern added a commit that referenced this pull request Jun 16, 2025
gabrielmfern added a commit that referenced this pull request Jun 24, 2025
gabrielmfern added a commit that referenced this pull request Jun 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants