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

Add codemod for border style compatibility #14746

Merged
merged 1 commit into from
Oct 22, 2024

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Oct 21, 2024

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.

@RobinMalfait RobinMalfait requested a review from a team as a code owner October 21, 2024 21:45
Copy link
Member Author

RobinMalfait commented Oct 21, 2024

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @RobinMalfait and the rest of your teammates on Graphite Graphite

@adamwathan adamwathan force-pushed the robin/prepare-preflight-for-border-compat branch from 734296f to 01a9772 Compare October 21, 2024 21:47
@RobinMalfait RobinMalfait force-pushed the robin/prepare-preflight-for-border-compat branch from 01a9772 to 9eeed8a Compare October 21, 2024 21:55
@RobinMalfait RobinMalfait force-pushed the robin/add_border_compatibility_codemod branch from bec4a56 to 5c49d09 Compare October 21, 2024 21:55
@RobinMalfait RobinMalfait marked this pull request as draft October 21, 2024 21:58
@RobinMalfait RobinMalfait force-pushed the robin/add_border_compatibility_codemod branch from 5c49d09 to c48fe31 Compare October 22, 2024 09:24
@RobinMalfait RobinMalfait marked this pull request as ready for review October 22, 2024 09:35
Copy link
Member

@philipp-spiess philipp-spiess left a 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

@RobinMalfait RobinMalfait force-pushed the robin/prepare-preflight-for-border-compat branch from 9eeed8a to dee2410 Compare October 22, 2024 14:13
@RobinMalfait RobinMalfait force-pushed the robin/add_border_compatibility_codemod branch from 80a880c to 3ba06b6 Compare October 22, 2024 14:13
Copy link
Member

philipp-spiess commented Oct 22, 2024

Merge activity

  • Oct 22, 12:07 PM EDT: The merge label 'merge-queue' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
  • Oct 22, 12:09 PM EDT: A user added this pull request to the Graphite merge queue.
  • Oct 22, 12:18 PM EDT: The Graphite merge queue couldn't merge this PR because it had conflicts with the trunk branch.
  • Oct 22, 12:38 PM EDT: Graphite disabled "merge when ready" on this PR due to: a merge conflict with the target branch; resolve the conflict and try again..
  • Oct 22, 12:38 PM EDT: The merge label 'merge-queue' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
  • Oct 22, 12:50 PM EDT: Graphite disabled "merge when ready" on this PR due to: a merge conflict with the target branch; resolve the conflict and try again..
  • Oct 22, 12:52 PM EDT: The merge label 'merge-queue' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
  • Oct 22, 1:24 PM EDT: The merge label 'merge-queue' was removed. This PR will no longer be merged by the Graphite merge queue
  • Oct 22, 1:25 PM EDT: The merge label 'merge-queue' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
  • Oct 22, 1:36 PM EDT: Graphite rebased this pull request after merging its parent, because this pull request is set to merge when ready.
  • Oct 22, 1:42 PM EDT: A user added this pull request to the Graphite merge queue.
  • Oct 22, 1:47 PM EDT: A user merged this pull request with the Graphite merge queue.

@philipp-spiess philipp-spiess changed the base branch from robin/prepare-preflight-for-border-compat to graphite-base/14746 October 22, 2024 16:18
CHANGELOG.md Outdated Show resolved Hide resolved
@thecrypticace thecrypticace force-pushed the robin/add_border_compatibility_codemod branch from 2ee055b to 2157654 Compare October 22, 2024 17:35
@thecrypticace thecrypticace changed the base branch from graphite-base/14746 to next October 22, 2024 17:36

Unverified

The committer email address is not verified.
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 thecrypticace force-pushed the robin/add_border_compatibility_codemod branch from 2157654 to c6572ab Compare October 22, 2024 17:41
@graphite-app graphite-app bot merged commit c6572ab into next Oct 22, 2024
2 checks passed
@graphite-app graphite-app bot deleted the robin/add_border_compatibility_codemod branch October 22, 2024 17:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants