Styled-system: Do number values still get converted to pixels?

[eMontielG]

The bulletpoints in the changed section of the migration guide state that "Number values are no longer converted to strings with px units", but here it says that "Numbers from 0 to the length of theme.space are converted to values on the space scale" and that "Numbers greater than the length of the theme.space array are converted to raw pixel values", and indeed, number values in my theme properties are still being converted to pixels.

Am I missing something or are these two different behaviors of the API? I'm using version 5.1.5 of Styled System.

[bearcanrun]

@eMontielG Using 5.1.5, from what I see, "Number values are no longer converted to strings with px units" is true. I have the very situation you describe but have conflicting results from yours; where my space array is [0,2,4,8,12,18,24,36,48] and I set m: 10. The output is margin: 10. Remains a number, no pixels added. And if I use m: 9 output is margin: 48.

[eMontielG]

@bearcanrun Weird, you're passing them as props like <Text mb={2}>, right? I'm not sure if this might have to do with Styled-Components, can't find anywhere in their documentation if they are the ones converting the values, though.

[bearcanrun]

@eMontielG I'm using system on a lower level and using compose to pull in space, color, layout, etc. I'm not using React.

It probably is a StyledComponents thing. Not a 100% sure, but the styled calls a flatten which appends the styles with addUnitIfNeeded; essentially a wrapper for @emotion/unitless.

[eMontielG]

@bearcanrun Yep, looking through their source code right now and it seems that you're correct, though it only does that when you use style objects and not tagged templates, that's why I had never encountered this behavior before. Anyway, thanks a lot!