No description
## Summary The `supports-[…]` variant works around a Chrome bug where `@supports (a)or(b)` is invalid by spacing out the `and`, `or`, and `not` keywords. However, the replacement is applied to the entire value, including the inside of function calls, where these words can be part of a selector. For example, `supports-[selector(a:not(.foo))]:flex` generates: ```css @supports selector(a: not (.foo)) ``` The selector `a: not (.foo)` is unparsable, so a condition that is true in every browser silently becomes false and the utility never applies. The same happens to class names like `.and` or `.or` inside `selector(…)`. This PR only spaces out the keywords at the condition level: parens preceded by an identifier (other than the keywords themselves) start a function call, and everything inside is left as-is. The Chrome workaround still applies to the condition itself, e.g. `supports-[(display:grid)or(display:flex)]` still becomes `@supports (display: grid) or (display: flex)`. ## Test plan - Added a test covering `selector(a:not(.foo))`, class names `.and`/`.or` inside `selector(…)`, the Chrome `(a)or(b)` workaround, and a top-level `not(…)` condition. - `pnpm vitest run packages/tailwindcss/src/variants.test.ts` — 102 passed. --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com> |
||
|---|---|---|
| .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.mts | ||
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.