Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix(tailwind): Head component minification issue #1352

Merged
merged 6 commits into from
Mar 13, 2024
Merged

fix(tailwind): Head component minification issue #1352

merged 6 commits into from
Mar 13, 2024

Conversation

gabrielmfern
Copy link
Collaborator

Background

After the Tailwind performance improvements, we changed things so that the
requirement for the <head> element being there — when using Tailwind classes that
had media queries — went from being

You need to have a <html> followed by a <head> element or <Head> component

to being

You need a <head> directly bellow your <tailwind> component

This change was for two reasons mostly:

  1. To avoid having to execute regexes on the rendered markup to determine if the
    elements were included
  2. To making the error message more clear while still being concise

This ended up causing two issues:

  1. You just could not use Tailwind classes on your <Html> tag anymore
  2. Upon being minifying the function's name for our <Head> component would be changed
    to something other than "Head" which ended up breaking our check for the <Head> component

How does this fix the issue?

This fixes the issue by keeping track of whether the <head> element was found
and if the non-inlinable styles — currently Tailwind classes with media
queries — were applied to it. The solution also required that I changed
the current error message, as it just didn't apply anymore, and make it a bit more
detailed to whoever is having it.

This solution is also not a breaking change, actually it's more backwards compatible
than the one after the performance improvements.

How can I make sure that it's fixed?

I've added in a unit test with a detailed comment to the code that ensures
that the Tailwind component still applies the styles without throwing
the error. It tests for a custom component that contains the <head> element,
and it tests with it inside a <html> inside the <Tailwind> component.

@gabrielmfern gabrielmfern self-assigned this Mar 12, 2024
@vercel Vercel
Copy link

vercel bot commented Mar 12, 2024

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

Name Status Preview Updated (UTC)
react-email ✅ Ready (Inspect) Visit Preview Mar 12, 2024 6:18pm
react-email-demo ✅ Ready (Inspect) Visit Preview Mar 12, 2024 6:18pm

@gabrielmfern gabrielmfern merged commit 64e4326 into canary Mar 13, 2024
9 checks passed
@gabrielmfern gabrielmfern deleted the fix/tailwind-head-component-minification-issue branch March 13, 2024 17:40
github-merge-queue bot referenced this pull request in dotkom/monoweb Aug 20, 2024
@renovate
Update dependency @react-email/tailwind to ^0.0.19 (#945)
35c1d9a 
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](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)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@react-email%2ftailwind/0.0.19?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@react-email%2ftailwind/0.0.19?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@react-email%2ftailwind/0.0.12/0.0.19?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@react-email%2ftailwind/0.0.12/0.0.19?slim=true)](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 (@&#8203;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):
@&#8203;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
[@&#8203;gabrielmfern](https://togithub.com/gabrielmfern) on
[#&#8203;1475](https://togithub.com/resend/react-email/issues/1475)

**Full Changelog**:
https://github.com/resend/react-email/compare/[@&#8203;react-email/tailwind](https://togithub.com/react-email/tailwind)[@&#8203;0](https://togithub.com/0).0.17...[@&#8203;react-email/tailwind](https://togithub.com/react-email/tailwind)[@&#8203;0](https://togithub.com/0).0.18

###
[`v0.0.17`](https://togithub.com/resend/react-email/releases/tag/%40react-email/tailwind%400.0.17):
@&#8203;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
[@&#8203;eps1lon](https://togithub.com/eps1lon) on
[#&#8203;1463](https://togithub.com/resend/react-email/issues/1463)
- Fixes the inlining of the JSX runtime by
[@&#8203;eps1lon](https://togithub.com/eps1lon) on
[#&#8203;1462](https://togithub.com/resend/react-email/issues/1462)
- Fixes types for `TailwindConfig` being basically a `Record<string,
any>` by [@&#8203;gabrielmfern](https://togithub.com/gabrielmfern) on
[#&#8203;1439](https://togithub.com/resend/react-email/issues/1439)
- Fixes children always being transformed into an array by
[@&#8203;gabrielmfern](https://togithub.com/gabrielmfern) on
[#&#8203;1397](https://togithub.com/resend/react-email/issues/1397)
- Fixes `React.forwardRef` components not working by
[@&#8203;nzben](https://togithub.com/nzben) on
[#&#8203;1335](https://togithub.com/resend/react-email/issues/1335)

**Full Changelog**:
https://github.com/resend/react-email/compare/[@&#8203;react-email/tailwind](https://togithub.com/react-email/tailwind)[@&#8203;0](https://togithub.com/0).0.16...[@&#8203;react-email/tailwind](https://togithub.com/react-email/tailwind)[@&#8203;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):
@&#8203;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
[#&#8203;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
[#&#8203;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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@vcapretz vcapretz vcapretz approved these changes

Assignees

@gabrielmfern gabrielmfern

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@gabrielmfern @vcapretz