From 00c9dc42364af97318feca03c96e68704b7df23b Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Thu, 8 Feb 2018 10:41:41 -0800
Subject: [PATCH] [fix] setNativeProps can apply flex styles

Updates the 'setValueForStyle' implementation to support style values
that contain "!important". This allows the 'flex{Basis,Grow,Shrink}'
values created by the style resolver to be applied. They currently use
the important priority as a work-around for browser-inconsistencies in
the 'flex' shorthand.

Upstream fix: https://github.com/facebook/react/pull/12181

Ref #798
Close #813
---
 .../src/vendor/setValueForStyles/index.js     | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/react-native-web/src/vendor/setValueForStyles/index.js b/packages/react-native-web/src/vendor/setValueForStyles/index.js
index 146754f4..0901bb8b 100644
--- a/packages/react-native-web/src/vendor/setValueForStyles/index.js
+++ b/packages/react-native-web/src/vendor/setValueForStyles/index.js
@@ -12,6 +12,7 @@
  */
 
 import dangerousStyleValue from '../dangerousStyleValue';
+import hyphenateStyleName from 'hyphenate-style-name';
 import warnValidStyle from '../warnValidStyle';
 
 /**
@@ -20,32 +21,37 @@ import warnValidStyle from '../warnValidStyle';
  *
  * @param {DOMElement} node
  * @param {object} styles
- * @param {ReactDOMComponent} component
  */
-const setValueForStyles = function(node, styles, component) {
-  var style = node.style;
-  for (var styleName in styles) {
+function setValueForStyles(node, styles, getStack) {
+  const style = node.style;
+  for (let styleName in styles) {
     if (!styles.hasOwnProperty(styleName)) {
       continue;
     }
-    var isCustomProperty = styleName.indexOf('--') === 0;
+    const isCustomProperty = styleName.indexOf('--') === 0;
+    const isImportant =
+      typeof styles[styleName] === 'string' && styles[styleName].indexOf('!important') > -1;
     if (process.env.NODE_ENV !== 'production') {
       if (!isCustomProperty) {
-        warnValidStyle(styleName, styles[styleName], component);
+        warnValidStyle(styleName, styles[styleName], getStack);
       }
     }
-    var styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty);
+    const styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty);
     if (styleName === 'float') {
       styleName = 'cssFloat';
     }
-    if (isCustomProperty) {
-      style.setProperty(styleName, styleValue);
-    } else if (styleValue) {
-      style[styleName] = styleValue;
+    if (isCustomProperty || isImportant) {
+      const name = isCustomProperty ? styleName : hyphenateStyleName(styleName);
+      if (isImportant) {
+        const [value, priority] = styleValue.split('!');
+        style.setProperty(name, value, priority);
+      } else {
+        style.setProperty(name, styleValue);
+      }
     } else {
-      style[styleName] = '';
+      style[styleName] = styleValue;
     }
   }
-};
+}
 
 export default setValueForStyles;