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

fix(tailwind): User-defined CSS variables being replaced with undefined #1587

Merged

Conversation

gabrielmfern
Copy link
Collaborator

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.

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

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
10 checks passed
@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.

3 participants