This is a byproduct of our compat plugin - however, this matches the behavior of Emotion 10 for all pseudo-selectors. I'd like to remove this compat plugin in the next major version of Emotion but I'm worried that changing the current behavior, even for a subset of pseudo-selectors, would be a breaking change that we can't do (we can continue discussing this though, those 2 are fairly new additions and it somewhat makes sense to treat them differently).

Right now you sort of can achieve this by combining namespace plugin and :global(): https://codesandbox.io/s/emotion-forked-rc5rpb?file=/index.js . Note that the generated rule has increased specificity because it uses the class name twice - maybe this could be fixed

@Andarist Thanks a lot for the info.

Note that the generated rule has increased specificity because it uses the class name twice - maybe this could be fixed

Can you point me to where to fix this? I can submit a PR.

Note, from what I check styled-components does not work as well.

My guess is that the problem is in this compat plugin:

But I didn't yet analyze this in full.

One alternative solution that I was thinking about (since adding the namespace plugin in MUI might be problematic in the long run) is to provide a way to "escape" a pseudo selector somehow so we could ignore it in the compat plugin (since it's the one that automatically prepends implicit & to all rules starting with :). Any ideas on what kind of a token we could use there?

I can think of:

• ~: it is the root dir in the terminal which could refer to global (this might not work, it refers to general sibling selectors)
• *: this looks like global (this might not work, it refers to the universal selector in CSS)
• !: or with the negate symbol to opt-out of implicit &

The usage would look like this, right?

const Component = style('div')`
  color: black
  ~:where([data-color-scheme="dark"]) & {
    color: white
  }
`

I found a workaround! https://codesandbox.io/s/emotion-forked-6eco3g?file=/index.js

Note that this might be prone to some edge cases but it probably shouldn't matter for real-life cases in which you are gonna use this.

After thinking about this a little bit - I think that a comment annotation would be the easiest solution for this. Something like:

const Component = style('div')`
  color: black
  :where([data-color-scheme="dark"]) & {
    /* emotion-no-compat */
    color: white
  }
`

I think I'm gonna add a dev-only warning for all instances of the "compat" behavior kicking in so people can start fixing their selectors in v11 but I can't change this default right now.

Note that whatever we could do about this in Emotion right now would require a new v11 minor version - and, from what I understand, you need this in MUI and you don't control which version of Emotion people have installed there as its a peer dep. So I'm unsure if any solution from our side would actually solve your issue - unless you expect people to update Emotion frequently.

I think that a comment annotation would be the easiest solution for this.

We have a util function that produces :where([data-color-scheme="dark"]) &. Does it mean that developers have to specify the comment all the time?:

styled('div')(({ theme }) => ({
  // theme.getColorSchemeSelector('dark') => ':where([data-color-scheme="dark"]) &'
  [theme.getColorSchemeSelector('dark')]: {
    /* emotion-no-compat */
    // ...styles
  }
}))

It may not work for all use-cases, but in case anyone else comes looking, I've had success with using the * universal selector before the :where() pseudoclass along with the & class selector to apply the style to the desired class like so:

* :where() & {...

const  texStyle = css`
  color: red;
  * :where([data-your-theme-value="example"]) & {
    color: blue;
   }
`

() => (
  <>
    <div data-your-theme-value='example'>
      <span css={textStyle}> Blue Text Here </span>
    </div>
    <span css={textStyle}>Red Text Here</span>
  </>
)

See the codesandbox PoC here

It may not work for all use-cases, but in case anyone else comes looking, I've had success with using the * universal selector before the :where() pseudoclass along with the & class selector to apply the style to the desired class like so:

* :where() & {...

const  texStyle = css`

  color: red;

  * :where([data-your-theme-value="example"]) & {

    color: blue;

   }

`



() => (

  <>

    <div data-your-theme-value='example'>

      <span css={textStyle}> Blue Text Here </span>

    </div>

    <span css={textStyle}>Red Text Here</span>

  </>

)

See the codesandbox PoC here

Oh, great. Thanks for letting me know.

After thinking about this a little bit - I think that a comment annotation would be the easiest solution for this. Something like:

const Component = style('div')`
  color: black
  :where([data-color-scheme="dark"]) & {
    /* emotion-no-compat */
    color: white
  }
`

I think I'm gonna add a dev-only warning for all instances of the "compat" behavior kicking in so people can start fixing their selectors in v11 but I can't change this default right now.

Unfortunately, this solution breaks down completely when using Emotion object notation.

<div
  css={{
    color: 'black',
    ':where([data-color-scheme="dark"]) &': {
      /* emotion-no-compat */              //  <== this is just a JS comment; will not be interpreted by Emotion.
      color: 'white',
    }
  }}
>

Was this ever resolved?

Solved in #3210