Flex sx prop don't take a function about theme-ui HOT 7 CLOSED

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

from theme-ui.

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

from theme-ui.

@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?

from theme-ui.

@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?

from theme-ui.

@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

from theme-ui.

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.

from theme-ui.

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

from theme-ui.