Don’t rewrite selections in keyframe at rules

I think this logic is too specific but it seems to work for now

Author: thecrypticace

src/lib/expandApplyAtRules.js

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

tests/10-apply.test.css

@@ -265,3 +265,11 @@
   color: green;
   font-weight: 700;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.foo {
+  animation: spin 1s linear infinite;
+}

tests/10-apply.test.html

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

tests/10-apply.test.js

@@ -105,6 +105,10 @@ test('@apply', () => {
     .custom-util {
       custom: stuff;
     }
+
+    .foo {
+      @apply animate-spin;
+    }
   }
 `