-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Migrate aria
theme keys
#18815
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
Merged
Merged
Migrate aria
theme keys
#18815
+143
−26
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
We were handling special cases (keyframes, container) _after_ we handled the normal theme keys. When handling the normal theme keys we skipped the special keys which means that you have to keep the list in sync. Now we will handle special cases first. Another refactor here is that we will push data to an intermediate variable before emitting the `@theme {…}` wrapper. This will allow us to only emit CSS when needed. We were explicitly returning `null` in some cases, but we can also just return the empty string when there is no CSS to get the same effect.
But we will make sure that we skip the ones that would be handled automatically by bare values. E.g.: `aria-foo:flex` will generate `[aria-foo="true"]`.
RobinMalfait
commented
Aug 28, 2025
This was referenced Aug 28, 2025
thecrypticace
approved these changes
Aug 28, 2025
Co-Authored-By: Jordan Pittman <thecrypticace@gmail.com>
950eac2
to
ebfee41
Compare
RobinMalfait
added a commit
that referenced
this pull request
Aug 28, 2025
This PR is similar to and a follow up of #18815, but this time to migrate the `data` theme keys. Let's imagine you have the following Tailwind CSS v3 configuration: ```ts export default { content: ['./src/**/*.html'], theme: { extend: { data: { // Automatically handled by bare values foo: 'foo', // ^^^ ^^^ ← same names // Not automatically handled by bare values bar: 'baz', // ^^^ ^^^ ← different names // Completely custom checked: 'ui~="checked"', }, }, }, } ``` Then we would generate the following Tailwind CSS v4 CSS: ```css @custom-variant data-bar (&[data-baz]); @custom-variant data-checked (&[data-ui~="checked"]); ``` Notice how we didn't generate a custom variant for `data-foo` because those are automatically handled by bare values.
RobinMalfait
added a commit
that referenced
this pull request
Aug 28, 2025
This PR is a follow up of #18815 and #18816, but this time let's migrate the `supports` theme keys. Let's imagine you have the following Tailwind CSS v3 configuration: ```ts export default { content: ['./src/**/*.html'], theme: { extend: { supports: { // Automatically handled by bare values (using CSS variable as the value) foo: 'foo: var(--foo)', // parentheses are optional bar: '(bar: var(--bar))', // Not automatically handled because names differ baz: 'qux: var(--foo)', // ^^^ ^^^ ← different names // Custom grid: 'display: grid', }, }, }, } ``` Then we would generate the following Tailwind CSS v4 CSS: ```css @custom-variant supports-baz { @supports (qux: var(--foo)) { @slot; } } @custom-variant supports-grid { @supports (display: grid) { @slot; } } ``` Notice how we didn't generate a custom variant for `data-foo` or `data-bar` because those are automatically handled by bare values. I also went with the longer form of `@custom-variant`, we could use the single selector approach, but that felt less clear to me. ```css @custom-variant supports-baz (@supports (qux: var(--foo))); @custom-variant supports-grid (@supports (display: grid)); ``` --------- Co-authored-by: Jordan Pittman <thecrypticace@gmail.com>
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 migrates
aria
theme keys when migrating from Tailwind CSS v3 to v4.While working on improving some of the error messages to get more insights into why migrating the JS file changed (#18808), I ran into an issue where I couldn't think of a good comment to why
aria
theme keys were not being migrated. (Internally we havearia
"blocked").So instead of figuring out a good error message..., I just went ahead and added the migration for
aria
theme keys.Let's imagine you have the following Tailwind CSS v3 configuration:
Then we would generate the following Tailwind CSS v4 CSS:
Notice how we didn't generate a custom variant for
aria-busy
oraria-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-in variants.This could result in slightly different behavior, or different order of classes when using
prettier-plugin-tailwindcss
.I don't know how important this is, because before this PR we would just use
@config './tailwind.config.js';
.Edit: when using the
@config
we overridearia
and extend it, which means that it would be in the expected order 🤔