Remove css px warning, stop appending px to strings (#6899)
Jim committed
May 31, 2016 at 14:32 UTC
51f8b1b40ccde3fa585220220403ba19d686bb85
3 files changed
+8
-88
src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
+4
-4
@@ -60,12 +60,12 @@ describe('CSSPropertyOperations', function() {
60
})).toBe('left:0;margin:16px;opacity:0.5;padding:4px;');
61
});
62
63
- it('should trim values so `px` will be appended correctly', function() {
63
+ it('should trim values', function() {
64
expect(CSSPropertyOperations.createMarkupForStyles({
65
- margin: '16 ',
65
+ left: '16 ',
66
opacity: 0.5,
67
- padding: ' 4 ',
68
- })).toBe('margin:16px;opacity:0.5;padding:4px;');
67
+ right: ' 4 ',
68
+ })).toBe('left:16;opacity:0.5;right:4;');
69
});
70
71
it('should not append `px` to styles that might need a number', function() {
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
-43
@@ -173,49 +173,6 @@ describe('ReactDOMComponent', function() {
173
);
174
});
175
176
-
177
- it('should warn about styles with numeric string values for non-unitless properties', function() {
178
- spyOn(console, 'error');
179
-
180
- var div = document.createElement('div');
181
- var One = React.createClass({
182
- render: function() {
183
- return this.props.inline ?
184
- <span style={{fontSize: '1'}} /> :
185
- <div style={{fontSize: '1'}} />;
186
- },
187
- });
188
- var Two = React.createClass({
189
- render: function() {
190
- return <div style={{fontSize: '1'}} />;
191
- },
192
- });
193
- ReactDOM.render(<One inline={false} />, div);
194
- expect(console.error.calls.count()).toBe(1);
195
- expect(console.error.calls.argsFor(0)[0]).toBe(
196
- 'Warning: a `div` tag (owner: `One`) was passed a numeric string value ' +
197
- 'for CSS property `fontSize` (value: `1`) which will be treated ' +
198
- 'as a unitless number in a future version of React.'
199
- );
200
-
201
- // Don't warn again for the same component
202
- ReactDOM.render(<One inline={true} />, div);
203
- expect(console.error.calls.count()).toBe(1);
204
-
205
- // Do warn for different components
206
- ReactDOM.render(<Two />, div);
207
- expect(console.error.calls.count()).toBe(2);
208
- expect(console.error.calls.argsFor(1)[0]).toBe(
209
- 'Warning: a `div` tag (owner: `Two`) was passed a numeric string value ' +
210
- 'for CSS property `fontSize` (value: `1`) which will be treated ' +
211
- 'as a unitless number in a future version of React.'
212
- );
213
-
214
- // Really don't warn again for the same component
215
- ReactDOM.render(<One inline={true} />, div);
216
- expect(console.error.calls.count()).toBe(2);
217
- });
218
-
176
it('should not warn for "0" as a unitless style value', function() {
177
spyOn(console, 'error');
178
var Component = React.createClass({
src/renderers/dom/shared/dangerousStyleValue.js
+4
-41
@@ -12,10 +12,8 @@
12
'use strict';
13
14
var CSSProperty = require('CSSProperty');
15
-var warning = require('warning');
15
16
var isUnitlessNumber = CSSProperty.isUnitlessNumber;
18
-var styleWarnings = {};
17
18
/**
19
* Convert a value into the proper css writable value. The style name `name`
@@ -43,47 +41,12 @@ function dangerousStyleValue(name, value, component) {
41
return '';
42
}
43
46
- var isNonNumeric = isNaN(value);
47
- if (isNonNumeric || value === 0 ||
48
- isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]) {
49
- return '' + value; // cast to string
44
+ if (typeof value === 'number' && value !== 0 &&
45
+ !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])) {
46
+ return value+'px'; // Presumes implicit 'px' suffix for unitless numbers
47
}
48
52
- if (typeof value === 'string') {
53
- if (__DEV__) {
54
- // Allow '0' to pass through without warning. 0 is already special and
55
- // doesn't require units, so we don't need to warn about it.
56
- if (component && value !== '0') {
57
- var owner = component._currentElement._owner;
58
- var ownerName = owner ? owner.getName() : null;
59
- if (ownerName && !styleWarnings[ownerName]) {
60
- styleWarnings[ownerName] = {};
61
- }
62
- var warned = false;
63
- if (ownerName) {
64
- var warnings = styleWarnings[ownerName];
65
- warned = warnings[name];
66
- if (!warned) {
67
- warnings[name] = true;
68
- }
69
- }
70
- if (!warned) {
71
- warning(
72
- false,
73
- 'a `%s` tag (owner: `%s`) was passed a numeric string value ' +
74
- 'for CSS property `%s` (value: `%s`) which will be treated ' +
75
- 'as a unitless number in a future version of React.',
76
- component._currentElement.type,
77
- ownerName || 'unknown',
78
- name,
79
- value
80
- );
81
- }
82
- }
83
- }
84
- value = value.trim();
85
- }
86
- return value + 'px';
49
+ return ('' + value).trim();
50
}
51
52
module.exports = dangerousStyleValue;