tailwindcss/packages
Adam Wathan 3df38a7458
Don't wrap relative selectors in arbitrary variants with :is(…) (#14203)
Prior to this PR, we weren't accounting for the fact that `:has(…)`
supports [relative
selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#relative_selector),
which are sort of like partial selectors that can start with a
combinator like `>`, `+`, or `~`.

Before, a class like `has-[>img]:flex` would generate this:

```css
.has-\[\>img\]\:flex:has(*:is(> img)) {
  display: flex;
}
```

This was incorrect because `*:is(> img)` isn't even valid CSS at all, so
the rule would do nothing.

After this change, we generate this instead:

```css
.has-\[\>img\]\:flex:has(> img) {
  display: flex;
}
```

This PR also ensures that relative selectors are recognized as invalid
in places where they are not supported, so classes like
`group-[>img]:flex` for example will produce nothing now instead of
invalid CSS.

This is mostly a simple change but it did involve storing some
additional information in the variant AST.

Fixes #14202.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2024-08-16 13:42:04 -04:00
..
@tailwindcss-cli Improve Oxide scanner API (#14187) 2024-08-16 15:05:42 +02:00
@tailwindcss-postcss Improve Oxide scanner API (#14187) 2024-08-16 15:05:42 +02:00
@tailwindcss-vite Improve Oxide scanner API (#14187) 2024-08-16 15:05:42 +02:00
internal-example-plugin Prefix internal modules with internal-* (#14074) 2024-07-29 10:58:07 -04:00
internal-postcss-fix-relative-paths Bump dependencies (#14160) 2024-08-09 16:12:24 +02:00
tailwindcss Don't wrap relative selectors in arbitrary variants with :is(…) (#14203) 2024-08-16 13:42:04 -04:00
tsconfig.base.json introduce v4 codebase 2024-03-05 14:29:15 +01:00