[fix] React Native styles -> React DOM styles

Add 'createReactStyleObject' to transform a React Native style object
into a React DOM-compatible style object. This is also needed to ensure
that 'setNativeProps' works as expected.

package.json

@@ -19,7 +19,7 @@
     "animated": "^0.1.3",
     "babel-runtime": "^6.9.2",
     "fbjs": "^0.8.1",
-    "inline-style-prefix-all": "^2.0.2",
+    "inline-style-prefixer": "^2.0.0",
     "lodash": "^4.13.1",
     "react-dom": "^15.1.0",
     "react-textarea-autosize": "^4.0.2",

src/apis/StyleSheet/StyleSheetRegistry.js

@@ -6,22 +6,16 @@
  * @flow
  */
 
-import prefixAll from 'inline-style-prefix-all'
+import createReactStyleObject from './createReactStyleObject'
 import hyphenate from './hyphenate'
-import expandStyle from './expandStyle'
-import flattenStyle from './flattenStyle'
-import processTransform from './processTransform'
 import { predefinedClassNames } from './predefs'
+import prefixAll from 'inline-style-prefixer/static'
 
 let stylesCache = {}
 let uniqueID = 0
 
 const getCacheKey = (prop, value) => `${prop}:${value}`
 
-const normalizeStyle = (style) => {
-  return processTransform(expandStyle(flattenStyle(style)))
-}
-
 const createCssDeclarations = (style) => {
   return Object.keys(style).map((prop) => {
     const property = hyphenate(prop)
@@ -62,10 +56,10 @@ class StyleSheetRegistry {
       Object.freeze(style)
     }
 
-    const normalizedStyle = normalizeStyle(style)
+    const reactStyleObject = createReactStyleObject(style)
 
-    Object.keys(normalizedStyle).forEach((prop) => {
+    Object.keys(reactStyleObject).forEach((prop) => {
-      const value = normalizedStyle[prop]
+      const value = reactStyleObject[prop]
       const cacheKey = getCacheKey(prop, value)
       const exists = stylesCache[cacheKey] && stylesCache[cacheKey].id
       if (!exists) {
@@ -83,18 +77,18 @@ class StyleSheetRegistry {
 
   static getStyleAsNativeProps(styleSheetObject, canUseCSS = false) {
     const classList = []
-    const normalizedStyle = normalizeStyle(styleSheetObject)
+    const reactStyleObject = createReactStyleObject(styleSheetObject)
     let style = {}
 
-    for (const prop in normalizedStyle) {
+    for (const prop in reactStyleObject) {
-      const value = normalizedStyle[prop]
+      const value = reactStyleObject[prop]
       const cacheKey = getCacheKey(prop, value)
       let selector = stylesCache[cacheKey] && stylesCache[cacheKey].id || predefinedClassNames[cacheKey]
 
       if (selector && canUseCSS) {
         classList.push(selector)
       } else {
-        style[prop] = normalizedStyle[prop]
+        style[prop] = reactStyleObject[prop]
       }
     }
 
@@ -103,7 +97,7 @@ class StyleSheetRegistry {
      * inline-styles. For now, pick the last value and regress browser support
      * for CSS features like flexbox.
      */
-    const finalStyle = Object.keys(prefixAll(style)).reduce((acc, prop) => {
+    const vendorPrefixedStyle = Object.keys(prefixAll(style)).reduce((acc, prop) => {
       const value = style[prop]
       acc[prop] = Array.isArray(value) ? value[value.length - 1] : value
       return acc
@@ -111,7 +105,7 @@ class StyleSheetRegistry {
 
     return {
       className: classList.join(' '),
-      style: finalStyle
+      style: vendorPrefixedStyle
     }
   }
 }

src/apis/StyleSheet/createReactStyleObject.js

@@ -0,0 +1,7 @@
+import expandStyle from './expandStyle'
+import flattenStyle from '../StyleSheet/flattenStyle'
+import processTransform from '../StyleSheet/processTransform'
+
+const createReactStyleObject = (style) => processTransform(expandStyle(flattenStyle(style)))
+
+module.exports = createReactStyleObject

src/apis/UIManager/__tests__/index-test.js

@@ -111,9 +111,9 @@ suite('apis/UIManager', () => {
 
     test('adds new style to existing style', () => {
       const node = createNode({ color: 'red' })
-      const props = { style: { opacity: 0 } }
+      const props = { style: { marginVertical: 0, opacity: 0 } }
       UIManager.updateView(node, props, componentStub)
-      assert.equal(node.getAttribute('style'), 'color: red; opacity: 0;')
+      assert.equal(node.getAttribute('style'), 'color: red; margin-top: 0px; margin-bottom: 0px; opacity: 0;')
     })
 
     test('replaces input and textarea text', () => {

src/apis/UIManager/index.js

@@ -1,6 +1,5 @@
+import createReactStyleObject from '../StyleSheet/createReactStyleObject'
 import CSSPropertyOperations from 'react/lib/CSSPropertyOperations'
-import flattenStyle from '../StyleSheet/flattenStyle'
-import processTransform from '../StyleSheet/processTransform'
 
 const _measureLayout = (node, relativeToNativeNode, callback) => {
   const relativeNode = relativeToNativeNode || node.parentNode
@@ -44,7 +43,7 @@ const UIManager = {
           // convert styles to DOM-styles
           CSSPropertyOperations.setValueForStyles(
             node,
-            processTransform(flattenStyle(value)),
+            createReactStyleObject(value),
             component._reactInternalInstance
           )
           break