diff --git a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
index e7ba52c8436..d87508deec2 100644
--- a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
+++ b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
@@ -60,12 +60,12 @@ describe('CSSPropertyOperations', function() {
})).toBe('left:0;margin:16px;opacity:0.5;padding:4px;');
});
- it('should trim values so `px` will be appended correctly', function() {
+ it('should trim values', function() {
expect(CSSPropertyOperations.createMarkupForStyles({
- margin: '16 ',
+ left: '16 ',
opacity: 0.5,
- padding: ' 4 ',
- })).toBe('margin:16px;opacity:0.5;padding:4px;');
+ right: ' 4 ',
+ })).toBe('left:16;opacity:0.5;right:4;');
});
it('should not append `px` to styles that might need a number', function() {
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
index c7ba1540de1..73a2dfe95a4 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -173,49 +173,6 @@ describe('ReactDOMComponent', function() {
);
});
-
- it('should warn about styles with numeric string values for non-unitless properties', function() {
- spyOn(console, 'error');
-
- var div = document.createElement('div');
- var One = React.createClass({
- render: function() {
- return this.props.inline ?
- :
-
;
- },
- });
- var Two = React.createClass({
- render: function() {
- return ;
- },
- });
- ReactDOM.render(, div);
- expect(console.error.calls.count()).toBe(1);
- expect(console.error.calls.argsFor(0)[0]).toBe(
- 'Warning: a `div` tag (owner: `One`) was passed a numeric string value ' +
- 'for CSS property `fontSize` (value: `1`) which will be treated ' +
- 'as a unitless number in a future version of React.'
- );
-
- // Don't warn again for the same component
- ReactDOM.render(, div);
- expect(console.error.calls.count()).toBe(1);
-
- // Do warn for different components
- ReactDOM.render(, div);
- expect(console.error.calls.count()).toBe(2);
- expect(console.error.calls.argsFor(1)[0]).toBe(
- 'Warning: a `div` tag (owner: `Two`) was passed a numeric string value ' +
- 'for CSS property `fontSize` (value: `1`) which will be treated ' +
- 'as a unitless number in a future version of React.'
- );
-
- // Really don't warn again for the same component
- ReactDOM.render(, div);
- expect(console.error.calls.count()).toBe(2);
- });
-
it('should not warn for "0" as a unitless style value', function() {
spyOn(console, 'error');
var Component = React.createClass({
diff --git a/src/renderers/dom/shared/dangerousStyleValue.js b/src/renderers/dom/shared/dangerousStyleValue.js
index 8b5424cc8ee..3cc041fe5af 100644
--- a/src/renderers/dom/shared/dangerousStyleValue.js
+++ b/src/renderers/dom/shared/dangerousStyleValue.js
@@ -12,10 +12,8 @@
'use strict';
var CSSProperty = require('CSSProperty');
-var warning = require('warning');
var isUnitlessNumber = CSSProperty.isUnitlessNumber;
-var styleWarnings = {};
/**
* Convert a value into the proper css writable value. The style name `name`
@@ -43,47 +41,12 @@ function dangerousStyleValue(name, value, component) {
return '';
}
- var isNonNumeric = isNaN(value);
- if (isNonNumeric || value === 0 ||
- isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]) {
- return '' + value; // cast to string
+ if (typeof value === 'number' && value !== 0 &&
+ !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])) {
+ return value+'px'; // Presumes implicit 'px' suffix for unitless numbers
}
- if (typeof value === 'string') {
- if (__DEV__) {
- // Allow '0' to pass through without warning. 0 is already special and
- // doesn't require units, so we don't need to warn about it.
- if (component && value !== '0') {
- var owner = component._currentElement._owner;
- var ownerName = owner ? owner.getName() : null;
- if (ownerName && !styleWarnings[ownerName]) {
- styleWarnings[ownerName] = {};
- }
- var warned = false;
- if (ownerName) {
- var warnings = styleWarnings[ownerName];
- warned = warnings[name];
- if (!warned) {
- warnings[name] = true;
- }
- }
- if (!warned) {
- warning(
- false,
- 'a `%s` tag (owner: `%s`) was passed a numeric string value ' +
- 'for CSS property `%s` (value: `%s`) which will be treated ' +
- 'as a unitless number in a future version of React.',
- component._currentElement.type,
- ownerName || 'unknown',
- name,
- value
- );
- }
- }
- }
- value = value.trim();
- }
- return value + 'px';
+ return ('' + value).trim();
}
module.exports = dangerousStyleValue;