No description
Find a file
Srinu desetti 90f8ff41c8
Don't space out and/or/not inside function calls in supports-[…] variants (#20420)
## 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>
2026-08-14 19:43:33 +00:00
.github Bump dependencies (#20381) 2026-08-04 13:55:03 +02:00
crates Move debug logs in .tailwindcss folder (#20416) 2026-08-13 23:16:30 +02:00
integrations Do not force full page reloads when using @tailwindcss/vite (#20414) 2026-08-13 17:00:08 +02:00
packages Don't space out and/or/not inside function calls in supports-[…] variants (#20420) 2026-08-14 19:43:33 +00:00
patches Use wasm as a fallback for @tailwindcss/oxide (#20383) 2026-08-04 18:41:43 +02:00
playgrounds migrate to pnpm v11 (#20273) 2026-06-25 19:14:10 +02:00
scripts migrate to pnpm v11 (#20273) 2026-06-25 19:14:10 +02:00
.gitignore Fix slow unit test (#17465) 2025-03-31 15:26:01 +02:00
.prettierignore Bump dependencies (#19608) 2026-02-04 12:38:50 +01:00
Cargo.lock Visualize scanner related tests (#20412) 2026-08-13 12:45:40 +02:00
Cargo.toml Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
CHANGELOG.md Don't space out and/or/not inside function calls in supports-[…] variants (#20420) 2026-08-14 19:43:33 +00:00
LICENSE Add README, LICENSE, and CONTRIBUTING (#13088) 2024-03-05 14:45:39 -05:00
package.json Bump dependencies (#20381) 2026-08-04 13:55:03 +02:00
pnpm-lock.yaml Use wasm as a fallback for @tailwindcss/oxide (#20383) 2026-08-04 18:41:43 +02:00
pnpm-workspace.yaml Use wasm as a fallback for @tailwindcss/oxide (#20383) 2026-08-04 18:41:43 +02:00
README.md docs: fix GitHub links to tailwindlabs org (#19686) 2026-02-17 13:06:49 +01:00
rust-toolchain.toml Bump NAPI related dependencies (#19982) 2026-04-26 17:49:06 +02:00
turbo.json Bump dependencies (#20381) 2026-08-04 13:55:03 +02:00
vitest.config.mts Bump dependencies (#20381) 2026-08-04 13:55:03 +02:00

Tailwind CSS

A utility-first CSS framework for rapidly building custom user interfaces.

Build Status Total Downloads Latest Release License


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.