[bug] Style value conflicts with alias

What do we do if the style value we want to pass conflicts with the key for one of our aliases?

const theme = {
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
}

If we have the above theme, then calling space[1] = 4, and space[6] = 128.

Situation 1:

Let’s say I didn’t want to use the 128 value, but instead, I just wanted to pass padding of 6 pixels.

<View
  sx={{
    padding: 6 // returns 128
  }}
/>

So, how do I get 6 in there?

The answer: I could just pass the correct value to style instead of sx. However, style currently is treated as an sx prop. Since this doesn’t make much sense, I should get rid of this line and just use the raw style object.

<View
  style={{
    padding: 6 // returns 128, should return 6 after refactor
  }}
/>

Situation 2:

While that solves situation 1, what if I want to use theme values to calculate 6px?

In my case, I want to grab space[1] (i.e. 4px), and multiply it by 1.5 to get 6px.

<View
  sx={{
    // this is 4 * 1.5 = 6
    // but wait, it gives 128, from the theme!
    padding: (theme) => theme.space[1] * 1.5
  }}
/>

Alright, so once again, I end up with 128px, not 6px.

To borrow from situation 1:

const { theme } = useThemeUI()

<View
  style={{
    padding: theme.space[1] * 1.5 // this would solve it after the refactor of changing sx -> style
  }}
/>

Hmm…there’s still one edge case, though. What if I wanted to use that value in a responsive array?

const { theme } = useThemeUI()
<View
  sx={{
    padding: [theme.space[1] * 1.5, theme.space[2] * 1.5]
  }}
/>

In this case, the only way to use responsive arrays is via the sx prop. But if I use the sx prop, I am stuck with theme values, and can’t use the 6px work-around from web.

What does theme-ui do?

This problem is easily solved in theme-ui. You can just pass a raw '6px' string, and boom, you’re done.

But React Native doesn’t allow '6px', because it only uses numbers.

Solution

Could we edit the css function to check for <number>px values, and turn these into numbers to avoid making RN angry?

If so, then this would work:

<View
  sx={{
    padding: theme => [`${theme.space[1] * 1.5}px`, `${theme.space[2] * 1.5}px`]
  }}
/>

[nandorojo]

Thought of a solution. Allow 16px values, and in the css function, check if a value is a string that endsWith(px), and if so, make it a raw number that avoids an alias.

[nandorojo]

Yeah, it’s a bit tricky at the moment…I’m sticking with the annoying workaround for now. It’s pretty uncommon to run into this, and I like using the array syntax, so I’ll close for the time being.