From 22f45e350b900bc8256c107d7bfa9372c565987b Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Wed, 22 Jun 2016 16:13:48 -0700
Subject: [PATCH] [fix] React@15: remove inline-style fallback values

React 15 has no way to handle fallback CSS values (for example, vendor
prefixed 'display:flex' values) in inline styles. This patch drops all
fallback values for inline styles at the cost of regressing browser
support (those without standard flexbox support will not layout React
Native components correctly).

Fix #131
---
 package.json                              |  2 +-
 src/apis/Dimensions/index.js              |  2 +-
 src/apis/StyleSheet/StyleSheetRegistry.js | 22 ++++++++++++++++++++--
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index f98bfb37..f09f87d4 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   "dependencies": {
     "babel-runtime": "^6.9.2",
     "fbjs": "^0.8.1",
-    "inline-style-prefix-all": "1.0.5",
+    "inline-style-prefix-all": "^2.0.2",
     "lodash": "^4.13.1",
     "react-textarea-autosize": "^4.0.2",
     "react-timer-mixin": "^0.13.3"
diff --git a/src/apis/Dimensions/index.js b/src/apis/Dimensions/index.js
index 6105011d..430e3ad2 100644
--- a/src/apis/Dimensions/index.js
+++ b/src/apis/Dimensions/index.js
@@ -6,7 +6,7 @@
  * @flow
  */
 
-import debounce from 'lodash.debounce'
+import debounce from 'lodash/debounce'
 import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
 import invariant from 'fbjs/lib/invariant'
 
diff --git a/src/apis/StyleSheet/StyleSheetRegistry.js b/src/apis/StyleSheet/StyleSheetRegistry.js
index 97b01d87..b6ebe04c 100644
--- a/src/apis/StyleSheet/StyleSheetRegistry.js
+++ b/src/apis/StyleSheet/StyleSheetRegistry.js
@@ -26,7 +26,14 @@ const createCssDeclarations = (style) => {
   return Object.keys(style).map((prop) => {
     const property = hyphenate(prop)
     const value = style[prop]
-    return `${property}:${value};`
+    if (Array.isArray(value)) {
+      return value.reduce((acc, curr) => {
+        acc += `${property}:${curr};`
+        return acc
+      }, '')
+    } else {
+      return `${property}:${value};`
+    }
   }).sort().join('')
 }
 
@@ -91,9 +98,20 @@ class StyleSheetRegistry {
       }
     }
 
+    /**
+     * React 15 removed undocumented support for fallback values in
+     * 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 value = style[prop]
+      acc[prop] = Array.isArray(value) ? value[value.length - 1] : value
+      return acc
+    }, {})
+
     return {
       className: classList.join(' '),
-      style: prefixAll(style)
+      style: finalStyle
     }
   }
 }