CSS rule not included when flattening a style with nested css

[quentinderoubaix]

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

Don't known / other

Is this a regression?

No

Description

While experimenting with daisyui beta, I found a weird behavior with the rating component, where some stars would not show up...
After investigating a bit, it seems to be coming from css rules not being included by Angular when using css with nested rules.

Here is the reproduction:
Clone this repo, and checkout the main branch. Run ng serve and observe the following rating display:

You can then checkout browserslist-updated branch, run ng serve again and observe the expected display:

The difference between those two branches is the setup of the browserlist, where we target latest major of Safari / iOS.
This allows Angular to avoid flattening any included css assets with css nesting...

Checking DaisyUI code, this seems to be the css that was not included after flattening:

.rating {
  * {
    &:checked,
    &[aria-checked="true"],
    &[aria-current="true"],
    &:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) {
      @apply opacity-100;
    }
  }
}

Please provide a link to a minimal reproduction of the bug

https://github.com/quentinderoubaix/repro-angular-css-nesting

Please provide the exception or error you saw

No error from Angular, just unexpected visual behavior.

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

Angular CLI: 19.1.7
Node: 22.14.0
Package Manager: npm 11.1.0
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1901.7
@angular-devkit/build-angular   19.1.7
@angular-devkit/core            19.1.7
@angular-devkit/schematics      19.1.7
@angular/cli                    19.1.7
@schematics/angular             19.1.7
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else?

While potentially the css brought by DaisyUI was not compatible, I would expect Angular to provide warnings if there is an issue handling this asset.

[JeanMeche]

A fix must have landed recently because on esbuild because 0.25 has a different output from 0.24. (esbuild is responsible for the downleveling here)

0.25:
https://esbuild.github.io/try/#YgAwLjI1LjAALS10YXJnZXQ9c2FmYXJpMTcAZQB0ZXN0LmNzcwAucmF0aW5nIHsKICAqIHsKICAgICY6Y2hlY2tlZCwKICAgICZbYXJpYS1jaGVja2VkPSJ0cnVlIl0sCiAgICAmW2FyaWEtY3VycmVudD0idHJ1ZSJdLAogICAgJjpoYXMofiAqOmNoZWNrZWQsIH4gKlthcmlhLWNoZWNrZWQ9InRydWUiXSwgfiAqW2FyaWEtY3VycmVudD0idHJ1ZSJdKSB7CiAgICAgIEBhcHBseSBvcGFjaXR5LTEwMDsKICAgIH0KICB9Cn0

0.24:
https://esbuild.github.io/try/#YgAwLjI0LjIALS10YXJnZXQ9c2FmYXJpMTcAZQB0ZXN0LmNzcwAucmF0aW5nIHsKICAqIHsKICAgICY6Y2hlY2tlZCwKICAgICZbYXJpYS1jaGVja2VkPSJ0cnVlIl0sCiAgICAmW2FyaWEtY3VycmVudD0idHJ1ZSJdLAogICAgJjpoYXMofiAqOmNoZWNrZWQsIH4gKlthcmlhLWNoZWNrZWQ9InRydWUiXSwgfiAqW2FyaWEtY3VycmVudD0idHJ1ZSJdKSB7CiAgICAgIEBhcHBseSBvcGFjaXR5LTEwMDsKICAgIH0KICB9Cn0

The support of esbuild 0.25 will land with 19.2 next week (and this week in RC).

[clydin]

Angular 19.2.0 has been released.
Can you try updating your project to see if this solves the problem?
Please ensure that all Angular related packages have been updated.

[quentinderoubaix]

@clydin
this indeed solves the problem, issue can be closed

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}