From 7ef8f424919fd0f3fda73cf2084bba4328f3872c Mon Sep 17 00:00:00 2001 From: Brandon Dail Date: Thu, 30 Mar 2017 19:46:10 -0500 Subject: [PATCH 1/5] Use setProperty when setting style properties setProperty is faster in all/most modern browsers. It also lets us support CSS variables. --- src/renderers/dom/shared/CSSPropertyOperations.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/renderers/dom/shared/CSSPropertyOperations.js b/src/renderers/dom/shared/CSSPropertyOperations.js index a7a70ed89537..b36d08281d24 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,8 +217,9 @@ var CSSPropertyOperations = { if (styleName === 'float') { styleName = 'cssFloat'; } + var hyphenatedStyleName = processStyleName(styleName); if (styleValue) { - style[styleName] = styleValue; + style.setProperty(hyphenatedStyleName, styleValue); } else { var expansion = hasShorthandPropertyBug && CSSProperty.shorthandPropertyExpansions[styleName]; @@ -225,7 +230,7 @@ var CSSPropertyOperations = { style[individualStyleName] = ''; } } else { - style[styleName] = ''; + style.setProperty(hyphenatedStyleName, ''); } } } From f84597afa8db8ff3e3d456db73b88530a527810b Mon Sep 17 00:00:00 2001 From: Brandon Dail Date: Sun, 9 Apr 2017 14:14:43 -0500 Subject: [PATCH 2/5] Only use setProperty when setting CSS variables --- src/renderers/dom/shared/CSSPropertyOperations.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/renderers/dom/shared/CSSPropertyOperations.js b/src/renderers/dom/shared/CSSPropertyOperations.js index b36d08281d24..954be43910f3 100644 --- a/src/renderers/dom/shared/CSSPropertyOperations.js +++ b/src/renderers/dom/shared/CSSPropertyOperations.js @@ -217,9 +217,10 @@ var CSSPropertyOperations = { if (styleName === 'float') { styleName = 'cssFloat'; } - var hyphenatedStyleName = processStyleName(styleName); - if (styleValue) { - style.setProperty(hyphenatedStyleName, styleValue); + if (styleName.indexOf('--') === 0) { + style.setProperty(styleName, styleValue); + } else if (styleValue) { + style[styleName] = styleValue; } else { var expansion = hasShorthandPropertyBug && CSSProperty.shorthandPropertyExpansions[styleName]; @@ -230,7 +231,7 @@ var CSSPropertyOperations = { style[individualStyleName] = ''; } } else { - style.setProperty(hyphenatedStyleName, ''); + style[styleName] = ''; } } } From a5669c76493ebdae782ce22e8461b6d6d3e5ebc2 Mon Sep 17 00:00:00 2001 From: Brandon Dail Date: Sun, 9 Apr 2017 14:45:11 -0500 Subject: [PATCH 3/5] Add test to ensure setting CSS variables do not warn --- .../shared/__tests__/CSSPropertyOperations-test.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js index f1d9c567bfad..692649301cb2 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
; + } + } + + spyOn(console, 'error'); + var root = document.createElement('div'); + ReactDOM.render(, root); + + expectDev(console.error.calls.count()).toBe(0); + }); }); From 5bce45e13163cd4565c2006c9ced12d6ecac839b Mon Sep 17 00:00:00 2001 From: Brandon Dail Date: Sun, 9 Apr 2017 16:25:52 -0500 Subject: [PATCH 4/5] Make this PR pretty again --- .../dom/shared/__tests__/CSSPropertyOperations-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js index 692649301cb2..34469835dbec 100644 --- a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js +++ b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js @@ -257,7 +257,7 @@ describe('CSSPropertyOperations', () => { it('should not warn when setting CSS variables', () => { class Comp extends React.Component { render() { - return
; + return
; } } From 070e03637b058af1a8d54e039b43be8608ae8efe Mon Sep 17 00:00:00 2001 From: Brandon Dail Date: Mon, 10 Apr 2017 09:20:40 -0500 Subject: [PATCH 5/5] Run fiber test script --- scripts/fiber/tests-passing.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt index 0c658781d646..393fd2e8a94f 100644 --- a/scripts/fiber/tests-passing.txt +++ b/scripts/fiber/tests-passing.txt @@ -816,6 +816,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