-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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
[vtadmin-web] Upgrade to tailwindcss v3 #9648
Conversation
…t; move to dev dependencies Signed-off-by: Sara Bee <[email protected]>
Signed-off-by: Sara Bee <[email protected]>
Signed-off-by: Sara Bee <[email protected]>
Signed-off-by: Sara Bee <[email protected]>
Signed-off-by: Sara Bee <[email protected]>
Signed-off-by: Sara Bee <[email protected]>
@@ -232,3 +230,121 @@ table tbody td[rowSpan] { | |||
.Toastify__toast-theme--dark { | |||
background: none !important; | |||
} | |||
|
|||
/* See https://tailwindcss.com/docs/extracting-components */ | |||
@layer components { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I pulled this CSS from src/style/components.css, and then deleted that file.
This is because tailwindcss v3 tweaked its base button styles in a way that conflicted with our .btn
component, as described in tailwindlabs/tailwindcss#6602. Trying to fix it resulted in a real nasty snarl of import ordering issues, so I've opted to simply pull everything into this one file for now.
@@ -56,3 +56,201 @@ | |||
.tabContainer { | |||
margin: 2.4rem 0; | |||
} | |||
|
|||
.danger { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This unpleasant part of the diff adds a bunch of CSS classes for rendering the colour chips on the debug page. The new JIT compiler in tailwindcss v3 does not work with "dynamic classes" e.g., a JavaScript string template like background-${foo}
.
There are more "elegant" ways to fix this with postcss loops but it looked like it would require adding a new postcss dependency to support loops and... 🤷
Signed-off-by: Sara Bee <[email protected]>
dbb92b3
to
289af76
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for handling this!
Signed-off-by: Sara Bee <[email protected]>
Description
This updates vtadmin-web to use tailwindcss v3, following the Upgrade Guide.
Here's the announcement, for the curious: https://tailwindcss.com/blog/tailwindcss-v3
I verified that everything still looks + works ok by poking around in the UI. The most likely oversight (since it's difficult to grep for) is any instance of "dynamic classnames", which are not supported; that is, class names that use string templates like this:
Happy to fix forward anything I may have missed. I've long dreamed of something like Percy for visual regression testing... but that's a whole thing that comes with its own trade-offs. So! Manual verification for now.
Beyond having the latest + greatest, the other motivation for doing this now is that the
tailwindcss@npm:@tailwindcss/postcss7-compat
dependency, a requirement from tailwindcss v2, breaksnpm outdated
:Related Issue(s)
This goes along with the react-scripts + postcss upgrade in #9493, and the subsequent postcss upgrade in #9612.
Checklist
Deployment Notes
N/A