-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Add codemod for border style compatibility #14746
Merged
Merged
+1,871
−11
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
This stack of pull requests is managed by Graphite. Learn more about stacking. Join @RobinMalfait and the rest of your teammates on Graphite |
adamwathan
force-pushed
the
robin/prepare-preflight-for-border-compat
branch
from
October 21, 2024 21:47
734296f
to
01a9772
Compare
RobinMalfait
force-pushed
the
robin/prepare-preflight-for-border-compat
branch
from
October 21, 2024 21:55
01a9772
to
9eeed8a
Compare
RobinMalfait
force-pushed
the
robin/add_border_compatibility_codemod
branch
from
October 21, 2024 21:55
bec4a56
to
5c49d09
Compare
RobinMalfait
commented
Oct 21, 2024
packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.ts
Outdated
Show resolved
Hide resolved
RobinMalfait
commented
Oct 21, 2024
RobinMalfait
commented
Oct 21, 2024
RobinMalfait
force-pushed
the
robin/add_border_compatibility_codemod
branch
from
October 22, 2024 09:24
5c49d09
to
c48fe31
Compare
RobinMalfait
commented
Oct 22, 2024
packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.ts
Show resolved
Hide resolved
RobinMalfait
commented
Oct 22, 2024
RobinMalfait
commented
Oct 22, 2024
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.
LGTM, but we may need to tweak the messaging a bit. I provided a suggestion inline
packages/@tailwindcss-upgrade/src/codemods/migrate-border-compatibility.test.ts
Show resolved
Hide resolved
RobinMalfait
force-pushed
the
robin/prepare-preflight-for-border-compat
branch
from
October 22, 2024 14:13
9eeed8a
to
dee2410
Compare
RobinMalfait
force-pushed
the
robin/add_border_compatibility_codemod
branch
from
October 22, 2024 14:13
80a880c
to
3ba06b6
Compare
philipp-spiess
approved these changes
Oct 22, 2024
Merge activity
|
philipp-spiess
changed the base branch from
robin/prepare-preflight-for-border-compat
to
graphite-base/14746
October 22, 2024 16:18
adamwathan
reviewed
Oct 22, 2024
thecrypticace
force-pushed
the
robin/add_border_compatibility_codemod
branch
from
October 22, 2024 17:35
2ee055b
to
2157654
Compare
thecrypticace
force-pushed
the
graphite-base/14746
branch
from
October 22, 2024 17:36
dee2410
to
816e730
Compare
This PR adds a codemod that ensures that the border styles from Tailwind CSS v3 work as expected once your project is migrated to Tailwind CSS v4. In Tailwind CSS v3, the default border color is `colors.gray.200` and in Tailwind CSS v4 the default border color is `currentColor`. Similarly in Tailwind CSS v3, DOM elements such as `input`, `select`, and `textarea` have a border width of `0px`, in Tailwind CSS v4, we don't change the border width of these elements and keep them as `1px`. If your project happens to already use the same value for the default border color (`currentColor`) as we use in Tailwind CSS v4, then nothing happens. But this is very unlikely, so we will make sure that we honor your `borderColor.DEFAULT` value. If you didn't change the default values in your `tailwind.config.js`, then we will inject compatibility CSS using the default Tailwind CSS v3 values to ensure the default color and width are applied correctly.
thecrypticace
force-pushed
the
robin/add_border_compatibility_codemod
branch
from
October 22, 2024 17:41
2157654
to
c6572ab
Compare
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.
This PR adds a codemod that ensures that the border styles from Tailwind CSS v3 work as expected once your project is migrated to Tailwind CSS v4.
In Tailwind CSS v3, the default border color is
colors.gray.200
and in Tailwind CSS v4 the default border color iscurrentColor
.Similarly in Tailwind CSS v3, DOM elements such as
input
,select
, andtextarea
have a border width of0px
, in Tailwind CSS v4, we don't change the border width of these elements and keep them as1px
.If your project happens to already use the same value for the default border color (
currentColor
) as we use in Tailwind CSS v4, then nothing happens. But this is very unlikely, so we will make sure that we honor yourborderColor.DEFAULT
value.If you didn't change the default values in your
tailwind.config.js
, then we will inject compatibility CSS using the default Tailwind CSS v3 values to ensure the default color and width are applied correctly.