From 25f96ba8ae146a6f258f8ead596bc37f0cce260e Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 22 Feb 2016 13:49:49 -0800
Subject: [PATCH] [fix] StyleSheet prefixing on client and server

A small error from referencing the wrong value caused prefixed values to
be dropped. The patch also updated inline-style-prefixer and turns all
vendor prefixes on by default. This provides the option to drop all the
caniuse and bowser data that inline-style-prefixer uses (probably by
forking the project and removing those dependencies).

Fix #51
---
 package.json                              |  2 +-
 src/apis/StyleSheet/ColorPropType.js      | 61 ++++++++++++++++++++++-
 src/apis/StyleSheet/Store.js              |  3 +-
 src/apis/StyleSheet/StyleSheetRegistry.js |  2 +-
 src/apis/StyleSheet/prefixer.js           |  2 +-
 5 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 68074858..918a7703 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "exenv": "^1.2.0",
-    "inline-style-prefixer": "^0.5.3",
     "invariant": "^2.2.0",
+    "inline-style-prefixer": "^0.6.7",
     "lodash.debounce": "^3.1.1",
     "react-tappable": "^0.7.1",
     "react-textarea-autosize": "^3.1.0"
diff --git a/src/apis/StyleSheet/ColorPropType.js b/src/apis/StyleSheet/ColorPropType.js
index 9cbe37dc..adc7e326 100644
--- a/src/apis/StyleSheet/ColorPropType.js
+++ b/src/apis/StyleSheet/ColorPropType.js
@@ -1,5 +1,62 @@
-import { PropTypes } from 'react'
+/* eslint-disable */
+ /**
+  * Copyright (c) 2015-present, Facebook, Inc.
+  * All rights reserved.
+  *
+  * This source code is licensed under the BSD-style license found in the
+  * LICENSE file in the root directory of this source tree. An additional grant
+  * of patent rights can be found in the PATENTS file in the same directory.
+  *
+  * @providesModule ColorPropType
+  */
 
-const ColorPropType = PropTypes.string
+import { PropTypes } from 'react'
+import ReactPropTypeLocationNames from 'react/lib/ReactPropTypeLocationNames'
+
+var normalizeColor = require('./normalizeColor');
+
+var colorPropType = function(isRequired, props, propName, componentName, location, propFullName) {
+  var color = props[propName];
+  if (color === undefined || color === null) {
+    if (isRequired) {
+      var locationName = ReactPropTypeLocationNames[location];
+      return new Error(
+        'Required ' + locationName + ' `' + (propFullName || propName) +
+        '` was not specified in `' + componentName + '`.'
+      );
+    }
+    return;
+  }
+
+  if (typeof color === 'number') {
+    // Developers should not use a number, but we are using the prop type
+    // both for user provided colors and for transformed ones. This isn't ideal
+    // and should be fixed but will do for now...
+    return;
+  }
+
+  if (normalizeColor(color) === null) {
+    var locationName = ReactPropTypeLocationNames[location];
+    return new Error(
+      'Invalid ' + locationName + ' `' + (propFullName || propName) +
+      '` supplied to `' + componentName + '`: ' + color + '\n' +
+`Valid color formats are
+  - '#f0f' (#rgb)
+  - '#f0fc' (#rgba)
+  - '#ff00ff' (#rrggbb)
+  - '#ff00ff00' (#rrggbbaa)
+  - 'rgb(255, 255, 255)'
+  - 'rgba(255, 255, 255, 1.0)'
+  - 'hsl(360, 100%, 100%)'
+  - 'hsla(360, 100%, 100%, 1.0)'
+  - 'transparent'
+  - 'red'
+  - 0xff00ff00 (0xrrggbbaa)
+`);
+  }
+};
+
+var ColorPropType = colorPropType.bind(null, false /* isRequired */);
+ColorPropType.isRequired = colorPropType.bind(null, true /* isRequired */);
 
 export default ColorPropType
diff --git a/src/apis/StyleSheet/Store.js b/src/apis/StyleSheet/Store.js
index 01353ec2..02bcc60f 100644
--- a/src/apis/StyleSheet/Store.js
+++ b/src/apis/StyleSheet/Store.js
@@ -46,8 +46,9 @@ export default class Store {
     // transform the declarations into CSS rules with vendor-prefixes
     const buildCSSRules = (property, values) => {
       return values.reduce((cssRules, value) => {
-        const declarations = prefixer.prefix({ [property]: value })
+        const declarations = prefixer({ [property]: value })
         const cssDeclarations = Object.keys(declarations).reduce((str, prop) => {
+          const value = declarations[prop]
           str += `${hyphenate(prop)}:${value};`
           return str
         }, '')
diff --git a/src/apis/StyleSheet/StyleSheetRegistry.js b/src/apis/StyleSheet/StyleSheetRegistry.js
index 87275546..4c6df605 100644
--- a/src/apis/StyleSheet/StyleSheetRegistry.js
+++ b/src/apis/StyleSheet/StyleSheetRegistry.js
@@ -39,7 +39,7 @@ export default class StyleSheetRegistry {
     }
 
     _className = classList.join(' ')
-    _style = prefixer.prefix(_style)
+    _style = prefixer(_style)
 
     return { className: _className, style: _style }
   }
diff --git a/src/apis/StyleSheet/prefixer.js b/src/apis/StyleSheet/prefixer.js
index 4292d803..7868d92d 100644
--- a/src/apis/StyleSheet/prefixer.js
+++ b/src/apis/StyleSheet/prefixer.js
@@ -1,3 +1,3 @@
 import Prefixer from 'inline-style-prefixer'
-const prefixer = new Prefixer()
+const prefixer = Prefixer.prefixAll
 export default prefixer