Vendor prefixes style keys (wix-incubator#144)

nippur72 · Jun 6, 2016 · 3b0e355 · 3b0e355
1 parent 3a713c2
commit 3b0e355
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 2 deletions.
diff --git a/src/reactTemplates.js b/src/reactTemplates.js
@@ -230,7 +230,8 @@ function handleStyleProp(val, node, context) {
             const pair = i.split(':');
 
             const value = pair.slice(1).join(':').trim();
-            return _.camelCase(pair[0].trim()) + ' : ' + utils.convertText(node, context, value.trim());
+            const parsedKey = /(^-moz-)|(^-o-)|(^-webkit-)/ig.test(key) ? _.upperFirst(_.camelCase(key)) : _.camelCase(key);
+            return parsedKey + ' : ' + utils.convertText(node, context, value.trim());
         })
         .join(',');
     return `{${styleStr}}`;

diff --git a/test/data/style-vendor-prefix.rt b/test/data/style-vendor-prefix.rt
@@ -0,0 +1,4 @@
+<div>
+    <span style="-moz-transform:2;-ms-transform:2;-o-transform:2;-webkit-transform:2;transform:2"></span>
+    <span style="-Moz-transform:2;-Ms-transform:2;-O-transform:2;-Webkit-transform:2;Transform:2"></span>
+</div>
diff --git a/test/data/style-vendor-prefix.rt.js b/test/data/style-vendor-prefix.rt.js
@@ -0,0 +1,25 @@
+define([
+    'react',
+    'lodash'
+], function (React, _) {
+    'use strict';
+    return function () {
+        return React.createElement('div', {}, React.createElement('span', {
+            'style': {
+                MozTransform: '2',
+                msTransform: '2',
+                OTransform: '2',
+                WebkitTransform: '2',
+                transform: '2'
+            }
+        }), React.createElement('span', {
+            'style': {
+                MozTransform: '2',
+                msTransform: '2',
+                OTransform: '2',
+                WebkitTransform: '2',
+                transform: '2'
+            }
+        }));
+    };
+});
diff --git a/test/src/rt.valid.spec.js b/test/src/rt.valid.spec.js
@@ -29,7 +29,7 @@ module.exports = {
         });
 
         test('conversion test', t => {
-            const files = ['div.rt', 'test.rt', 'repeat.rt', 'repeat-with-index.rt', 'inputs.rt', 'virtual.rt', 'stateless.rt'];
+            const files = ['div.rt', 'test.rt', 'repeat.rt', 'repeat-with-index.rt', 'inputs.rt', 'virtual.rt', 'stateless.rt', 'style-vendor-prefix.rt'];
             testFiles(t, files);
         });