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
facebook · Apr 20, 2017 · 42bc28b · 42bc28b
1 parent 4129074
commit 42bc28b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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);
+  });
 });