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
Brandon Dail committed
Apr 20, 2017 at 15:25 UTC
42bc28bbfd483942edd6a32a5838865812080f36
3 files changed
+22
-1
scripts/fiber/tests-passing.txt
+1
@@ -776,6 +776,7 @@ src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
776
* warns when miscapitalizing vendored style names
777
* should warn about style having a trailing semicolon
778
* should warn about style containing a NaN value
779
+* should not warn when setting CSS variables
780
781
src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js
782
* should create markup for simple properties
src/renderers/dom/shared/CSSPropertyOperations.js
+7
-1
@@ -134,6 +134,10 @@ if (__DEV__) {
134
* @param {ReactDOMComponent} component
135
*/
136
var warnValidStyle = function(name, value, component) {
137
+ // Don't warn for CSS variables
138
+ if (name.indexOf('--') === 0) {
139
+ return;
140
+ }
141
var owner;
142
if (component) {
143
owner = component._currentElement._owner;
@@ -213,7 +217,9 @@ var CSSPropertyOperations = {
217
if (styleName === 'float') {
218
styleName = 'cssFloat';
219
}
216
- if (styleValue) {
220
+ if (styleName.indexOf('--') === 0) {
221
+ style.setProperty(styleName, styleValue);
222
+ } else if (styleValue) {
223
style[styleName] = styleValue;
224
} else {
225
var expansion =
src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
+14
@@ -253,4 +253,18 @@ describe('CSSPropertyOperations', () => {
253
'\n\nCheck the render method of `Comp`.',
254
);
255
});
256
+
257
+ it('should not warn when setting CSS variables', () => {
258
+ class Comp extends React.Component {
259
+ render() {
260
+ return <div style={{'--foo-primary': 'red', backgroundColor: 'red'}} />;
261
+ }
262
+ }
263
+
264
+ spyOn(console, 'error');
265
+ var root = document.createElement('div');
266
+ ReactDOM.render(<Comp />, root);
267
+
268
+ expectDev(console.error.calls.count()).toBe(0);
269
+ });
270
});