Flex sx prop don't take a function

[Daniel Martín]

Describe the bug
According to the docs:

The Flex component is identical to the Box component, but with display: flex set. If you need to alter the display property, use the Box component instead.

But it breaks when we pass a function to the sx prop, instead of an object. You can see why when looking at its implementation, where we spread the sx prop, assuming it's always an object.

To Reproduce
Steps to reproduce the behavior:

1. Use Flex and add some styles using the sx prop as an object.
2. Change the implementation and use a function for the sx prop that returns that same object.
3. See how the styles break.

Expected behavior
Flex should also accept a function for its sx prop, just like Box.

Additional context
Maybe this was working before? We recently made a significant upgrade to one of our projects that was using quite an old version of theme-ui and noticed that some components broke because of this bug.

[CJ]

@dani-mp It seems to work fine. I tried this locally with the latest develop branch.

theme-ui1.mp4

[Daniel Martín]

@dev-cj interesting, it wasn't working for us 5 months ago and I don't see anything has changed in the Flex component implementation. Maybe it did somewhere else (e.g. emotion)?

Could you put that in a codesanbox so I can play with it?

[Daniel Martín]

@dev-cj btw, this is the implementation, the sx prop is overwritten and then spread. If you spread a fn inside an object, you get nothing.

What am I missing?

[CJ]

@dev-cj interesting, it wasn't working for us 5 months ago and I don't see anything has changed in the Flex component implementation. Maybe it did somewhere else (e.g. emotion)?

Could you put that in a codesanbox so I can play with it?

Sure, here you can check https://codesandbox.io/s/zealous-star-7thpek

@dev-cj btw, this is the implementation, the sx prop is overwritten and then spread. If you spread a fn inside an object, you get nothing.

What am I missing?

Yes sx prop is overwritten and then spread there, but there theme-ui's transpiler executes the sx props instead of the reac babel runtime, so even if you try to log the sx props that are passed into the flex component you will not see the function in the props.

To see the function in logs try logging in parseProps here

[Daniel Martín]

Thanks, yeah it works!

I didn't know that the theme-ui transpiler was kicking in before the sx prop was computed. Or you said instead? I was assuming that first everything was compiled down to basic JavaScript, and then as a final/later step, the sx prop was converted into something else, and removed from the final props. I guess I still don't really know how this works because it doesn't make sense to me that depending on whether your prop is sx or not, the semantics of the JavaScript you're writing changes.

And in any case (there's probably a way to double check this), it seems that the implementation of Flex hasn't changed during these months since I created the issue (end of last year), but a colleague and I did find this issue in our codebase and verified that Flex wasn't working with a function, and Box was. Maybe the implementation of the runtime itself suffered a regression for some time? I even mentioned this in the description of the issue:

Maybe this was working before? We recently made a significant upgrade to one of our projects that was using quite an old version of theme-ui and noticed that some components broke because of this bug.

I didn't write the original code and I was suspicious that it never worked before, the team would have caught it for sure, and it only surfaced till we migrated to the by then current version of theme-ui.

[CJ]

Yeah, it could be some core changes or conflicts with other dependencies have caused the regression.

[Daniel Martín]

Let's close the issue then. Thanks a lot for your insight! 🎉