Edge: `:root` selector won't work if combined with another selector

[driskull]

Stencil version:

 @stencil/core@1.2.4

I'm submitting a:

[x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

If you have a CSS :root selector combined with another selector, the statements defined within the CSS selector will not work in edge.

I'm guessing this has something to do with how the polyfill is working for Edge. My guess is that the polyfill doesn't know what to do when there are multiple CSS selectors and one of them is using :host.

For example:

Expected behavior:

I would expect :root to work if combined with multiple selectors.

Steps to reproduce:

For example:

// works
:root {
  background-color: red;
}

// does not work
:root,
:host([theme="light"] {
  color: blue;
}

Other information:

If you are using Sass, you need to check to output CSS to make sure that the selectors are not combined into a single statement. For example, we had the following which did not work in Edge.

:root {
  @include calciteLightThemeVars();
}

:host([theme="light"]) {
  @include calciteLightThemeVars();
}

:host([theme="dark"]) {
  @include calciteDarkThemeVars();
}

But converting it to this fixed the issue:

:root {
  @include calciteLightThemeVars();
}

/* keep below :root */
:host([theme="dark"]) {
  @include calciteDarkThemeVars();
}

/* keep below :host([theme="dark"]) */
:host([theme="light"]) {
  @include calciteLightThemeVars();
}

thinking maybe it has to do with this: https://medium.com/@jonathanabrams/be-wary-of-the-css-comma-selector-and-pseudo-classes-688c02320e7f

[splitinfinities]

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now.

We do not support Stencil versions less than v2, and you seem to be using an older version of Stencil. If you can upgrade to the latest version and let me know if this issue still exists, I would appreciate it.

I'm suspecting that what would be best is to keep these rules separated.

Let me know if you need anything else!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!