From e88e47d20315061874f1b02843b72a2ac7a3709e Mon Sep 17 00:00:00 2001
From: Brandon Dail <aweary@users.noreply.github.com>
Date: Thu, 20 Apr 2017 15:25:39 -0500
Subject: [PATCH] Use setProperty when setting style properties (#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  |  8 +++++++-
 .../shared/__tests__/CSSPropertyOperations-test.js | 14 ++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/renderers/dom/shared/CSSPropertyOperations.js b/src/renderers/dom/shared/CSSPropertyOperations.js
index 492e2124b2d1f..2bc2ae1745674 100644
--- a/src/renderers/dom/shared/CSSPropertyOperations.js
+++ b/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 =
diff --git a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
index 45343416e762f..e383549ec51ad 100644
--- a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
+++ b/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);
+  });
 });