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;