fix: support array-as-value after prefixing

streamich · Mar 18, 2018 · 5197e66 · 5197e66
1 parent 005dd68
commit 5197e66
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/.storybook/inline-style-prefixer.stories.js b/.storybook/inline-style-prefixer.stories.js
@@ -12,10 +12,13 @@ addonPrefixer(renderer);
 const {rule} = renderer;
 
 const className1 = rule({
-    alignItems: 'center'
+    display: 'flex',
+    alignItems: 'center',
+    boxShadow: '0 0 5px red',
+    'text-shadow': '2px 2px #ff0000',
 });
 
 storiesOf('Addons/inline-style-prefixer', module)
-  .add('Default', () =>
-    h('div', {className: className1}, 'Hello world')
-  )
+    .add('Default', () =>
+        h('div', {className: className1}, 'Hello world')
+    )
diff --git a/addon/inline-style-prefixer.js b/addon/inline-style-prefixer.js
@@ -11,19 +11,26 @@ var matchCallback = function (match) {
 exports.addon = function (renderer) {
     var decl = renderer.decl;
 
-    renderer.toCamel = function (prop) {
+    renderer.camel = function (prop) {
         return prop.replace(CAMEL_REGEX, matchCallback);
     };
 
     renderer.prefix = function (prop, value) {
         var obj = {};
-        obj[renderer.toCamel(prop)] = value;
+        obj[renderer.camel(prop)] = value;
         obj = prefixAll(obj);
 
         var str = '';
 
         for (var propPrefixed in obj) {
-            str += propPrefixed + ':' + obj[propPrefixed] + ';';
+            value = obj[propPrefixed];
+            propPrefixed = renderer.kebab(propPrefixed);
+
+            if (value instanceof Array) {
+                str += propPrefixed + ':' + value.join(';' + propPrefixed + ':') + ';';
+            } else {
+                str += propPrefixed + ':' + value + ';';
+            }
         }
 
         return str;

diff --git a/index.js b/index.js
@@ -20,11 +20,11 @@ exports.create = function (config) {
         client: typeof window === 'object',
         assign: assign,
         stringify: JSON.stringify,
-        toKebab: function (prop) {
+        kebab: function (prop) {
             return prop.replace(KEBAB_REGEX, '-$&').toLowerCase();
         },
         decl: function (key, value) {
-            key = renderer.toKebab(key);
+            key = renderer.kebab(key);
             return key + ':' + value + ';';
         },
         hash: function (obj) {