Update tailwind, switch to tailwindcss/nesting, move postcss-css-variables #1417
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
…ables Fixes #1416 Fixes #1074 As noted in #1416 there's been a change in `tailwindcss` around the `@apply` directive. In order to get it to work correctly for nested classes we need to use the `tailswindcss/nesting` plugin. We were already using `postcss-nested`, which is what `tailwindcss/nesting` uses under the hood. So this PR just switches them out. It also moves the `postcss-css-variables` plugin to be higher in the plugin stack for the mailer stylesheet. [That plugin doesn't play nicely when it's below the nesting plugin.](MadLittleMods/postcss-css-variables#135 (comment)) Moving `postcss-css-variables` higher in the stack also seems to have fixed the problems described in #1074. When it's higher in the stack I see almost zero difference in build times between having it activated or not, and the resulting stylesheet is actually _smaller_ when it is activated (~120k vs ~140k).
|
I just noticed that the Tailwind docs say that you shouldn't need a preprocessor for variables, so maybe we should remove |
pascallaliberte
approved these changes
Apr 4, 2024
| @@ -7,9 +7,9 @@ module.exports = { | |||
| plugins: [ | |||
| require('postcss-import')(postcssImportConfig), | |||
| require('postcss-extend-rule'), | |||
| require('postcss-nested'), | |||
| require('tailwindcss'), | |||
| require('postcss-css-variables'), | |||
There was a problem hiding this comment.
@jagthedrummer according to this caniemail.com report, css variables have bad support among email clients.
So yeah, let's only keep postcss-css-variables for the mailer css, and add a comment about this caniemail.com report for posterity.
Otherwise, LGTM
There was a problem hiding this comment.
Great, idea about linking to that report, @pascallaliberte. Thanks!
kaspth
approved these changes
Apr 4, 2024
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.
Fixes #1416
Fixes #1074
As noted in #1416 there's been a change in
tailwindcssaround the@applydirective. In order to get it to work correctly for nested classes we need to use thetailswindcss/nestingplugin. We were already usingpostcss-nested, which is whattailwindcss/nestinguses under the hood. So this PR just switches them out.It also moves the
postcss-css-variablesplugin to be higher in the plugin stack for the mailer stylesheet. That plugin doesn't play nicely when it's below the nesting plugin.Moving
postcss-css-variableshigher in the stack also seems to have fixed the problems described in #1074. When it's higher in the stack I see almost zero difference in build times between having it activated or not, and the resulting stylesheet is actually smaller when it is activated (~120k vs ~140k).