36417cbd12
This PR fixes an issue where a custom variant declared with a
`@container` wasn't properly negated when using it in combination with
the `not-*` variant.
Given this CSS:
```css
@custom-variant has-a {
@container style(--a) {
@slot;
}
}
```
If you then used `not-has-a:flex`, then the following CSS was produced:
```css
.not-has-a\:flex {
@container style(--a) not {
display: flex;
}
}
```
But we expect the `not` to be in the correct location:
```css
.not-has-a\:flex {
@container not style(--a) {
display: flex;
}
}
```
The issue was that we did some string related checks, and we assumed
that the `query` part of the `@container` (`style(--a)`) had to start
with a `(` character.
To fix this, we now parse the value to an AST, and verify the AST shape
before manipulating it. This now checks whether the `query` part is a
function (both `(…)` and `style(…)` are considered functions).
Also added some additional tests that were already handled, these cases
look like:
- `@container {query}`
- `@container not {query}`
- `@container {name} not {query}`
- `@container {name} {query}`
Fixes: #20058
## Test plan
1. Added a failing test for the use case of the linked issue.
2. Added a few more additional tests to explicitly track some use cases
we handled already but didn't track via tests.
3. All other tests still pass as expected.
|
||
|---|---|---|
| .. | ||
| @tailwindcss-browser | ||
| @tailwindcss-cli | ||
| @tailwindcss-node | ||
| @tailwindcss-postcss | ||
| @tailwindcss-standalone | ||
| @tailwindcss-upgrade | ||
| @tailwindcss-vite | ||
| @tailwindcss-webpack | ||
| internal-example-plugin | ||
| tailwindcss | ||
| tsconfig.base.json | ||