Why not automatically add 'px' to numbers like react.js does?

[bitplanets]

Why not automatically add 'px' to numbers like react.js does?

Instead of having to add a px after each number, add it automatically.

[charliermarsh]

This is a duplicate of #30 (which is covered by PR #33). We didn't merge it in because there was some talk that React was going to ditch this behavior anyway. @chenglou any updates on that?

[chenglou]

No update so far. We're kinda unsure what's actually better. Will wait more and see. But we could totally expose a helper function that appends those units though. This way you encourage people to pass around unitless values (real numbers) and only use addUnits(styleObj) at the very end.

[bitplanets]

what about:

width: 50 => converts to "width: 50px;"
widthPer: 50 => converts to "width: 50%;"

?

I understand that will take to away from css, but is not that bad. Is also easier to reuse values.

[chenglou]

This is a bit arbitrary and I don't want custom keys

[bitplanets]

I understand, fair enough. But something using numbers would be nicer in order to make calculations. With '50px' would be a pain to add 25px.

[bitplanets]

I had an idea but is kind of pain to work with:

{width: RCSS.px(55)} // will be {width: 55px}
{width: RCSS.per(0.55)} // will be {width: 55%}

You have to understand that

RCSS.per(0.55) 

will return a special Number class that has various methods and one of them is:

var myN = RCSS.per(0.55)
myN.toString(); // 55%

Smart defaults:

{width: 55} // will be {width: 55px}

But RCSS will transform the native Number 55 to the special Number class in order to keep all the numbers in the RCSS system with that special class. Now you can make changes to those numbers with functions

var a = {width: RCSS.px(55)} // will be {width: 55px}
var b = {width: RCSS.px(55).add(a.width)} // will be {width: 110px}

What do you think about this?

[chenglou]

I'm not gonna start imitating all the number operations and make it hard to work with with normal logic. I think RCSS.per is fine at the very bottom when you're passing this to, say, React:

var myStyle = {
  width: per(styleObj.style.width)
};
<div style={myStyle} />

But for passing objects around and reading/writing we really should just stick with normal numbers. This ties back to #27