fix(compiler): preserve leading commas in animation definitions

mattrbeck · mattrbeck · commit 770e505f7846 · 2026-05-12T14:22:56.000-07:00
Update the regular expression in `_scopeAnimationRule` to prevent absorbing and deleting leading commas after `animation:`. Also remove the corresponding legacy test case from `keyframes_spec.ts`.
diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
@@ -367,7 +367,7 @@ export class ShadowCss {
     unscopedKeyframesSet: ReadonlySet<string>,
   ): CssRule {
     let content = rule.content.replace(
-      /((?:^|\s+|;)(?:-webkit-)?animation\s*:\s*),*([^;]+)/g,
+      /((?:^|\s+|;)(?:-webkit-)?animation\s*:\s*)([^;]+)/g,
       (_, start, animationDeclarations) =>
         start +
         animationDeclarations.replace(
diff --git a/packages/compiler/test/shadow_css/keyframes_spec.ts b/packages/compiler/test/shadow_css/keyframes_spec.ts
@@ -155,40 +155,6 @@ describe('ShadowCss, keyframes and animations', () => {
     });
   });
 
-  it('should handle (scope or not) animation definitions preceded by an erroneous comma', () => {
-    const COMPONENT_VARIABLE = '%COMP%';
-    const HOST_ATTR = `_nghost-${COMPONENT_VARIABLE}`;
-    const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`;
-    const css = `.test {
-      animation:, my-anim 1s,my-anim2 2s, my-anim3 3s,my-anim4 4s;
-    }
-    
-    @keyframes my-anim {
-      0% {color: red}
-      100% {color: blue}
-    }
-    
-    @keyframes my-anim2 {
-      0% {font-size: 1em}
-      100% {font-size: 1.2em}
-    }
-    `;
-    const result = shim(css, CONTENT_ATTR, HOST_ATTR);
-    const animationLineMatch = result.match(/animation:[^;]+;/);
-    let animationLine = '';
-    if (animationLineMatch) {
-      animationLine = animationLineMatch[0];
-    }
-    expect(result).not.toContain('animation:,');
-    ['my-anim', 'my-anim2'].forEach((scoped) =>
-      expect(animationLine).toContain(`_ngcontent-%COMP%_${scoped}`),
-    );
-    ['my-anim3', 'my-anim4'].forEach((nonScoped) => {
-      expect(animationLine).toContain(nonScoped);
-      expect(animationLine).not.toContain(`_ngcontent-%COMP%_${nonScoped}`);
-    });
-  });
-
   it('should handle (scope or not) multiple animation definitions in a single declaration', () => {
     const css = `
         div {
