Don't add classname for `:is()` and `:where()` selectors #2836

siriwatknp · 2022-07-24T06:56:24Z

The problem

I want to leverage :where selector (it is good for theming because it has 0 specificity) to style a component based on the parent attribute.

However, emotion prefix the style with the generated class name in front of :where which does not make the style works:

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

turned into

<style>
// to make this style work, the `.css-9qpay1` at the beginning should be removed
.css-9qpay1:where([data-color-scheme="dark"]) .css-9qpay1{color:white;}
</style>

Here is the reproduction: https://codesandbox.io/s/emotion-forked-e9fyes?file=/index.js

Proposed solution

Should :is and :where be the exceptional case to not implicitly append to the class name?

const Component = style('div')`
  :where([data-color-scheme="dark"]) & {
    color: white
  }
  // result as ':where([data-color-scheme="dark"]) .css { color: white };
`

const Component = style('div')`
  // explicitly declare the '&'
  &:where([data-color-scheme="dark"]) {
    color: white
  }
  // result as '.css:where([data-color-scheme="dark"]) .css { color: white };
`

Alternative solutions

Is there any workaround that I might have missed?

Additional context

Hi, I am from the MUI core team. We are working on the theming API to let developers theme components based on color schemes without having to read the mode from the theme.

Our API added an attribute to the html when the color scheme changes:

// light mode
<html data-color-scheme="light">

// dark mode
<html data-color-scheme="dark">

The text was updated successfully, but these errors were encountered:

Andarist · 2022-07-24T08:20:42Z

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

siriwatknp · 2022-07-25T03:53:02Z

@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.

Andarist · 2022-07-25T09:23:13Z

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

emotion/packages/cache/src/stylis-plugins.js

Line 88 in 1554a7e

export let compat = element => {

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?

siriwatknp · 2022-07-25T10:37:05Z

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
  }
`

siriwatknp · 2022-08-08T12:39:54Z

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

Andarist · 2022-08-08T12:45:03Z

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.

Andarist · 2022-08-22T10:55:06Z

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.

siriwatknp · 2023-01-04T04:07:22Z

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
  }
}))

ByronDWall · 2023-01-27T18:25:25Z

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

siriwatknp · 2023-01-28T02:16:54Z

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.

ivanjonas · 2023-06-27T13:14:49Z

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',
    }
  }}
>

thomaslindstrom · 2024-07-12T00:49:19Z

Was this ever resolved?

thomaslindstrom · 2024-07-12T02:22:01Z

Solved in #3210

siriwatknp added feature request needs triage labels Jul 24, 2022

siriwatknp mentioned this issue Jul 25, 2022

[website] Fix home page dark mode flicker mui/material-ui#33545

Merged

1 task

siriwatknp mentioned this issue Oct 25, 2022

Migrate all website pages to use CSS theme variables mui/material-ui#34880

Closed

10 tasks

ZeeshanTamboli mentioned this issue May 22, 2023

[docs] Fix branding theme tabs and navigation bar regressions mui/material-ui#37362

Merged

1 task

emmenko mentioned this issue Jan 16, 2024

Refactor Page Layout components to render correctly in Custom Views panels commercetools/merchant-center-application-kit#3353

Merged

oliviertassinari mentioned this issue Feb 22, 2024

[docs-infra] The docs with RTL break the dark theme mui/material-ui#41239

Open

thomaslindstrom mentioned this issue Jul 12, 2024

Add option explicitAmpersand on @emotion/cache to handle :is and :where, etc #3210

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Don't add classname for `:is()` and `:where()` selectors #2836

Don't add classname for `:is()` and `:where()` selectors #2836

siriwatknp commented Jul 24, 2022 •

edited

Loading

Andarist commented Jul 24, 2022

siriwatknp commented Jul 25, 2022

Andarist commented Jul 25, 2022

siriwatknp commented Jul 25, 2022 •

edited

Loading

siriwatknp commented Aug 8, 2022

Andarist commented Aug 8, 2022

Andarist commented Aug 22, 2022

siriwatknp commented Jan 4, 2023

ByronDWall commented Jan 27, 2023

siriwatknp commented Jan 28, 2023

ivanjonas commented Jun 27, 2023 •

edited

Loading

thomaslindstrom commented Jul 12, 2024

thomaslindstrom commented Jul 12, 2024

Don't add classname for :is() and :where() selectors #2836

Don't add classname for :is() and :where() selectors #2836

Comments

siriwatknp commented Jul 24, 2022 • edited Loading

Andarist commented Jul 24, 2022

siriwatknp commented Jul 25, 2022

Andarist commented Jul 25, 2022

siriwatknp commented Jul 25, 2022 • edited Loading

siriwatknp commented Aug 8, 2022

Andarist commented Aug 8, 2022

Andarist commented Aug 22, 2022

siriwatknp commented Jan 4, 2023

ByronDWall commented Jan 27, 2023

siriwatknp commented Jan 28, 2023

ivanjonas commented Jun 27, 2023 • edited Loading

thomaslindstrom commented Jul 12, 2024

thomaslindstrom commented Jul 12, 2024

Don't add classname for `:is()` and `:where()` selectors #2836

Don't add classname for `:is()` and `:where()` selectors #2836

siriwatknp commented Jul 24, 2022 •

edited

Loading

siriwatknp commented Jul 25, 2022 •

edited

Loading

ivanjonas commented Jun 27, 2023 •

edited

Loading