Ignore keyframes in computeStyle

Ref #1408
svg · Mar 8, 2021 · ddbd704 · ddbd704
1 parent aa803bc
commit ddbd704
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/lib/style.js b/lib/style.js
@@ -61,6 +61,9 @@ const parseStylesheet = (css, dynamic) => {
       return csstree.walk.skip;
     }
     if (cssNode.type === 'Atrule') {
+      if (cssNode.name === 'keyframes') {
+        return csstree.walk.skip;
+      }
       csstree.walk(cssNode, (ruleNode) => {
         if (ruleNode.type === 'Rule') {
           rules.push(parseRule(ruleNode, dynamic || true));

diff --git a/lib/style.test.js b/lib/style.test.js
@@ -212,4 +212,35 @@ describe('computeStyle', () => {
     });
     expect(computeStyle(root.querySelector('#invalid-type'))).to.deep.equal({});
   });
+
+  it('ignores keyframes atrule', () => {
+    const root = svg2js(`
+      <svg>
+        <style>
+          .a {
+            animation: loading 4s linear infinite;
+          }
+          @keyframes loading {
+            0% {
+              stroke-dashoffset: 440;
+            }
+            50% {
+              stroke-dashoffset: 0;
+            }
+            50.1% {
+              stroke-dashoffset: 880;
+            }
+          }
+        </style>
+        <rect id="element" class="a" />
+      </svg>
+    `);
+    expect(computeStyle(root.querySelector('#element'))).to.deep.equal({
+      animation: {
+        type: 'static',
+        inherited: false,
+        value: 'loading 4s linear infinite',
+      },
+    });
+  });
 });