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

compiler

Is this a regression?

No

Description

Keyframe scoping (introduced in 4d6a1d6) adds a regexp-based processor that transforms @keyframes X and animation-name: X to a prefixed/scoped value to provide emulated keyframe encapsulation.

It seems that a missing space is able to trip the processor up, so it processes the @keyframes declaration but not the animation declaration. This only happens if your animation shorthand is in the wrong order, i.e. animation-name is specified first.

The bug goes away if:

• You don't use ViewEncapsulation.Emulated
• You add a space between , and foo in the below example
• You use the spec compliant order with animation-name last

For example:

@keyframes foo { ... }
@keyframes bar { ... }

#my-div {
    /* prettier-ignore */
    animation: bar 1s infinite,foo 1s infinite; /* THIS BUG: foo is not processed */
    animation: bar 1s infinite, foo 1s infinite; /* OK: foo is processed */
    animation: 1s infinite bar,1s infinite foo; /* OK: foo is processed */
}

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-eebqcd

Please provide the exception or error you saw

Some forms of animation shorthand syntax do not correctly process the keyframe scoping issues

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

@angular/{compiler, core, ...}: 15.1.2
rxjs: 7.8.0
tslib: 2.5.0
zone.js: 0.12.0

Anything else?

• Angular libraries compiled with older versions minify CSS before distribution to NPM, so you may stumble upon this bug by accidentally using the wrong shorthand order even if your whitespace is correct