fix: support -o-keyframes and -moz-keyframes (#2019)

svg · Jun 14, 2024 · fea2637 · fea2637
1 parent 5481fc2
commit fea2637
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 2 deletions.
diff --git a/lib/style.js b/lib/style.js
@@ -84,8 +84,12 @@ const parseStylesheet = (css, dynamic) => {
     }
     if (cssNode.type === 'Atrule') {
       if (
-        cssNode.name === 'keyframes' ||
-        cssNode.name === '-webkit-keyframes'
+        [
+          'keyframes',
+          '-webkit-keyframes',
+          '-o-keyframes',
+          '-moz-keyframes',
+        ].includes(cssNode.name)
       ) {
         return csstreeWalkSkip;
       }

diff --git a/lib/style.test.js b/lib/style.test.js
@@ -356,3 +356,64 @@ it('ignores @-webkit-keyframes atrule', () => {
     },
   });
 });
+it('ignores @-moz-keyframes atrule', () => {
+  const root = parseSvg(`
+      <svg>
+        <style>
+          .a {
+            animation: loading 4s linear infinite;
+          }
+          @-moz-keyframes loading {
+            0% {
+              stroke-dashoffset: 440;
+            }
+            50% {
+              stroke-dashoffset: 0;
+            }
+          }
+        </style>
+        <rect id="element" class="a" />
+      </svg>
+    `);
+  const stylesheet = collectStylesheet(root);
+  expect(
+    computeStyle(stylesheet, getElementById(root, 'element')),
+  ).toStrictEqual({
+    animation: {
+      type: 'static',
+      inherited: false,
+      value: 'loading 4s linear infinite',
+    },
+  });
+});
+
+it('ignores @-o-keyframes atrule', () => {
+  const root = parseSvg(`
+      <svg>
+        <style>
+          .a {
+            animation: loading 4s linear infinite;
+          }
+          @-o-keyframes loading {
+            0% {
+              stroke-dashoffset: 440;
+            }
+            50% {
+              stroke-dashoffset: 0;
+            }
+          }
+        </style>
+        <rect id="element" class="a" />
+      </svg>
+    `);
+  const stylesheet = collectStylesheet(root);
+  expect(
+    computeStyle(stylesheet, getElementById(root, 'element')),
+  ).toStrictEqual({
+    animation: {
+      type: 'static',
+      inherited: false,
+      value: 'loading 4s linear infinite',
+    },
+  });
+});