Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork4.7k
Improve error messages when migrating a JS config file goes wrong#18808
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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Draft
RobinMalfait wants to merge5 commits intomainChoose a base branch fromfix/improve-error-handling-when-migrating-config-file
base:main
Could not load branches
Branch not found:{{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline, and old review comments may become outdated.
Draft
Improve error messages when migrating a JS config file goes wrong#18808
RobinMalfait wants to merge5 commits intomainfromfix/improve-error-handling-when-migrating-config-file
Uh oh!
There was an error while loading.Please reload this page.
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
Merged
RobinMalfait added a commit that referenced this pull requestAug 28, 2025
This PR migrates `aria` theme keys when migrating from Tailwind CSS v3to v4.While working on improving some of the error messages to get moreinsights into why migrating the JS file changed(#18808), I ran into anissue where I couldn't think of a good comment to why `aria` theme keyswere not being migrated. (Internally we have `aria` "blocked").So instead of figuring out a good error message..., I just went aheadand added the migration for `aria` theme keys.Let's imagine you have the following Tailwind CSS v3 configuration:```tsexport default { content: ['./src/**/*.html'], theme: { extend: { aria: { // Built-in (not really, but visible because of intellisense) busy: 'busy="true"', // Automatically handled by bare values foo: 'foo="true"', // ^^^ ^^^ ← same names // Not automatically handled by bare values because names differ bar: 'baz="true"', // ^^^ ^^^ ← different names // Completely custom asc: 'sort="ascending"', desc: 'sort="descending"', }, }, },}```Then we would generate the following Tailwind CSS v4 CSS:```css@custom-variant aria-bar (&[aria-baz="true"]);@custom-variant aria-asc (&[aria-sort="ascending"]);@custom-variant aria-desc (&[aria-sort="descending"]);```Notice how we didn't generate a custom variant for `aria-busy` or`aria-foo` because those are automatically handled by bare values.We could also emit a comment near the CSS to warn about the fact that`@custom-variant` will always be sorted _after_ any other built-invariants.This could result in slightly different behavior, or different order ofclasses when using `prettier-plugin-tailwindcss`.I don't know how important this is, because before this PR we would justuse `@config './tailwind.config.js';`.Edit: when using the `@config` we override `aria` and extend it, whichmeans that it would be in the expected order 🤔---------Co-authored-by: Jordan Pittman <thecrypticace@gmail.com>
Nothing new here, but this improves the error messages a bit when using`addComponents` or `matchComponents` because otherwise the error shows`addUtilities` or `matchUtilities`.These also add an additional note:> Note: in Tailwind CSS v4, `matchComponents` is an alias for `matchUtilities`.
Otherwise `Reflect.ownKeys` would crash on non-object values.Co-Authored-By: Jordan Pittman <thecrypticace@gmail.com>
Before this, we would just show "Cannot migrate"-like error messages.But this will show a bit more detail about which theme keys are theculprit.Co-Authored-By: Jordan Pittman <thecrypticace@gmail.com>
Co-Authored-By: Jordan Pittman <thecrypticace@gmail.com>
When splitting `'foo\n\nbar'` by `\n`, you will get `['foo', '', 'bar']`.The `''` value will result in `[]` after the word wrapping. Thisinformation gets lost when we `flatMap`, so let's keep the newline using`['']` as the fallback.
f463296
to1d1535a
CompareSign up for freeto 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.
Uh oh!
There was an error while loading.Please reload this page.
This PR updates some error messages with more insights to know what went wrong or why we didn't migrate the JS config file when going from v3 to v4.
Let's say you have a crazy configuration file like this:
I know it's made up, but just trying to highlight the different kinds of issue we run into and decidenot to migrate.
More than happy to adjust the messages. I also included a bunch of different types to check different categories of issues. But migrating a config like this, will result in:

Still a draft, because the category about
data
,aria
andsupports
variants and also the category about complex screens is something I just want to solve properly.