Use setProperty when setting style properties (facebook#9302)

* Use setProperty when setting style properties

setProperty is faster in all/most modern browsers. It also lets us support CSS variables.

* Only use setProperty when setting CSS variables

* Add test to ensure setting CSS variables do not warn

* Make this PR pretty again

* Run fiber test script

src/renderers/dom/shared/CSSPropertyOperations.js

@@ -128,6 +128,10 @@ if (__DEV__) {
    * @param {ReactDOMComponent} component
    */
   var warnValidStyle = function(name, value, component) {
+    // Don't warn for CSS variables
+    if (name.indexOf('--') === 0) {
+      return;
+    }
     var owner;
     if (component) {
       owner = component._currentElement._owner;
@@ -215,7 +219,9 @@ var CSSPropertyOperations = {
       if (styleName === 'float' || styleName === 'cssFloat') {
         styleName = styleFloatAccessor;
       }
-      if (styleValue) {
+      if (styleName.indexOf('--') === 0) {
+        style.setProperty(styleName, styleValue);
+      } else if (styleValue) {
         style[styleName] = styleValue;
       } else {
         var expansion =

src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js

@@ -253,4 +253,18 @@ describe('CSSPropertyOperations', () => {
         'Check the render method of `Comp`.',
     );
   });
+
+  it('should not warn when setting CSS variables', () => {
+    class Comp extends React.Component {
+      render() {
+        return <div style={{'--foo-primary': 'red', backgroundColor: 'red'}} />;
+      }
+    }
+
+    spyOn(console, 'error');
+    var root = document.createElement('div');
+    ReactDOM.render(<Comp />, root);
+
+    expect(console.error.calls.count()).toBe(0);
+  });
 });