CSS styles not applied if using multiple attribute selectors to style an element with the direct child selector

[Marcarrian]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

If using multiple attribute selectors to style an element with the direct child selector, the styles are not applied.
This happens only in a development build.

Reproduction:
app.component.html

<div class="example-1">
  Example 1
</div>
<div class="example-2">
  Example 2
</div>

app.component.scss

:host {
  &:is([data-foo="bar"]) {
    > div.example-1 {
      background-color: lightskyblue; // working in dev and prod build
    }
  }

  &:is([data-foo="bar"], [data-foo-2="bar-2"]) {
    > div.example-2 {
      background-color: violet; // ONLY working in prod build
    }
  }
}

Please provide a link to a minimal reproduction of the bug

https://github.com/Marcarrian/angular-15-css-multiple-attribute-selectors-issue

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 15.1.6
Node: 16.16.0
Package Manager: npm 8.11.0
OS: win32 x64

Angular: 15.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1501.6
@angular-devkit/build-angular   15.1.6
@angular-devkit/core            15.1.6
@angular-devkit/schematics      15.1.6
@angular/cli                    15.1.6
@schematics/angular             15.1.6
rxjs                            7.8.0
typescript                      4.9.5

Anything else?

No response

[JeanMeche]

Basically, the support for multiple arguments for CSS pseudo class functions was broken.

I've opened the PR that fixes this.

[lipadeus]

Is this resolved? Having several strange things going on with scss compiler doing animations on child selectors. Never had this problem before in ruby on rails "compass" scss compiler.

For example

@for $i from 1 through 4 {
  li:nth-last-child(#{$i}){
    a{
      transform: translateX(-100vw);
      transition: background-color;
      transition-duration: 0.2s;
      transition-timing-function: ease-in-out;
      animation: menuDesktopPopulate 0.3s ease-out #{$i * 0.1}s forwards;
      &:hover {
        animation: fadeAndBlink 0.3s ease-out #{$i * 0.1}s forwards;
      }
    }
  }
}

This renders out so the menuDesktopPopulate is added to the &:hover instead of fadeAndBlink