Skip to content

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

@PrettyCoffee

Description

@PrettyCoffee

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions