From 42bc28bbfd483942edd6a32a5838865812080f36 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
---
 scripts/fiber/tests-passing.txt                    |  1 +
 src/renderers/dom/shared/CSSPropertyOperations.js  |  8 +++++++-
 .../shared/__tests__/CSSPropertyOperations-test.js | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt
index ce89056ddc2d..470fee62074a 100644
--- a/scripts/fiber/tests-passing.txt
+++ b/scripts/fiber/tests-passing.txt
@@ -776,6 +776,7 @@ src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
 * warns when miscapitalizing vendored style names
 * should warn about style having a trailing semicolon
 * should warn about style containing a NaN value
+* should not warn when setting CSS variables
 
 src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js
 * should create markup for simple properties
diff --git a/src/renderers/dom/shared/CSSPropertyOperations.js b/src/renderers/dom/shared/CSSPropertyOperations.js
index 35e1be90a1c7..aced2e1aaa85 100644
--- a/src/renderers/dom/shared/CSSPropertyOperations.js
+++ b/src/renderers/dom/shared/CSSPropertyOperations.js
@@ -134,6 +134,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;
@@ -213,7 +217,9 @@ var CSSPropertyOperations = {
       if (styleName === 'float') {
         styleName = 'cssFloat';
       }
-      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 f1d9c567bfad..34469835dbec 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', () => {
         '\n\nCheck 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);
+
+    expectDev(console.error.calls.count()).toBe(0);
+  });
 });