react-spectrum
4612b19f - fix(tailwindcss-react-aria-components): make not-* variants compose with native-overlapping states (#9974)

Commit
90 days ago
fix(tailwindcss-react-aria-components): make not-* variants compose with native-overlapping states (#9974) * fix(tailwindcss-react-aria-components): make not-* variants compose with native-overlapping states Tailwind's `not-*` compound walker bails when a variant produces more than one style rule per path. The dual-selector (array) shape used for variants that overlap native CSS states (hover, focus, disabled, invalid, etc.) emitted two sibling rules, so `not-disabled:`, `not-invalid:`, `not-focus:`, `not-hover:`, and similar utilities silently generated no CSS. Collapse both branches into a single `:is()` selector. `:where()` keeps specificity at (0,1,0) so cascade behavior matches the previous output. Hover additionally needs `@media (hover: hover)` to prevent sticky styles on touch devices. Emitting it as a CSS-in-JS object (instead of a string starting with `@media`) causes Tailwind to report the variant's compounds as `StyleRules | AtRules`, which preserves `group-hover:` / `peer-hover:` composition while still giving `not-hover:` the "1 style rule + 1 at-rule per path" shape the walker requires. Test coverage extended with `not-*`, `group-not-*`, `peer-not-*`, `has-not-*`, `not-group-*`, `peer-hover:`, and `in-*` variants. * format * cleanup --------- Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Author
Parents
Loading