fix(tailwind): Head component minification issue #1352
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
…ed for any arbitrarily deep <head> element
…be as clear as possible
…n a normal mathcing snapshot instead of an inline one
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
vcapretz
approved these changes
Mar 12, 2024
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.
Background
After the Tailwind performance improvements, we changed things so that the
requirement for the
<head>element being there — when using Tailwind classes thathad media queries — went from being
to being
This change was for two reasons mostly:
elements were included
This ended up causing two issues:
<Html>tag anymore<Head>component would be changedto something other than "Head" which ended up breaking our check for the
<Head>componentHow does this fix the issue?
This fixes the issue by keeping track of whether the
<head>element was foundand 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.