Change:
It's weird that gets turned into . I think we should only add if the value is an actual number.
I'll just chime in with what I mentioned in the chat last time, I think it's a great solution. Just as means you're providing a raw CSS-string, would mean you're providing a raw CSS-string. So it makes sense logically. However, and suddenly has two very different outcomes if the component passes the value as-is to the style-object. I see no intuitive way out of this, sure enforcing numbers as is technically the right solution, but it's not obvious to new users (document it thoroughly) and it's potentially error prone for a user base accustomed to HTML (especially designers I would assume). I don't mind making the only right way, but to me it seems like there's no way to enforce it at run-time without which is a developer burden, and as I've understood it, an entirely optional feature in your eyes. So it seems kind of fragile.
Note: this isn't actually fixed, just have a warning in place.
Yep, was autoclosed by the PR.
should we add a version in the warning message to this behavior be removed?
So just to clarify, is passing a number value as string type the only thing that will no longer have appended to it? Will passing a plain number a la still be supported, or is there also an intent to remove that as well?
As I understood, only string type. The example you gave, will still be supported.
we still have this warning in place, should we consider acting on for 16 or wait until 17?
Too late for breaking changes for 16, let's look at doing it in 17. Can probably land soon after the release behind a flag.
Hmm. I neither see a warning, nor do I see it apply the style. I think this was fixed in 16.

Discussion:
* The result should be HTML-escaped before insertion into the DOM. * * @param {object} styles <ins> * @param {ReactDOMComponent} component </ins> * @return {?string} */ <del> createMarkupForStyles: function(styles) { </del> <ins> createMarkupForStyles: function(styles, component) { </ins> var serialized = ''; for (var styleName in styles) { if (!styles.hasOwnProperty(styleName)) {

} if (styleValue != null) { serialized += processStyleName(styleName) + ':'; <del> serialized += dangerousStyleValue(styleName, styleValue) + ';'; </del> <ins> serialized += dangerousStyleValue(styleName, styleValue, component) + ';'; </ins> } } return serialized || null;

} propValue = this._previousStyleCopy = assign({}, props.style); } <del> propValue = CSSPropertyOperations.createMarkupForStyles(propValue); </del> <ins> propValue = CSSPropertyOperations.createMarkupForStyles(propValue, this); </ins> } var markup = null; if (this._tag != null && isCustomComponent(this._tag, props)) {

expect(console.error.argsForCall.length).toBe(2); }); <ins> 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 ? <span style={{fontSize: '1'}} /> : <div style={{fontSize: '1'}} />; }, }); var Two = React.createClass({ render: function() { return <div style={{fontSize: '1'}} />; }, }); ReactDOM.render(<One inline={false} />, div); expect(console.error.calls.length).toBe(1); expect(console.error.argsForCall[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(<One inline={true} />, div); expect(console.error.calls.length).toBe(1); // Do warn for different components ReactDOM.render(<Two />, div); expect(console.error.calls.length).toBe(2); expect(console.error.argsForCall[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(<One inline={true} />, div); expect(console.error.calls.length).toBe(2); }); </ins> it('should warn semi-nicely about NaN in style', function() { spyOn(console, 'error');

'use strict'; var CSSProperty = require('CSSProperty'); <ins> var warning = require('warning'); </ins> var isUnitlessNumber = CSSProperty.isUnitlessNumber; <ins> var styleWarnings = {}; </ins> /** * Convert a value into the proper css writable value. The style name `name`

* * @param {string} name CSS property name such as `topMargin`. * @param {*} value CSS property value such as `10px`. <ins> * @param {ReactDOMComponent} component </ins> * @return {string} Normalized style value with dimensions applied. */ <del> function dangerousStyleValue(name, value) { </del> <ins> function dangerousStyleValue(name, value, component) { </ins> // Note that we've removed escapeTextForBrowser() calls here since the // whole string will be escaped when the attribute is injected into // the markup. If you provide unsafe user data here they can inject

} if (typeof value === 'string') { <ins> if (__DEV__) { if (component) { 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 ); } } } </ins> value = value.trim(); } return value + 'px';