Add codemod for border style compatibility #14746
Merged
Conversation
This file contains hidden or 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
Member
Author
This stack of pull requests is managed by Graphite. Learn more about stacking. Join @RobinMalfait and the rest of your teammates on |
adamwathan
force-pushed
the
robin/prepare-preflight-for-border-compat
branch
from
734296f to
01a9772
Compare
RobinMalfait
force-pushed
the
robin/prepare-preflight-for-border-compat
branch
from
01a9772 to
9eeed8a
Compare
RobinMalfait
force-pushed
the
robin/add_border_compatibility_codemod
branch
from
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
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
Contributor
philipp-spiess
left a comment
philipp-spiess
left a comment
There was a problem hiding this comment.
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
9eeed8a to
dee2410
Compare
RobinMalfait
force-pushed
the
robin/add_border_compatibility_codemod
branch
from
80a880c to
3ba06b6
Compare
philipp-spiess
approved these changes
Oct 22, 2024
Contributor
Merge activity
|
philipp-spiess
changed the base branch from
robin/prepare-preflight-for-border-compat
to
graphite-base/14746
adamwathan
reviewed
Oct 22, 2024
thecrypticace
force-pushed
the
robin/add_border_compatibility_codemod
branch
from
2ee055b to
2157654
Compare
thecrypticace
force-pushed
the
graphite-base/14746
branch
from
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
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.200and in Tailwind CSS v4 the default border color iscurrentColor.Similarly in Tailwind CSS v3, DOM elements such as
input,select, andtextareahave 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.DEFAULTvalue.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.