[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

@@ -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"

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

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
         }, '')

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 }
   }

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