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> |
||
|---|---|---|
| .. | ||
| @tailwindcss-cli | ||
| @tailwindcss-postcss | ||
| @tailwindcss-vite | ||
| internal-example-plugin | ||
| internal-postcss-fix-relative-paths | ||
| tailwindcss | ||
| tsconfig.base.json | ||