From 11dc22a73e940b1f6c1d91c9750d62bf12ab9bca Mon Sep 17 00:00:00 2001
From: dario-piotrowicz <dario.piotrowicz@gmail.com>
Date: Sun, 25 Sep 2022 23:17:41 +0100
Subject: [PATCH] fixup! fix(compiler): scope css keyframes in emulated view
 encapsulation

---
 packages/compiler/src/shadow_css.ts           |  4 ++--
 .../test/shadow_css/keyframes_spec.ts         | 24 +++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
index 3604f64d90fa01..eab565fb6a8758 100644
--- a/packages/compiler/src/shadow_css.ts
+++ b/packages/compiler/src/shadow_css.ts
@@ -328,7 +328,7 @@ export class ShadowCss {
   private _scopeAnimationRule(
       rule: CssRule, scopeSelector: string, 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(
                 this._animationDeclarationKeyframesRe,
@@ -347,7 +347,7 @@ export class ShadowCss {
                   }
                 }));
     content = content.replace(
-        /((?:^|\s+)(?:-webkit-)?animation-name(?:\s*):(?:\s*))([^;]+)/g,
+        /((?:^|\s+|;)(?:-webkit-)?animation-name(?:\s*):(?:\s*))([^;]+)/g,
         (_match, start, commaSeparatedKeyframes) => `${start}${
             commaSeparatedKeyframes.split(',')
                 .map(
diff --git a/packages/compiler/test/shadow_css/keyframes_spec.ts b/packages/compiler/test/shadow_css/keyframes_spec.ts
index 7e2ccfa3c93605..6c2cb898262ea9 100644
--- a/packages/compiler/test/shadow_css/keyframes_spec.ts
+++ b/packages/compiler/test/shadow_css/keyframes_spec.ts
@@ -208,6 +208,30 @@ describe('ShadowCss, keyframes and animations', () => {
     expect(result).toContain('animation:1s "foo" ,   2s "host-a_bar",3s "host-a_quux"');
   });
 
+  it('should correctly process animations defined without any prefixed space', () => {
+    let css = '.test{display: flex;animation:foo 1s forwards;} @keyframes foo {}';
+    let expected =
+        '.test[host-a]{display: flex;animation:host-a_foo 1s forwards;} @keyframes host-a_foo {}';
+    expect(s(css, 'host-a')).toEqual(expected);
+    css = '.test{animation:foo 2s forwards;} @keyframes foo {}';
+    expected = '.test[host-a]{animation:host-a_foo 2s forwards;} @keyframes host-a_foo {}';
+    expect(s(css, 'host-a')).toEqual(expected);
+    css = 'button {display: block;animation-name: foobar;} @keyframes foobar {}';
+    expected =
+        'button[host-a] {display: block;animation-name: host-a_foobar;} @keyframes host-a_foobar {}';
+    expect(s(css, 'host-a')).toEqual(expected);
+  });
+
+  it('should correctly process keyframes defined without any prefixed space', () => {
+    let css = '.test{display: flex;animation:bar 1s forwards;}@keyframes bar {}';
+    let expected =
+        '.test[host-a]{display: flex;animation:host-a_bar 1s forwards;}@keyframes host-a_bar {}';
+    expect(s(css, 'host-a')).toEqual(expected);
+    css = '.test{animation:bar 2s forwards;}@-webkit-keyframes bar {}';
+    expected = '.test[host-a]{animation:host-a_bar 2s forwards;}@-webkit-keyframes host-a_bar {}';
+    expect(s(css, 'host-a')).toEqual(expected);
+  });
+
   it('should ignore keywords values when scoping local animations', () => {
     const css = `
         div {