Don’t add important to keyframe declarations

Author: thecrypticace

src/lib/expandApplyAtRules.js

@@ -119,15 +119,15 @@ function expandApplyAtRules(context) {
             let root = postcss.root({ nodes: [node.clone()] })
             let canRewriteSelector = node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes');
 
-            root.walkRules((rule) => {
-              if (canRewriteSelector) {
+            if (canRewriteSelector) {
+              root.walkRules((rule) => {
                 rule.selector = replaceSelector(apply.parent.selector, rule.selector, applyCandidate)
-              }
 
-              rule.walkDecls((d) => {
-                d.important = important
+                rule.walkDecls((d) => {
+                  d.important = important
+                })
               })
-            })
+            }
 
             siblings.push([meta, root.nodes[0]])
           }

tests/10-apply.test.css

@@ -273,3 +273,11 @@
 .foo {
   animation: spin 1s linear infinite;
 }
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+.bar {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
+}

tests/10-apply.test.html

@@ -33,5 +33,6 @@
     <div class="use-with-other-properties-base use-with-other-properties-component"></div>
     <div class="a b"></div>
     <div class="foo"></div>
+    <div class="bar"></div>
   </body>
 </html>

tests/10-apply.test.js

@@ -109,6 +109,10 @@ test('@apply', () => {
     .foo {
       @apply animate-spin;
     }
+
+    .bar {
+      @apply animate-pulse !important;
+    }
   }
 `