goober icon indicating copy to clipboard operation
goober copied to clipboard

`*:has(...) > &` targeting is not working as expected

Open PrettyCoffee opened this issue 1 year ago • 2 comments

Hey!

I think I found a bug when targeting the current class with an :has selector on a parent. It will unexpectedly prepend the selector with the class, but probably should not.

For example:

// css call:
const myClass = css`
  *:has(:focus-visible) > & {
    /* styles */
  }
`

// resulting selector
.go3480710288 :has(:focus-visible) > .go3480710288

// selector that I would actually expect:
:has(:focus-visible) > .go3480710288

I also just found out that this bug appears as well when using other similar selectors, like :not(...) and :where(...).

When targeting from a parent with :hover, it would behave like expected, e.g.:

// css call:
const myClass = css`
  *:hover > & {
    /* styles */
  }
`

// resulting selector
:hover > .go3480710288

PrettyCoffee avatar Dec 16 '24 00:12 PrettyCoffee

I noticed the same issue in our project when we updated goober from v2.1.14 => v2.1.16

1337MARCEL avatar Dec 16 '24 23:12 1337MARCEL

heya! thanks for the bug report. Let me look into it.

cristianbote avatar Dec 17 '24 08:12 cristianbote