Open Props question

[BMCwebdev]

I'm currently on-boarding our UX teams design tokens into the component library (and Stylex). Right now I am doing this by hand until we figure out a system to have a source of truth that can generate useful code for both Stylex and Figma.

The Open Props example in the NextJS demo is nice. I'm curious how that came about? It's not an official addition to Stylex, correct? Would we have to look to Open Props to take this on themselves to offer an official version that they would maintain?

[nmn]

It's not an official addition to Stylex, correct?

I'm not sure what you mean by this? We offer @stylexjs/open-props as a package on NPM that you should be able to install and use just like the NextJS example.

You can also create your own themes using it as an example if you want something different.

Please clarify if I'm misunderstanding your question here.

[BMCwebdev]

Sure, really I was just curious. I’ve been following it as an example to build my own, though Open Props is great. I was just wondering if there was a plan to continue offering this with future updates, or was it more of a one off demo. (And if so hopefully the Open Props team might take this on as an offering). Thanks!

[nmn]

@BMCwebdev We plan to update it over time, but we've had a lot of trouble automating this work. Over time, as more features are added to StyleX we hope to be able to automate this fully!

[BMCwebdev]

Thanks! Yeah, I’ve been trying to figure out a way to automate a build of my UX design teams Figma JSON -> Stylex. But that one’s on the back burner for now.

[nmn]

I’ve been trying to figure out a way to automate a build of my UX design teams Figma JSON -> Stylex

This might be possible today.

The issues with open-props is that they use some advanced CSS patterns to define variables. Some of the variables are "functions" where you're supposed to set other variables to pass in "arguments". One day, we might be able to create an API around such a pattern, but it's not important for now.