From 1819a146548f13ddeb0c7c57194debed3ae5cbea Mon Sep 17 00:00:00 2001
From: Nathan <nathankerr@gmail.com>
Date: Tue, 18 Sep 2018 00:02:01 -0700
Subject: [PATCH] fix: improve kebab case conversion

* Properly kebab ms prefix

Also added test

* Trying to support virtual keyframes

It kinda works but I'm not sure how to generate the CSS from the object correctly.

* Formatted

* Use the correct renderer method to render keyframes.
---
 addon/__tests__/virtual.test.js | 29 +++++++++++++++++++++++++++++
 addon/virtual.js                |  5 +++++
 2 files changed, 34 insertions(+)

diff --git a/addon/__tests__/virtual.test.js b/addon/__tests__/virtual.test.js
index b20ee316..2685ae25 100644
--- a/addon/__tests__/virtual.test.js
+++ b/addon/__tests__/virtual.test.js
@@ -5,6 +5,7 @@ var env = require('./env');
 var create = require('../../index').create;
 var addonRule = require('../../addon/rule').addon;
 var addonVirtual = require('../../addon/virtual').addon;
+var addonKeyframes = require('../../addon/keyframes').addon;
 
 function createNano (config) {
     var nano = create(config);
@@ -192,5 +193,33 @@ describe('virtual', function () {
             expect(nano.atomic).toHaveBeenCalledTimes(1);
             expect(nano.atomic).toHaveBeenCalledWith('&', 'color:blue', undefined);
         });
+
+	    it('doesn\'t break keyframes', function() {
+		    var nano = createNano();
+            addonKeyframes(nano);
+
+		    nano.virtual('&', {
+			    animation: 'sk-foldCubeAngle 2.4s infinite linear both',
+			    '@keyframes sk-foldCubeAngle': {
+				    '0%, 10%': {
+					    transform: 'perspective(140px) rotateX(-180deg)',
+					    opacity: 0
+				    },
+				    '25%, 75%': {
+					    transform: 'perspective(140px) rotateX(0deg)',
+					    opacity: 1
+				    },
+				    '90%, 100%': {
+					    transform: 'perspective(140px) rotateY(180deg)',
+					    opacity: 0
+				    }
+			    }
+		    });
+
+		    if (env.isServer) {
+			    expect(nano.raw).toEqual('._a{animation:sk-foldCubeAngle 2.4s infinite linear both}@-webkit-keyframes sk-foldCubeAngle{0%, 10%{transform:perspective(140px) rotateX(-180deg);opacity:0;}25%, 75%{transform:perspective(140px) rotateX(0deg);opacity:1;}90%, 100%{transform:perspective(140px) rotateY(180deg);opacity:0;}}@-moz-keyframes sk-foldCubeAngle{0%, 10%{transform:perspective(140px) rotateX(-180deg);opacity:0;}25%, 75%{transform:perspective(140px) rotateX(0deg);opacity:1;}90%, 100%{transform:perspective(140px) rotateY(180deg);opacity:0;}}@-o-keyframes sk-foldCubeAngle{0%, 10%{transform:perspective(140px) rotateX(-180deg);opacity:0;}25%, 75%{transform:perspective(140px) rotateX(0deg);opacity:1;}90%, 100%{transform:perspective(140px) rotateY(180deg);opacity:0;}}@keyframes sk-foldCubeAngle{0%, 10%{transform:perspective(140px) rotateX(-180deg);opacity:0;}25%, 75%{transform:perspective(140px) rotateX(0deg);opacity:1;}90%, 100%{transform:perspective(140px) rotateY(180deg);opacity:0;}}');
+
+		    }
+	    });
     });
 });
diff --git a/addon/virtual.js b/addon/virtual.js
index 267b519a..2271d8f5 100644
--- a/addon/virtual.js
+++ b/addon/virtual.js
@@ -76,6 +76,11 @@ exports.addon = function (renderer) {
         for (var prop in decls) {
             var value = decls[prop];
 
+            if (prop.indexOf('keyframes') > -1) {
+                renderer.putAt('', value, prop);
+                continue;
+            }
+
             if ((value instanceof Object) && !(value instanceof Array)) {
                 if (prop[0] === '@') {
                     classNames += renderer.virtual(selectorTemplate, value, prop);