No description
5e9f66e428
This PR doesn't fix any issues, but it does add an integration test (as a regression test) to make sure that `@variant` with default variants and custom variants can be used inside of JS based plugin APIs. In Tailwind CSS v4.3.1 we introduced a PR that handles `@variant` in the `addBase` Plugin API (https://github.com/tailwindlabs/tailwindcss/pull/19480). This was a bit of an older PR, but the tests made sense, so it was merged. However, by introducing that PR, we introduced a bug that the `@variant` was handled too early. If you added custom variants later _and_ used it in the `addBase`, then you would get an error since the variant isn't available (yet). That issue was fixed by https://github.com/tailwindlabs/tailwindcss/pull/20247 Now the question remains, why did we even have the original PR when it already worked? The use case we had was using `@variant` as part of the `@tailwindcss/typography` plugin configuration for one of our templates. I was indeed able to reproduce the issue where `@variant lg` was seen in the output CSS file. Turns out that this template was using `@tailwindcss/typography` + `@variant` in the configuration, but it was also using Tailwind CSS v4.1.15. Upgrading to the latest version automagically fixed the issue we had. This is also the behavior you can see in the integration test. The correct behavior was introduced in an even older PR https://github.com/tailwindlabs/tailwindcss/pull/19263 All that said, everything should work in the next release related to `@variant` usages inside JS based APIs. **Tiny improvement** While debugging what's going on, I noticed that we looped over the AST to get some nodes out and we did that twice. This PR also improves that by re-using the same list of nodes instead of computing it twice. This won't have a huge impact, but it happened while compiling every single utility which is not ideal. ## Test plan 1. All tests should pass 2. I can't see `@variant` in the output CSS file Input: <img width="655" height="323" alt="image" src="https://github.com/user-attachments/assets/20c8d524-3575-488c-b0c0-5c4669f37dc7" /> Before: <img width="477" height="175" alt="image" src="https://github.com/user-attachments/assets/045e2086-1d4b-487c-96ff-676351412935" /> After: <img width="484" height="175" alt="image" src="https://github.com/user-attachments/assets/24d950b1-7c28-40f8-96bc-81b38be0e7a3" /> |
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| patches | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| rust-toolchain.toml | ||
| turbo.json | ||
| vitest.config.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.