feat: better prefixing

* Properly kebab ms prefix

Also added test

* Reworked prefixer to be smarter

Instead of blindly splitting on ';', we can instead return an object from .prefixer() and then use that to build the string.

I think it's cleaner this way.

Closes #206

addon/__tests__/prefixer.test.js

@@ -39,4 +39,19 @@ describe('prefixer', function () {
 		});
 
 	});
+
+	it('doesn\'t kebab values', function() {
+		var nano = createNano();
+		var decl = {
+			'background-image': 'url("data:image/svg+xml;utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' width=\'48\' height=\'36\' viewBox=\'0 0 48 36\' fill=\'rgb(28,28,28)\'%3E%3Crect x=\'16\' y=\'12\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'17\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'22\' width=\'16\' height=\'2\' /%3E%3C/svg>")'
+		};
+
+		nano.putRaw = jest.fn();
+
+		nano.put('.one', decl);
+
+		var result = nano.putRaw.mock.calls[0][0].replace(/ +(?= )/g,'');
+		var expected = '.one{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' width=\'48\' height=\'36\' viewBox=\'0 0 48 36\' fill=\'rgb(28,28,28)\'%3E%3Crect x=\'16\' y=\'12\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'17\' width=\'16\' height=\'2\' /%3E%3Crect x=\'16\' y=\'22\' width=\'16\' height=\'2\' /%3E%3C/svg>");}';
+		expect(result).toEqual(expected);
+	});
 });

addon/prefixer.js

@@ -20,7 +20,7 @@ exports.addon = function (renderer) {
         obj[renderer.camel(prop)] = value;
         obj = prefixAll(obj);
 
-        var str = '';
+        var result = {};
 
         for (var propPrefixed in obj) {
             value = obj[propPrefixed];
@@ -30,35 +30,24 @@ exports.addon = function (renderer) {
             propPrefixed = renderer.kebab(propPrefixed);
 
             if (value instanceof Array) {
-                str += propPrefixed + ':' + value.join(';' + propPrefixed + ':') + ';';
+                result[propPrefixed] = value.join(';' + propPrefixed + ':');
             } else {
-                str += propPrefixed + ':' + value + ';';
+                result[propPrefixed] =  value;
             }
         }
 
-        return str;
+        return result;
     };
 
     renderer.decl = function (prop, value) {
-        var str = decl(prop, value);
-        var declarations = str.split(';');
+        var result = renderer.prefix(prop, value);
 
-        if (!declarations.length) {
-            return str;
-        }
-
-        var prefixed = '';
-
-        for (var i = 0; i < declarations.length; i++) {
-            var declaration = declarations[i];
-
-            if (declaration) {
-                var pos = declaration.indexOf(':');
-
-                prefixed += renderer.prefix(declaration.substr(0, pos), declaration.substr(pos + 1));
-            }
-        }
+        var returned = '';
+        Object.keys(result).forEach(function(key) {
+            var str = decl(key, value);
+            returned += str;
+        });
 
-        return prefixed;
+        return returned;
     };
 };