Ensure first class inside className in React is migrated #19031
Merged
+30
−7
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
This lets things like `enterClass` and `enterClassName` work which are common React-isms
thecrypticace
approved these changes
Sep 30, 2025
Contributor
|
Thanks! |
This was referenced Oct 21, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
1. Handling React className migration
The PR fixes an issue when migrating React components to tailwind v4 with the migration tool, that the first class after
className="is ignored.For example, when migrating
shadowwill not be migrated toshadow-sm.This is because in
is-safe-migration.ts, it tests the line before candidate with regex/(?<!:?class)=['"]$/. This basically skips the migration for anything likefoo="shadow", with only exception for Vue (eg.class="shadow").The PR changes the regex from
to
which essentially adds a new exception specifically for React's
className="shadow"case.2. Removing redundant rules
Besides, I found that several other rules in
CONDITIONAL_TEMPLATE_SYNTAXbeing redundant since they are already covered by the rule above, so I removed them. If we prefer the previous explicit approach, I can revert it.Test plan
Tests added for both the Vue and React classes to prevent false negative cases.