fix(tailwind): Media query escaped class names #1114
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gabrielmfern
force-pushed
the
fix/tailwind-media-query-escaped-class-names
branch
from
d8641fb to
a3c833e
Compare
This caused problems because escaping class names seems to not be very well supported for email clients. Closes #1095
…ort decisions This I belive to be very important to keep account of because we have lost a few of these decisions throughout the development and rewrites of the component which caused this to not have the best support.
gabrielmfern
force-pushed
the
fix/tailwind-media-query-escaped-class-names
branch
from
a3c833e to
94518f7
Compare
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
vcapretz
approved these changes
Mar 7, 2024
|
Hey @gabrielmfern / @vcapretz, has this been shipped in a package version yet? |
|
@jwarykowski It should be released on |
github-merge-queue bot
referenced
this pull request
in dotkom/monoweb
Aug 20, 2024
[](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@react-email/tailwind](https://togithub.com/resend/react-email) ([source](https://togithub.com/resend/react-email/tree/HEAD/packages/tailwind)) | [`^0.0.12` -> `^0.0.19`](https://renovatebot.com/diffs/npm/@react-email%2ftailwind/0.0.12/0.0.19) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- > [!WARNING] > Some dependencies could not be looked up. Check the Dependency Dashboard for more information. --- ### Release Notes <details> <summary>resend/react-email (@​react-email/tailwind)</summary> ### [`v0.0.19`](https://togithub.com/resend/react-email/blob/HEAD/packages/tailwind/CHANGELOG.md#0019) [Compare Source](https://togithub.com/resend/react-email/compare/@react-email/tailwind@0.0.18...@react-email/tailwind@0.0.19) ##### Patch Changes - [`dfb55ce`](https://togithub.com/resend/react-email/commit/dfb55ce): Changed it so children of a component are only processed after the component is done with them - Add forward ref ### [`v0.0.18`](https://togithub.com/resend/react-email/releases/tag/%40react-email/tailwind%400.0.18): @​react-email/tailwind 0.0.18 [Compare Source](https://togithub.com/resend/react-email/compare/@react-email/tailwind@0.0.17...@react-email/tailwind@0.0.18) #### What's Changed - Fixes relatively complex media queries not being parsed properly by [@​gabrielmfern](https://togithub.com/gabrielmfern) on [#​1475](https://togithub.com/resend/react-email/issues/1475) **Full Changelog**: https://github.com/resend/react-email/compare/[@​react-email/tailwind](https://togithub.com/react-email/tailwind)[@​0](https://togithub.com/0).0.17...[@​react-email/tailwind](https://togithub.com/react-email/tailwind)[@​0](https://togithub.com/0).0.18 ### [`v0.0.17`](https://togithub.com/resend/react-email/releases/tag/%40react-email/tailwind%400.0.17): @​react-email/tailwind 0.0.17 [Compare Source](https://togithub.com/resend/react-email/compare/@react-email/tailwind@0.0.16...@react-email/tailwind@0.0.17) #### What's Changed - Treat React as a peer dependency by [@​eps1lon](https://togithub.com/eps1lon) on [#​1463](https://togithub.com/resend/react-email/issues/1463) - Fixes the inlining of the JSX runtime by [@​eps1lon](https://togithub.com/eps1lon) on [#​1462](https://togithub.com/resend/react-email/issues/1462) - Fixes types for `TailwindConfig` being basically a `Record<string, any>` by [@​gabrielmfern](https://togithub.com/gabrielmfern) on [#​1439](https://togithub.com/resend/react-email/issues/1439) - Fixes children always being transformed into an array by [@​gabrielmfern](https://togithub.com/gabrielmfern) on [#​1397](https://togithub.com/resend/react-email/issues/1397) - Fixes `React.forwardRef` components not working by [@​nzben](https://togithub.com/nzben) on [#​1335](https://togithub.com/resend/react-email/issues/1335) **Full Changelog**: https://github.com/resend/react-email/compare/[@​react-email/tailwind](https://togithub.com/react-email/tailwind)[@​0](https://togithub.com/0).0.16...[@​react-email/tailwind](https://togithub.com/react-email/tailwind)[@​0](https://togithub.com/0).0.17 ### [`v0.0.16`](https://togithub.com/resend/react-email/compare/@react-email/tailwind@0.0.15...@react-email/tailwind@0.0.16) [Compare Source](https://togithub.com/resend/react-email/compare/@react-email/tailwind@0.0.15...@react-email/tailwind@0.0.16) ### [`v0.0.15`](https://togithub.com/resend/react-email/releases/tag/%40react-email/tailwind%400.0.15): @​react-email/tailwind 0.0.15 [Compare Source](https://togithub.com/resend/react-email/compare/v0.0.14...@react-email/tailwind@0.0.15) #### What's Changed - Fixed media query selectors being escaped, which caused issues for some email clients ([https://github.com/resend/react-email/pull/1114](https://togithub.com/resend/react-email/pull/1114)) - Improved internal code readability and fixed key warnings ([https://github.com/resend/react-email/pull/1351](https://togithub.com/resend/react-email/pull/1351)) - Fixed missing head errors being thrown after minification of the Email's component code ([https://github.com/resend/react-email/pull/1352](https://togithub.com/resend/react-email/pull/1352)) - Fixed not being able to use Tailwind classes on the `<html>` element ([https://github.com/resend/react-email/pull/1352](https://togithub.com/resend/react-email/pull/1352)) ### [`v0.0.14`](https://togithub.com/resend/react-email/releases/tag/v0.0.14) [Compare Source](https://togithub.com/resend/react-email/compare/v0.0.13...v0.0.14) #### Patches - Fix lint [#​660](https://togithub.com/resend/react-email/issues/660) ### [`v0.0.13`](https://togithub.com/resend/react-email/releases/tag/v0.0.13) [Compare Source](https://togithub.com/resend/react-email/compare/v0.0.12...v0.0.13) #### Patches - Support external file imports inside of email components [#​615](https://togithub.com/resend/react-email/issues/615) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View the [repository job log](https://developer.mend.io/github/dotkom/monoweb). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOC4yNi4xIiwidXBkYXRlZEluVmVyIjoiMzguMjYuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
](https://renovatebot.com){kind=link}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR changes how the media query class names are kept by removing
escaping characters from them and replacing the ones they were meant
to escape with other characters that have better CSS support. Closes #1095.
Besides this, I also added in something I think is really important.
I added Contributing notes that mention the decisions
taken to modify the CSS generated by Tailwind and how it is applied to the email
for better email client support and for us to not lose these.
Would also be a great idea to write unit tests for these email support decisions, so we
don't lose them by checking on a CI basis as well.
How can I make sure this is fixed?
You can take a look into how I implemented the unit tests and how their snapshots look, no need to test by manually rendering.
Though you can try making sure things are completely working by sending to a Gmail account of yours an email with React Email's Tailwind integration as Gmail strips the styles completely. Just remember to use media queries, as they are the only ones that end up on a
<style>tag.