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.

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

feat(tailwind): Smaller bundle size #1124

Closed
wants to merge 26 commits into from

Conversation

gabrielmfern
Copy link
Collaborator

@gabrielmfern gabrielmfern commented Jan 3, 2024

This changes the way we run Tailwind by manually calling out the internal functions they have
to generate the CSS based on the class names that was very inspired by how the Tailwind LSP
server computes styles for the hover.

This different approach allows us to write the code in a bit more readable manner than it was before,
avoid rendering everything twice, and avoid bundling of node-specific code which forced
us into having to bundle polyfills that would cause large dist sizes that are now avoided due to Vite's tree shaking.
This also has the benefit of giving something like a 30% speed bump!

This PR also replaces #1119, which I'll close right now.

Closes #1101, closes #1111

Maybe closes #1105?


Edit February 2024: I also added an automated-test-next-app that is built using the Tailwind in the directory
in a way that it reproduces an actual environment to make sure we don't introduce any regressions.

@gabrielmfern gabrielmfern changed the title feat(tailwind): Manually running Tailwind's specific features feat(tailwind): Manually run Tailwind's specific features Jan 3, 2024
@gabrielmfern gabrielmfern linked an issue Jan 5, 2024 that may be closed by this pull request
@gabrielmfern
Copy link
Collaborator Author

Converting this into a draft because I need to investigate weather or not this causes issues with builds on Next and in other similar situations that would still require us to have polyfills.

@gabrielmfern gabrielmfern marked this pull request as draft January 8, 2024 10:52
@gabrielmfern gabrielmfern marked this pull request as ready for review January 8, 2024 18:10
@nicitaacom
Copy link

@gabrielmfern can you please request review somewhere here?
image

Also how to use your version of react-email I mean with this fix?

@gabrielmfern gabrielmfern force-pushed the feat/decrease-tailwind-bundle-size branch from 704cf46 to e3508ec Compare January 22, 2024 15:42
Copy link

vercel bot commented Jan 22, 2024

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

Name Status Preview Comments Updated (UTC)
react-email ❌ Failed (Inspect) Feb 29, 2024 3:18pm
react-email-demo ❌ Failed (Inspect) Feb 29, 2024 3:18pm

@gabrielmfern
Copy link
Collaborator Author

Closing this in favor of #1383.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants