Some confusions about working with Vite

[nonzzz]

Background

I notice #112, If user using @stylex/open-props in vite. vite has a pre-build in development mode so it break stylex internal logic :( but currently stylex don't provide an esm package so we can't set optimizeDeps.excludeoptimizeDeps

Others

Are there any optimization plans for it?

[predaytor]

Same here.

[nmn]

Yes we're working on official ESM support. We already have a PR and are currently working to update our dependency styleq to support ESM.

---

That said, it should be much easier to make @stylexjs/open-props support ESM. Also, the Vite plugin can be authored in different ways to make things work correctly. Please give me any details you can as we've successfully made things work with Vite already.

Speacifically, I want to know what this means:

vite has a pre-build in development mode so it break stylex internal logic

[nonzzz]

Normally vite do pre build will complete all of dependencies to '.vite' directory,For example open-props can be cached into a 'chunk.xxxx.js' which breaks the
naming convention of '.style.js' and etc.
As you said stylex is doing esm support，but i think if it supported we need specify ' optimize.exclude' for vite.

[nmn]

Normally vite do pre build will complete all of dependencies to '.vite' directory

StyleX should be run during this process and then there won't be any problems. StyleX is intentionally designed to be completely cacheable.

Outside of that we're still figuring out the best approach for creating a Vite plugin.

[MtDalPizzol]

Outside of that we're still figuring out the best approach for creating a Vite plugin.

Huge plus one for a Vite plugin! Absolutely loved the approach StyleX took. Congrats on the team. It's really smart. But unfortunately, all of our projects rely on Vite and I'm unable to integrate StyleX on them at moment. I can't wait for this to be available!

[nonzzz]

@MtDalPizzol Have you tried using community plugins?

[MtDalPizzol]

Not yet... I'll give it a try, But I think I'll wait until things are a little more stable. It's not like I have nothing to do in the meantime...

[nmn]

Try the vite plugins mentioned on the ecosystem page. Also take a look at the Qwik example as that uses a custom Vite plugin as well.

The biggest hurdle in making an official Vite plugin at the moment is that Vite can be used in various different ways and it's hard to make a plugin that works in all scenarios. In specific scenarios, one the approaches may work well already.

[MtDalPizzol]

Alright then... I'll give it a spin! Thanks, folks!