added component name to css property warnings
Edvin Erikson committed
Mar 11, 2016 at 01:27 UTC
72f33ce8923ae70a845ce300f8ef0e3ab21d7724
3 files changed
+119
-58
src/renderers/dom/shared/CSSPropertyOperations.js
+38
-18
@@ -52,7 +52,7 @@ if (__DEV__) {
52
var warnedStyleValues = {};
53
var warnedForNaNValue = false;
54
55
- var warnHyphenatedStyleName = function(name) {
55
+ var warnHyphenatedStyleName = function(name, owner) {
56
if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
57
return;
58
}
@@ -60,13 +60,14 @@ if (__DEV__) {
60
warnedStyleNames[name] = true;
61
warning(
62
false,
63
- 'Unsupported style property %s. Did you mean %s?',
63
+ 'Unsupported style property %s. Did you mean %s?%s',
64
name,
65
- camelizeStyleName(name)
65
+ camelizeStyleName(name),
66
+ checkRenderMessage(owner)
67
);
68
};
69
69
- var warnBadVendoredStyleName = function(name) {
70
+ var warnBadVendoredStyleName = function(name, owner) {
71
if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
72
return;
73
}
@@ -74,13 +75,14 @@ if (__DEV__) {
75
warnedStyleNames[name] = true;
76
warning(
77
false,
77
- 'Unsupported vendor-prefixed style property %s. Did you mean %s?',
78
+ 'Unsupported vendor-prefixed style property %s. Did you mean %s?%s',
79
name,
79
- name.charAt(0).toUpperCase() + name.slice(1)
80
+ name.charAt(0).toUpperCase() + name.slice(1),
81
+ checkRenderMessage(owner)
82
);
83
};
84
83
- var warnStyleValueWithSemicolon = function(name, value) {
85
+ var warnStyleValueWithSemicolon = function(name, value, owner) {
86
if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
87
return;
88
}
@@ -88,14 +90,15 @@ if (__DEV__) {
90
warnedStyleValues[value] = true;
91
warning(
92
false,
91
- 'Style property values shouldn\'t contain a semicolon. ' +
93
+ 'Style property values shouldn\'t contain a semicolon.%s ' +
94
'Try "%s: %s" instead.',
95
+ checkRenderMessage(owner),
96
name,
97
value.replace(badStyleValueWithSemicolonPattern, '')
98
);
99
};
100
98
- var warnStyleValueIsNaN = function(name, value) {
101
+ var warnStyleValueIsNaN = function(name, value, owner) {
102
if (warnedForNaNValue) {
103
return;
104
}
@@ -103,26 +106,42 @@ if (__DEV__) {
106
warnedForNaNValue = true;
107
warning(
108
false,
106
- '`NaN` is an invalid value for the `%s` css style property',
107
- name
109
+ '`NaN` is an invalid value for the `%s` css style property.%s',
110
+ name,
111
+ checkRenderMessage(owner)
112
);
113
};
114
115
+ var checkRenderMessage = function(owner) {
116
+ if (owner) {
117
+ var name = owner.getName();
118
+ if (name) {
119
+ return ' Check the render method of `' + name + '`.';
120
+ }
121
+ }
122
+ return '';
123
+ };
124
+
125
/**
126
* @param {string} name
127
* @param {*} value
128
+ * @param {ReactDOMComponent} component
129
*/
115
- var warnValidStyle = function(name, value) {
130
+ var warnValidStyle = function(name, value, component) {
131
+ var owner;
132
+ if (component) {
133
+ owner = component._currentElement._owner;
134
+ }
135
if (name.indexOf('-') > -1) {
117
- warnHyphenatedStyleName(name);
136
+ warnHyphenatedStyleName(name, owner);
137
} else if (badVendoredStyleNamePattern.test(name)) {
119
- warnBadVendoredStyleName(name);
138
+ warnBadVendoredStyleName(name, owner);
139
} else if (badStyleValueWithSemicolonPattern.test(value)) {
121
- warnStyleValueWithSemicolon(name, value);
140
+ warnStyleValueWithSemicolon(name, value, owner);
141
}
142
143
if (typeof value === 'number' && isNaN(value)) {
125
- warnStyleValueIsNaN(name, value);
144
+ warnStyleValueIsNaN(name, value, owner);
145
}
146
};
147
}
@@ -153,7 +172,7 @@ var CSSPropertyOperations = {
172
}
173
var styleValue = styles[styleName];
174
if (__DEV__) {
156
- warnValidStyle(styleName, styleValue);
175
+ warnValidStyle(styleName, styleValue, component);
176
}
177
if (styleValue != null) {
178
serialized += processStyleName(styleName) + ':';
@@ -170,6 +189,7 @@ var CSSPropertyOperations = {
189
*
190
* @param {DOMElement} node
191
* @param {object} styles
192
+ * @param {ReactDOMComponent} component
193
*/
194
setValueForStyles: function(node, styles, component) {
195
var style = node.style;
@@ -178,7 +198,7 @@ var CSSPropertyOperations = {
198
continue;
199
}
200
if (__DEV__) {
181
- warnValidStyle(styleName, styles[styleName]);
201
+ warnValidStyle(styleName, styles[styleName], component);
202
}
203
var styleValue = dangerousStyleValue(
204
styleName,
src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
+80
-39
@@ -108,75 +108,116 @@ describe('CSSPropertyOperations', function() {
108
});
109
110
it('should warn when using hyphenated style names', function() {
111
+ var Comp = React.createClass({
112
+ displayName: 'Comp',
113
+ render: function() {
114
+ return <div style={{ 'background-color': 'crimson' }}/>;
115
+ },
116
+ });
117
spyOn(console, 'error');
112
-
113
- expect(CSSPropertyOperations.createMarkupForStyles({
114
- 'background-color': 'crimson',
115
- })).toBe('background-color:crimson;');
116
-
118
+ var root = document.createElement('div');
119
+ ReactDOM.render(<Comp />, root);
120
expect(console.error.argsForCall.length).toBe(1);
118
- expect(console.error.argsForCall[0][0]).toContain('backgroundColor');
121
+ expect(console.error.argsForCall[0][0]).toEqual(
122
+ 'Warning: Unsupported style property background-color. Did you mean backgroundColor? ' +
123
+ 'Check the render method of `Comp`.'
124
+ );
125
});
126
127
it('should warn when updating hyphenated style names', function() {
128
+ var Comp = React.createClass({
129
+ displayName: 'Comp',
130
+ render: function() {
131
+ return <div style={this.props.style} />;
132
+ },
133
+ });
134
spyOn(console, 'error');
123
-
124
- var root = document.createElement('div');
135
var styles = {
136
'-ms-transform': 'translate3d(0, 0, 0)',
137
'-webkit-transform': 'translate3d(0, 0, 0)',
138
};
129
-
130
- ReactDOM.render(<div />, root);
131
- ReactDOM.render(<div style={styles} />, root);
139
+ var root = document.createElement('div');
140
+ ReactDOM.render(<Comp />, root);
141
+ ReactDOM.render(<Comp style={styles} />, root);
142
143
expect(console.error.argsForCall.length).toBe(2);
134
- expect(console.error.argsForCall[0][0]).toContain('msTransform');
135
- expect(console.error.argsForCall[1][0]).toContain('WebkitTransform');
144
+ expect(console.error.argsForCall[0][0]).toEqual(
145
+ 'Warning: Unsupported style property -ms-transform. Did you mean msTransform? ' +
146
+ 'Check the render method of `Comp`.'
147
+ );
148
+ expect(console.error.argsForCall[1][0]).toEqual(
149
+ 'Warning: Unsupported style property -webkit-transform. Did you mean WebkitTransform? ' +
150
+ 'Check the render method of `Comp`.'
151
+ );
152
});
153
154
it('warns when miscapitalizing vendored style names', function() {
139
- spyOn(console, 'error');
140
-
141
- CSSPropertyOperations.createMarkupForStyles({
142
- msTransform: 'translate3d(0, 0, 0)',
143
- oTransform: 'translate3d(0, 0, 0)',
144
- webkitTransform: 'translate3d(0, 0, 0)',
155
+ var Comp = React.createClass({
156
+ displayName: 'Comp',
157
+ render: function() {
158
+ return (<div style={{
159
+ msTransform: 'translate3d(0, 0, 0)',
160
+ oTransform: 'translate3d(0, 0, 0)',
161
+ webkitTransform: 'translate3d(0, 0, 0)',
162
+ }} />);
163
+ },
164
});
146
-
165
+ spyOn(console, 'error');
166
+ var root = document.createElement('div');
167
+ ReactDOM.render(<Comp />, root);
168
// msTransform is correct already and shouldn't warn
169
expect(console.error.argsForCall.length).toBe(2);
149
- expect(console.error.argsForCall[0][0]).toContain('oTransform');
150
- expect(console.error.argsForCall[0][0]).toContain('OTransform');
151
- expect(console.error.argsForCall[1][0]).toContain('webkitTransform');
152
- expect(console.error.argsForCall[1][0]).toContain('WebkitTransform');
170
+ expect(console.error.argsForCall[0][0]).toEqual(
171
+ 'Warning: Unsupported vendor-prefixed style property oTransform. ' +
172
+ 'Did you mean OTransform? Check the render method of `Comp`.'
173
+ );
174
+ expect(console.error.argsForCall[1][0]).toEqual(
175
+ 'Warning: Unsupported vendor-prefixed style property webkitTransform. ' +
176
+ 'Did you mean WebkitTransform? Check the render method of `Comp`.'
177
+ );
178
});
179
180
it('should warn about style having a trailing semicolon', function() {
156
- spyOn(console, 'error');
157
-
158
- CSSPropertyOperations.createMarkupForStyles({
159
- fontFamily: 'Helvetica, arial',
160
- backgroundImage: 'url(foo;bar)',
161
- backgroundColor: 'blue;',
162
- color: 'red; ',
181
+ var Comp = React.createClass({
182
+ displayName: 'Comp',
183
+ render: function() {
184
+ return (<div style={{
185
+ fontFamily: 'Helvetica, arial',
186
+ backgroundImage: 'url(foo;bar)',
187
+ backgroundColor: 'blue;',
188
+ color: 'red; ',
189
+ }} />);
190
+ },
191
});
164
-
192
+ spyOn(console, 'error');
193
+ var root = document.createElement('div');
194
+ ReactDOM.render(<Comp />, root);
195
expect(console.error.calls.length).toBe(2);
166
- expect(console.error.argsForCall[0][0]).toContain('Try "backgroundColor: blue" instead');
167
- expect(console.error.argsForCall[1][0]).toContain('Try "color: red" instead');
196
+ expect(console.error.argsForCall[0][0]).toEqual(
197
+ 'Warning: Style property values shouldn\'t contain a semicolon. ' +
198
+ 'Check the render method of `Comp`. Try "backgroundColor: blue" instead.',
199
+ );
200
+ expect(console.error.argsForCall[1][0]).toEqual(
201
+ 'Warning: Style property values shouldn\'t contain a semicolon. ' +
202
+ 'Check the render method of `Comp`. Try "color: red" instead.',
203
+ );
204
});
205
206
it('should warn about style containing a NaN value', function() {
171
- spyOn(console, 'error');
172
-
173
- CSSPropertyOperations.createMarkupForStyles({
174
- fontSize: NaN,
207
+ var Comp = React.createClass({
208
+ displayName: 'Comp',
209
+ render: function() {
210
+ return <div style={{ fontSize: NaN }}/>;
211
+ },
212
});
213
+ spyOn(console, 'error');
214
+ var root = document.createElement('div');
215
+ ReactDOM.render(<Comp />, root);
216
217
expect(console.error.calls.length).toBe(1);
218
expect(console.error.argsForCall[0][0]).toEqual(
179
- 'Warning: `NaN` is an invalid value for the `fontSize` css style property'
219
+ 'Warning: `NaN` is an invalid value for the `fontSize` css style property. ' +
220
+ 'Check the render method of `Comp`.'
221
);
222
});
223
});
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+1
-1
@@ -200,7 +200,7 @@ describe('ReactDOMComponent', function() {
200
201
expect(console.error.argsForCall.length).toBe(1);
202
expect(console.error.argsForCall[0][0]).toEqual(
203
- 'Warning: `NaN` is an invalid value for the `fontSize` css style property',
203
+ 'Warning: `NaN` is an invalid value for the `fontSize` css style property.',
204
);
205
});
206