[Feature Request] Transpile away style9 runtime call

[SukkaW]

Facebook's stylex has evolved a lot since it is being first introduced in React Conf 2019. At the time, stylex uses a syntax like this:

const styles = stylex.create({ red });

<div className={styles('red')} />

Nowadays, stylex seems to prefer the syntax with directly stylex() call, see React Finland 2021 - Introducing StyleX:

const styles = stylex.create({ red });

<div className={stylesx(styles.red)} />

And according to React Finland 2021, they are able to strip most of stylex runtime call through static analysis.

Currently, style9 doesn't support stripping away the style9() runtime at all. I am about to experiment with it a little bit to see if it is doable.

[johanholmerin]

For styles defined in the same file this should be fairly easy. It may also be more intuitive, since it removes the magic(i.e. lie) of styles being a function. Having a single way of generating class names is also a plus. When it comes to styles defined in other files the compiler will have to bail and stick to using the runtime, which is fine.

Let me know how it goes and what your opinion on the styles() vs style9() syntax is

[SukkaW]

For styles defined in the same file this should be fairly easy. It may also be more intuitive, since it removes the magic(i.e. lie) of styles being a function. Having a single way of generating class names is also a plus. When it comes to styles defined in other files the compiler will have to bail and stick to using the runtime, which is fine.

Let me know how it goes and what your opinion on the styles() vs style9() syntax is

Personally, I'd prefer the new way (without styles being a function). It enables IDE to find the original style definition:

With Go to definition I can find what styles.card is.

And personally, I rarely create the style and export for other files. If I need to re-use a style, I will do composition at the component level (as I mentioned in #59)

[TxHawks]

I wonder if the newly released StyleQ could be of any relevance to this discussion

[shravan2x]

Chiming in to share my preference for the new style. My reasoning is the same as @SukkaW i.e. so the type checker can verify that the style exists

[SukkaW]

Although Facebook stylex is not officially open-sourced, it does publish an alpha version on npm:

https://unpkg.com/browse/@stylexjs/[email protected]/lib/index.js

And we might be able to learn something from it.