Skip to content

Conversation

@gabrielmfern
Copy link
Member

This is meant to address #1448.

The problem there was that, in a nutshell, CSS variables defined in the
template, and then used through Tailwind utilities, would end up being replaced
with just undefined.

This happens due to the behavior of
postcss-css-variables,
the PostCSS plugin we use internally ourselves to inline Tailwind's CSS
variables. The issue then happens when this library finds a CSS variables that
it can't find a declaration for, making it just undefined. This behavior is
questionable together with a few other problems that cause bugs that we need
patches for currently. The library though, does not have any configuration to
allow for us to override this behavior, and patching it would be just too
cumbersome to both maintain and to make in the first place.

With that in mind, this PR removes the use of that dependency and writes in a
new, relatively naive, implementation of a PostCSS plugin that we can maintain
and adjust the behavior of ourselves. It also adds in a few unit tests to
ensure the behavior of this new plugin is equivalent to the old one we used.

@vercel
Copy link

vercel bot commented Aug 12, 2024

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 Sep 16, 2024 4:01pm
react-email-demo ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 16, 2024 4:01pm

@changeset-bot
Copy link

changeset-bot bot commented Aug 12, 2024

🦋 Changeset detected

Latest commit: 2952971

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages
Name Type
@react-email/tailwind Patch
@react-email/components Patch
react-email-with-aws-ses Patch
react-email-with-mailersend Patch
react-email-with-nodemailer Patch
react-email-with-plunk Patch
react-email-with-postmark Patch
react-email-with-resend Patch
react-email-with-sendgrid Patch
react-email-with-next-scaleway Patch
react-email-with-node-scaleway Patch
react-email-starter Patch
create-email Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@gabrielmfern gabrielmfern merged commit 15e95c7 into canary Sep 17, 2024
@gabrielmfern gabrielmfern deleted the fix/inexistant-css-variables-replaced-with-undefined branch September 17, 2024 17:41
@papidb
Copy link

papidb commented Sep 24, 2024

Hi, has this been pushed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants