CSS property values that are strings shouldn't have 'px' appended

[sophiebits]

It's weird that style={{margin: '42'}} gets turned into margin: 42px;. I think we should only add px if the value is an actual number.

[syranide]

I'll just chime in with what I mentioned in the chat last time, I think it's a great solution. Just as margin: '42px 42px 42px 42px' means you're providing a raw CSS-string, '42px' would mean you're providing a raw CSS-string. So it makes sense logically.

However, <Comp size={42}> and <Comp size="42"> 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 {42} 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 {42} the only right way, but to me it seems like there's no way to enforce it at run-time without propTypes which is a developer burden, and as I've understood it, an entirely optional feature in your eyes. So it seems kind of fragile.

[zpao]

Note: this isn't actually fixed, just have a warning in place.

[jimfb]

Yep, was autoclosed by the PR.