fixup! fix(compiler): scope css keyframes in emulated view encapsulation

angular · Sep 26, 2022 · 11dc22a · 11dc22a
1 parent d74efeb
commit 11dc22a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git 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
@@ -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 {