Angular Component styling is inconsistent

[Jorrex]

Current behavior

When mounting an Angular component that has both styleUrls and styles defined, this creates an inconsistent result. It seems that the styles are applied in a different order in comparison when serving the application.

The stylesheet defines a yellow background and the inline styling defines a lightblue background. When serving the app, the button is always lightblue. When mounting the component via Cypress, it's yellow.

Desired behavior

Have a consistent behavior when mounting Angular components in comparison when serving the application.

Test code to reproduce

https://github.com/Jorrex/cypress-angular-ct-style

Cypress Version

10.2.6

Node version

v16.16.0

Operating System

Windows 10.0.22621.1555

Debug Logs

See attachment 'logs.txt'

Other

Worth noting that this example and our real repo is using Nx.
logs.txt

[lmiller1990]

Possibly related and fixed in: #24272

Did not try a later Cypress version, but #24272 landed after 10.2 - might be worth updating, although I suspect it's unrelated.

[Jorrex]

Possibly related and fixed in: #24272

Did not try a later Cypress version, but #24272 landed after 10.2 - might be worth updating, although I suspect it's unrelated.

Doubt it's related to this since I have zero assets in the project. This is pure style that's defined on the Angular component.