No description
9e498a3e78
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 (https://github.com/tailwindlabs/tailwindcss/pull/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 have `aria` "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: ```ts export 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-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 override `aria` and extend it, which means that it would be in the expected order 🤔 --------- Co-authored-by: Jordan Pittman <thecrypticace@gmail.com> |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.workspace.ts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or feature ideas:
Discuss Tailwind CSS on GitHub
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.