feat: @Keyframes support

Author: navix

README.md

@@ -231,15 +231,25 @@ TBD
 
 TBD
 
-### Raw Styles
-
-Add styles to the global scope by defining selector:
+### @keyframes
 
 ```typescript
-constructor(private stylerService: StylerService) {
-  this.stylerService.setRaw('body', {
-    background: '#222222',
-    color: '#eeeeee',
+constructor(private styler: StylerComponent,
+            private stylerService: StylerService) {
+  this.styler.register({
+    host: {
+      animationDuration: '1s',
+      animationName: this.stylerService.keyframes({
+        '0%': {
+          transform: 'rotate(0deg)',
+        },
+        '100%': {
+          transform: 'rotate(360deg)',
+        },
+      }),
+      animationTimingFunction: 'linear',
+      animationIterationCount: 'infinite',
+    },
   });
 }
 ```

package/src/compiler/compiler.service.ts

@@ -1,5 +1,6 @@
+import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable } from '@angular/core';
-import { DOCUMENT, ɵSharedStylesHost as SharedStylesHost } from '@angular/platform-browser';
+import { ɵSharedStylesHost as SharedStylesHost } from '@angular/platform-browser';
 import { processAutoPx } from '../helpers/process-auto-px';
 import { autoPx } from '../meta/compiler';
 import { StylerHashService } from '../meta/hash';
@@ -184,4 +185,15 @@ export class StylerCompilerService {
     // update hash in unit
     unit.hash.next(newHash);
   }
+
+  addKeyframes(def: any): string {
+    let css = '';
+    for (const key in def) {
+      css += `${key}{${this.compileProps(def[key])}}`
+    }
+    const selector = `kf-${this.hash.hash(css)}`;
+    // @todo impr performace by hash-caching
+    this.sharedStylesHost.addStyles([`@keyframes ${selector}{${css}}`]);
+    return selector;
+  }
 }

package/src/styler.service.ts

@@ -24,4 +24,8 @@ export class StylerService {
     });
     this.compiler.render();
   }
+
+  keyframes(def: any): string {
+    return this.compiler.addKeyframes(def);
+  }
 }