feat(tailwind): Smaller bundle size #1383

gabrielmfern · 2024-03-27T16:22:46Z

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 tailwindcss
under 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 postcss and tailwindcss
use 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 tailwindcss directly as a plugin on postcss.

Side note: This PR was first intended for #1104 but ended up into a better implementation of #1124

Why?

Polyfilling was the temporary solution for this, but it is not optimal in the least. This caused
issues like:

And 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 postcss data structures. This also allows us to substitute a bit of
our logic, which was previously purely done with regexes, with postcss's utilities which makes it much easier to read
and 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 postcss plugin.

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 pass
on 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 mapReactTree utility that goes through the whole tree and separates the concerns
about 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 for Vite as well.

vercel · 2024-03-27T16:22:52Z

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

Name	Status	Preview	Comments	Updated (UTC)
react-email	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2024 6:49pm
react-email-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2024 6:49pm

package.json

packages/tailwind/integrations/nextjs.spec.ts

packages/tailwind/src/tailwind.tsx

packages/tailwind/src/tailwind.spec.tsx

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]>

…wind

…e of the Tailwind component

…enerate styles for class names

…ities instead of regexes

… Root

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.

…ponent

…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

Co-authored-by: Ben Read <[email protected]> Co-authored-by: Benny Burrito <[email protected]> Co-authored-by: Ben Verspeak <[email protected]> Co-authored-by: hank <[email protected]> Co-authored-by: zhanghong <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Ben Gracewood <[email protected]> Co-authored-by: Victor Laforet <[email protected]> Co-authored-by: Bu Kinoshita <[email protected]> Co-authored-by: Vitor Capretz <[email protected]>

gabrielmfern added Package: @react-email/tailwind Type: Improvement An improvement, that is, changes to an existing feature that improve it labels Mar 27, 2024

gabrielmfern self-assigned this Mar 27, 2024

gabrielmfern commented Mar 27, 2024

View reviewed changes

package.json Show resolved Hide resolved

gabrielmfern mentioned this pull request Mar 27, 2024

feat(tailwind): Smaller bundle size #1124

Closed

vercel bot deployed to Preview – react-email March 27, 2024 16:25 View deployment

gabrielmfern commented Mar 27, 2024

View reviewed changes

packages/tailwind/integrations/nextjs.spec.ts Outdated Show resolved Hide resolved

gabrielmfern commented Mar 27, 2024

View reviewed changes

packages/tailwind/src/tailwind.tsx Outdated Show resolved Hide resolved

gabrielmfern commented Mar 27, 2024

View reviewed changes

packages/tailwind/src/tailwind.spec.tsx Show resolved Hide resolved

endymion1818 and others added 20 commits March 28, 2024 08:07

feat(head): iOS formatting meta tag as default (#1369)

2092215

Co-authored-by: Benny Burrito <[email protected]> Co-authored-by: Ben Verspeak <[email protected]> Co-authored-by: Gabriel Miranda <[email protected]>

fix(create-email): Tailwind imported from @react-email/tailwind which…

be72c02

… is not installed (#1387) Co-authored-by: zhanghong <[email protected]>

feat(tailwind): Context-aware treatment for components inside of Tail…

af59dc4

…wind

chore(tailwind): Add a unit test to check if context is working insid…

522fccd

…e of the Tailwind component

chore: Add postcss-selector-parser

8405061

feat(tailwind/hooks): useTailwind() hook that allows to straight up g…

2a82fa9

…enerate styles for class names

feat(tailwind): Function to convert css property to React property

931c0d4

feat(tailwind): Function to sanitize media queries using postcss util…

09fca98

…ities instead of regexes

feat(tailwind): Function to generate JSX inline styles from a postcss…

bdba3ec

… Root

feat(tailwind): Function to sanitize a postcss declaration

7cc4084

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.

feat(tailwind): Rewrite with the new utilities

96fde73

chore: Update the unit tests

de39375

fix(tailwind): No Head error being thrown with a Head inside of a com…

8d207df

…ponent

chore: Remove unused utilities

e9d6e0a

fix(tailwind): Unit test with wrong expected class name

e61542c

fix(tailwind): Missing keys after head processing

bfd3b30

fix(tailwind): Media rules not being merged when sanitizing

51cb876

feat(tailwind): A utiltiy for walking and processing all of the eleme…

37fa1a5

…nts in the React tree

feat(tailwind): Component rewrite using the new walkElements utility

60aff21

vercel bot deployed to Preview – react-email-demo October 4, 2024 18:26 View deployment

remove unecessary comment

47b3d56

vercel bot deployed to Preview – react-email October 4, 2024 18:28 View deployment

remove unecessary linting rule disable

9444227

vercel bot deployed to Preview – react-email October 4, 2024 18:30 View deployment

sort dependencies

4402797

vercel bot deployed to Preview – react-email October 4, 2024 18:31 View deployment

move rgb parser regex to be recreated each time

2c9203c

vercel bot deployed to Preview – react-email October 4, 2024 18:33 View deployment

vercel bot deployed to Preview – react-email-demo October 4, 2024 18:36 View deployment

fix linting

6b1ee48

vercel bot deployed to Preview – react-email October 4, 2024 18:40 View deployment

remove previous version's tailwind patch

f33e946

vercel bot had a problem deploying to Preview – react-email-demo October 4, 2024 18:42 Failure

vercel bot had a problem deploying to Preview – react-email October 4, 2024 18:43 Failure

update lock

1a0d92b

vercel bot deployed to Preview – react-email October 4, 2024 18:45 View deployment

vercel bot deployed to Preview – react-email-demo October 4, 2024 18:45 View deployment

format

6219b1b

vercel bot deployed to Preview – react-email October 4, 2024 18:47 View deployment

vercel bot deployed to Preview – react-email-demo October 4, 2024 18:49 View deployment

gabrielmfern merged commit 4520ca8 into canary Oct 7, 2024
10 checks passed

gabrielmfern deleted the fix/tailwind-context-issues branch October 7, 2024 13:58

This was referenced Oct 7, 2024

@react-email/tailwind Package dist size is too large #1101

Closed

Not able to use next-intl's createTranslator with Tailwind component #1244

Closed

gabrielmfern mentioned this pull request Oct 17, 2024

Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime #1105

Closed

WillsB3 mentioned this pull request Nov 18, 2024

Hooks + Context not working within Tailwind component #1104

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tailwind): Smaller bundle size #1383

feat(tailwind): Smaller bundle size #1383

gabrielmfern commented Mar 27, 2024 •

edited

Loading

vercel bot commented Mar 27, 2024 •

edited

Loading

feat(tailwind): Smaller bundle size #1383

feat(tailwind): Smaller bundle size #1383

Conversation

gabrielmfern commented Mar 27, 2024 • edited Loading

Background

Why?

The solution

Other changes that make this a refactor

Added tests for ensured stability

vercel bot commented Mar 27, 2024 • edited Loading

gabrielmfern commented Mar 27, 2024 •

edited

Loading

vercel bot commented Mar 27, 2024 •

edited

Loading