diff --git a/src/reactTemplates.js b/src/reactTemplates.js index 3655df4f..447a1fe7 100644 --- 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 new file mode 100644 index 00000000..299b21ef --- /dev/null +++ b/test/data/style-vendor-prefix.rt @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/test/data/style-vendor-prefix.rt.js b/test/data/style-vendor-prefix.rt.js new file mode 100644 index 00000000..9b214aea --- /dev/null +++ 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' + } + })); + }; +}); \ No newline at end of file diff --git a/test/src/rt.valid.spec.js b/test/src/rt.valid.spec.js index 165bfd5d..d858e3ef 100644 --- 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); });