fix: @Keyframes can be anywhere

Not doing this for @values/composes because it'd slow things down, have to though for @Keyframes unless we want to build a very-complex animation declaration parser.

packages/processor/plugins/scoping.js

@@ -99,6 +99,27 @@ module.exports = () => ({
         });
 
         return {
+            Root(root) {
+                // Scope @keyframes so they don't leak globally
+                // Has to be done via .walk() API so that it happens before
+                // animation declarations are parsed, otherwise we don't know
+                // which part to update w/o building a smarter parser
+                root.walkAtRules(identifiers.keyframes, (rule) => {
+                    if(isStamped(rule)) {
+                        return;
+                    }
+
+                    // Save closure ref to this rule
+                    current = rule;
+
+                    lookup = keyframes;
+
+                    rule.params = parser.processSync(rule.params);
+
+                    stamp(rule);
+                });
+            },
+
             // Walk all rules and save off rewritten selectors
             Rule(rule) {
                 // Don't re-scope rules
@@ -121,21 +142,21 @@ module.exports = () => ({
             },
 
             // Also scope @keyframes rules so they don't leak globally
-            AtRule(rule) {
-                // Don't re-scope rules, and only care about @keyframes or prefixed variations
-                if(!identifiers.keyframes.test(rule.name) || isStamped(rule)) {
-                    return;
-                }
-
-                // Save closure ref to this rule
-                current = rule;
+            // AtRule(rule) {
+            //     // Don't re-scope rules, and only care about @keyframes or prefixed variations
+            //     if(!identifiers.keyframes.test(rule.name) || isStamped(rule)) {
+            //         return;
+            //     }
+
+            //     // Save closure ref to this rule
+            //     current = rule;
 
-                lookup = keyframes;
+            //     lookup = keyframes;
 
-                rule.params = parser.processSync(rule.params);
+            //     rule.params = parser.processSync(rule.params);
 
-                stamp(rule);
-            },
+            //     stamp(rule);
+            // },
 
             Declaration(decl) {
                 if(!identifiers.animations.test(decl.prop) || isStamped(decl)) {

packages/processor/test/__snapshots__/scoping.test.js.snap

@@ -94,27 +94,33 @@ exports[`/processor.js scoping should scope classes, ids, and keyframes 2`] = `
 }"
 `;
 
+exports[`/processor.js scoping should update animation declarations 1`] = `
+"/* animation.css */
+@keyframes mc_a {}
+.mc_b { animation: mc_a; }"
+`;
+
+exports[`/processor.js scoping should update animation-name declarations 1`] = `
+"/* animation-name.css */
+@keyframes mc_a {}
+.mc_b { animation-name: mc_a; }"
+`;
+
+exports[`/processor.js scoping should update animation-name declarations when @keyframes come after 1`] = `
+"/* animation-name.css */
+.mc_b { animation-name: mc_a; }
+@keyframes mc_a {}"
+`;
+
 exports[`/processor.js scoping should update multiple animations properly 1`] = `
 "/* multiple-animations.css */
 @keyframes mc_a {}
 @keyframes mc_b {}
 .mc_c { animation: mc_a 10s linear, mc_b 0.2s infinite; }"
 `;
 
-exports[`/processor.js scoping should update scoped animations from the scoping plugin's message 1`] = `
-"/* animation.css */
-@keyframes mc_a {}
-.mc_b { animation: mc_a; }"
-`;
-
-exports[`/processor.js scoping should update scoped prefixed animations from the scoping plugin's message 1`] = `
+exports[`/processor.js scoping should update prefixed @keyframes 1`] = `
 "/* prefixed-animations.css */
 @-webkit-keyframes mc_a {}
 .mc_b { animation: mc_a; }"
 `;
-
-exports[`/processor.js scoping should update the animation-name property 1`] = `
-"/* animation-name.css */
-@keyframes mc_a {}
-.mc_b { animation-name: mc_a; }"
-`;

packages/processor/test/scoping.test.js

@@ -149,7 +149,7 @@ describe("/processor.js", () => {
             expect(css).toMatchSnapshot();
         });
 
-        it("should update scoped animations from the scoping plugin's message", async () => {
+        it("should update animation declarations", async () => {
             await processor.string("./animation.css", dedent(`
                 @keyframes a {}
                 .b { animation: a; }
@@ -160,7 +160,7 @@ describe("/processor.js", () => {
             expect(css).toMatchSnapshot();
         });
 
-        it("should update the animation-name property", async () => {
+        it("should update animation-name declarations", async () => {
             await processor.string("./animation-name.css", dedent(`
                 @keyframes a {}
                 .b { animation-name: a; }
@@ -184,7 +184,7 @@ describe("/processor.js", () => {
             expect(css).toMatchSnapshot();
         });
 
-        it("should update scoped prefixed animations from the scoping plugin's message", async () => {
+        it("should update prefixed @keyframes", async () => {
             await processor.string("./prefixed-animations.css", dedent(`
                 @-webkit-keyframes a {}
                 .b { animation: a; }
@@ -194,5 +194,16 @@ describe("/processor.js", () => {
 
             expect(css).toMatchSnapshot();
         });
+
+        it("should update animation-name declarations when @keyframes come after", async () => {
+            await processor.string("./animation-name.css", dedent(`
+                .b { animation-name: a; }
+                @keyframes a {}
+            `));
+
+            const { css } = await processor.output();
+
+            expect(css).toMatchSnapshot();
+        });
     });
 });