Convert numbers to pixels, e.g., 1 -> 1px

[fc]

React automagically converts numbers to pixels, e.g., 1 to '1px'. Seems like it would be helpful to have.

[jorgebucaran]

@fc What makes px special?

[fc]

I'm not sure what you mean? It's a convention in React. For it to not work with picostyle was a surprise.

[jorgebucaran]

@fc I'm wondering what makes px special to be the default. In other words, why would it be helpful to have?

---

How would you like a function for the units you want to use returning ${value}px? Just a thought. I don't have a strong opinion on this.

import picostyle from "picostyle"
import { px } "@picostyle/units"

// Create `style`...

const Wrapper = style("div")({
  marginTop: px(10)
})

[fc]

It's helpful because:

1. It is a default behavior for React and picostyle's current behavior is incompatible with React
2. picostyle itself builds React components so why not make it compatible
3. Migrating an existing component that does use the pixel shorthand notation, a person will need to update to add "px"
4. picostyle doesn't document this incompatibility

Given the above, adding a unit function doesn't seem clean at all. I'd rather be compatible with how React behaves than add a function.

[fc]

Here is where React implements it: https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/dangerousStyleValue.js#L41

And only certain properties are allowed to be unitless: https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/CSSProperty.js#L11-L56

[B-Teague]

Now that we have an options parameter, we could add a defaultUnits property. The only problem is we have to have an enum of css properties that support unitless values which will increase the file size.