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

Don't known / other

Is this a regression?

Yes

Description

Starting with Angular 18.2.8 having CSS-Rules like

/*.all rules before a good */

.foo:not(
  .bla) {
    background-color: green;
}

/* all rules after are broken */

breaks Dev-Mode when running with Webpack (the new ES-Build driven Dev-Mode is unaffected).

Looking at the generated CSS shows that the resulting CSS is broken:

.foo[_ngcontent-ng-c2967627618]:not( {
    background-color: green;
}

.my-style[_ngcontent-ng-c2967627618] {
  background-color: red;
}

It should be (eg generated when running with ES-Build).

.foo[_ngcontent-ng-c2967627618]:not(.bla) {
  background-color: green;
}
.my-style[_ngcontent-ng-c2967627618] {
  background-color: red;
}

Looking at the changelog #57796 might be the cause.

Please provide a link to a minimal reproduction of the bug

https://github.com/tomsontom/ng-css-regression

Please provide the exception or error you saw

Having a :not with a line break in inside the () breaks CSS.

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

Angular CLI: 18.2.10
Node: 20.13.1
Package Manager: npm 10.5.2
OS: darwin arm64

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

Package Version

@angular-devkit/architect 0.1802.10
@angular-devkit/build-angular 18.2.10
@angular-devkit/core 18.2.10
@angular-devkit/schematics 18.2.10
@angular/cli 18.2.10
@schematics/angular 18.2.10
rxjs 7.8.1
typescript 5.5.4
zone.js 0.14.10

Anything else?

No response