fix: keyframes on native mode

Author: micantoine

example/webpack/components/Time.svelte

@@ -1,6 +1,9 @@
 <script>
   import { onDestroy } from 'svelte';
 
+  let className;
+  export { className as class };
+
   let date = new Date();
   const active = true;
   $: time = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
@@ -12,7 +15,7 @@
   })
 </script>
 
-<style module>
+<style module="mixed">
   :local(div) {
     text-align: right;
     font-size: 1.2rem;
@@ -47,8 +50,28 @@
   :global(div) :local(p > strong) { font-weight: 600; }
 
   :local(div) *.bold { font-size: 12px;}
+
+  .btn {
+    float:right;
+		animation: opacity 4s infinite alternate;
+	}
+
+  @media screen {
+    .btn {
+      color: red;
+    }
+  }
+
+	@keyframes opacity {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
 </style>
 <div
-  class=" bolder light { true ? 'lighter red' : ''}"
+  class="btn bolder light { true ? 'lighter red' : ''}"
   class:bold={true}
 >{time}</div>

src/processors/native.ts

@@ -41,6 +41,12 @@ const parser = (processor: Processor): void => {
       if (node.type === 'Script' || node.type === 'Fragment') {
         this.skip();
       }
+
+      if (node.type === 'Atrule' && node.name === 'keyframes') {
+        processor.parseKeyframes(node);
+        this.skip();
+      }
+
       if (node.type === 'Selector') {
         let start = 0;
         let end = 0;
@@ -70,11 +76,11 @@ const parser = (processor: Processor): void => {
             }
           });
         }
-
-        processor.parsePseudoLocalSelectors(node);
       }
 
       processor.parseBoundVariables(node);
+      processor.parsePseudoLocalSelectors(node);
+      processor.storeAnimationProperties(node);
 
       if (node.type === 'ClassSelector') {
         const generatedClassName = processor.createModuleClassname(node.name);
@@ -84,6 +90,8 @@ const parser = (processor: Processor): void => {
     },
   });
 
+  processor.overwriteAnimationProperties();
+
   selectorBoundaries.forEach((boundary) => {
     processor.magicContent.appendLeft(boundary.start, ':global(');
     processor.magicContent.appendRight(boundary.end, ')');