feat(tailwind): Smaller bundle size #1383
Open
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
added
Package: @react-email/tailwind
Type: Improvement
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
gabrielmfern
commented
Mar 27, 2024
| @@ -28,7 +28,6 @@ | |||
| "pnpm": { | |||
| "patchedDependencies": { | |||
| "[email protected]": "patches/[email protected]", | |||
| "[email protected]": "patches/[email protected]", | |||
There was a problem hiding this comment.
This package was one that we used as a polyfill that isn't needed and isn't required to be patched anymore!
gabrielmfern
commented
Mar 27, 2024
| }; | ||
|
|
||
| const nextAppLocation = path.resolve(__dirname, "./nextjs"); | ||
| $("npm install", nextAppLocation); |
There was a problem hiding this comment.
I tried using pnpm here, which would be better for sure, but, for some reason, the preview deploy of our app at https://react.email failed because of it. Once I moved to using npm this worked without errors.
gabrielmfern
commented
Mar 27, 2024
| return processElement(renderedComponent); | ||
| if (hasNonInlineStylesToApply) { | ||
| let hasAppliedNonInlineStyles = false as boolean; | ||
| mappedChildren = mapReactTree(mappedChildren, (node) => { |
There was a problem hiding this comment.
Following the same idea from what we merged recently that allows the <head> element to be at any depth, this maps the entire React tree to find it.
gabrielmfern
commented
Mar 27, 2024
| @@ -22,6 +22,34 @@ describe("Tailwind component", () => { | |||
| }); | |||
| }); | |||
|
|
|||
| // test("with React context and custom components", () => { | |||
There was a problem hiding this comment.
A unit test I kept commented out as useful for when we get to #1104.
Co-authored-by: Benny Burrito <[email protected]> Co-authored-by: Ben Verspeak <[email protected]> Co-authored-by: Gabriel Miranda <[email protected]>
… is not installed (#1387) Co-authored-by: zhanghong <[email protected]>
…e of the Tailwind component
…enerate styles for class names
…ities instead of regexes
This function is meant to do the sanitization that we need for the best email client support. As of this commit, it only sanitizes the `rgb` calls it finds.
…name of their digit This is because the only way to have these numbers in class names for CSS is to either escape them with something like "\3". But the issue with that is that we can't really have escape characters in class selectors as they aren't very well supported.
…nts in the React tree
gabrielmfern
force-pushed
the
fix/tailwind-context-issues
branch
from
d079aa6
to
364d55b
Compare
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 updates to the Tailwind component that came with performance improvements
we had a lot more environments to consider while trying to run
tailwindcssunder the hood for generating the styles from classes.
These environment constraints, like being able to run on the browser and on other environments,
forced us into having to polyfill certain node modules — that both
postcssandtailwindcssuse under the hood — while bundling even though these code paths were never really
hit when running.
The reason these code paths were not completely tree shaken out of the built code was because
we called
tailwindcssdirectly as a plugin onpostcss.Why?
Polyfilling was the temporary solution for this, but it is not optimal in the least. This caused
issues like:
next-intl's createTranslator with Tailwind component #1244And ended up also being a burden to maintain and debug.
The solution
The best way I've found to solve these issues is by calling out the internal Tailwind functions
that do what they need to do on
postcssdata structures. This also allows us to substitute a bit ofour logic, which was previously purely done with regexes, with
postcss's utilities which makes it much easier to readand maintain.
The reason I choose to call out the internal Tailwind functions was because the code that was Node specific
was really just around finding the configuration or checking if a certain thing was installed, and
this would really only run when it was called as a
postcssplugin.The way I do call out the internal Tailwind functions is heavily inspired by the way they do it
themselves on the Tailwind VS Code extension/LSP Server.
Other changes that make this a refactor
Along with this, I also had to change up a few things. The first and biggest one was applying
the non-inlinable styles — currently media queries, i.e.
sm:...— after our first passon the React tree which is for inlining styles. This is because we are now generating the styles
for each element's classes on-the-fly instead of at once (which is still performant the way it is
implemented), so we need to aggregate all the non-inlinable classes and their CSS to add to the
<head>later.
The second change should be mostly internal, (and should also make it easier for others to contribute),
which is a new
mapReactTreeutility that goes through the whole tree and separates the concernsabout when to go recursive on the elements or not. It will also make it easier to actually look at #1104 once
we get there.
Added tests for ensured stability
As I mentioned, we had to consider a bunch of different environments and testing them manually
was really time-consuming, so, borrowed from #1124, I implemented an integration tested powered by yalc that allows us to make sure that the component will work well with NextJS's build process.
You can find this test inside
packages/tailwind/integrations/_tests/nextjs.spec.ts. This PR also adds a test forViteas well.