-
Notifications
You must be signed in to change notification settings - Fork 309
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vite plugin #47
Comments
I encountered the same issue and put together a vite plugin based on the rollup plugin implementation: https://github.com/HorusGoul/vite-plugin-stylex Install it with // ... other imports
import styleX from "vite-plugin-stylex";
export default defineConfig({
plugins: [react(), styleX()],
}); I haven't tried more complex use cases like SSR yet, but I guess we can add support for those as needed by users (already thinking of trying this with the new Remix Vite plugin) Question for maintainers: Is there a plan for an official Vite plugin? Or is this expected to be covered by the community using lower-level plugins like the Babel one? Thanks! |
Unplugin could be interesting to consider, since it would allow only maintaining one implementation: https://github.com/unjs/unplugin |
I think it would be easier to implement based on the rollup version than to switch to unplugin :) |
We do want to support an official Vite plugin, but we want it to support "complex use cases like SSR" as well. This is important to us as many Vite projects like Remix, Qwik, Astro or the upcoming Solid-Start won't ship some components to the browser at all. Even in development. We want our Vite plugin to work for these scenarios. Perhaps our Rollup plugin can be enhanced to work in the simpler case with Vite as well? |
@nmn I'm interested in this. I can create a pull request until the test case be passed in my local. |
So does this mean I can't spin up a project using Vite, and start using this simply straight away? |
Depends on the complexity of the setup you're using, for example, my unofficial plugin doesn't support Astro or Qwik yet, but it works with a basic create vite app that uses React (SPA) or even Remix using the unstable vite template. |
@HorusGoul, I am currently experimenting with In dev mode there is a duplication of styles with built-in styles from vite. In the production build, the > vite build && vite build --ssr
vite v5.0.6 building for production...
⚠️ Remix support for Vite is unstable
and not recommended for production
✓ 70 modules transformed.
public/build/.vite/manifest.json 0.89 kB │ gzip: 0.27 kB
public/build/assets/root-I-XxiNSD.css 0.45 kB │ gzip: 0.28 kB
public/build/assets/stylex.cdf3995e.css 2.84 kB │ gzip: 1.18 kB
public/build/assets/root-VHjyehqh.js 1.37 kB │ gzip: 0.81 kB
public/build/assets/jsx-runtime-NroC4D4D.js 8.09 kB │ gzip: 3.05 kB
public/build/assets/entry.client-Zz46Ypws.js 9.51 kB │ gzip: 3.73 kB
public/build/assets/_index-VynOg2Ww.js 11.95 kB │ gzip: 4.49 kB
public/build/assets/components-WD7OCPmZ.js 211.54 kB │ gzip: 68.46 kB
✓ built in 650ms
vite v5.0.6 building SSR bundle for production...
⚠️ Remix support for Vite is unstable
and not recommended for production
1:07:08 PM [vite] page reload virtual:stylex.css
1:07:08 PM [vite] page reload virtual:stylex.css (x2)
1:07:08 PM [vite] page reload virtual:stylex.css (x3)
✓ 14 modules transformed.
1:07:08 PM [vite] page reload virtual:stylex.css
1:07:08 PM [vite] page reload virtual:stylex.css (x2)
build/.vite/manifest.json 0.18 kB
build/assets/_virtual_server-entry-Whtg1KgZ.css 0.47 kB
build/assets/stylex.cdf3995e.css 2.84 kB
build/index.js 12.16 kB
✓ built in 171ms |
I worked with a team member from Qwik.js and have a Vite plugin working with it. https://github.com/nmn/qwik-stylex Important things to note:
|
On my end, I'm going to try and it make it work with SvelteKit. |
Any upates. I created a repo to record the progress of the vite plugin. https://github.com/nonzzz/vite-plugin-stylex CheckList
It's work well for those demo. But i can't balance some designs like should we need fileName option? AFAK. vite can already handle css internally. So we only set a virtual module for eacth entry is enough. |
I have a Vite plugin that's working with Qwik and Svelte on my end that doesn't rely on renderChunk etc. I worked on people from the Qwik team and got it to work. It worked in Svelte without many tweaks. https://github.com/nmn/sveltekit-stylex It shouldn't need a |
@nmn, is there any time frame when we can expect an official adapter for Vite? Thx |
@predaytor You're welcome to use the one from https://github.com/nmn/sveltekit-stylex if you want. Other than that, I don't have any timelines for you. When I feel confident in an implementation, we will add it to the repo. Don't let stop you from using it in the meantime. |
Anyone interested in using StyleX in Vue3? I've tried @HorusGoul 's vite plugin and although it compiles without error, I couldn't get it to work. Are there gonna be official support for all major frameworks in the future? |
@berkgulmus see #154 . I have implemented a version and am currently preparing unit tests and e2e tests. |
NUXT 3 + Vite usage example: https://stackblitz.com/edit/nuxt-3-vite-stylex btw, as inspired by this finding: https://github.com/JakeSaterlay/stylex-playground/blob/main/vite.config.ts |
@HorusGoul's solution works for vite |
@HorusGoul solution works, rollup-plugin however throws the Unexpected token on Vite |
I haven't had time to look at the implementation of the Vite plugin by @HorusGoul but people have been generally happy with it. Once we verify that it works in all the scenarios we care about, we can start recommending it officially. The community can do a better job at this than us trying to understand the idiosyncrasies of each bundler! |
I tried @HorusGoul's I'm sure this comment won't be relevant long term but it's worth stating that if Stylex doesn't work with one plugin doesn't mean that it doesn't work in general. Like @nmn said, bundlers and dev servers are very idiosyncratic said so just try a few. I'm sure they'll all converge on working solutions anyway. |
@zaydek I've experienced it too. I figured it's because it doesn't set the path correctly in the HTML. Check vite-plugin-stylex#28 |
@zaydek @movahhedi Did you try the using the plugin as written in the Qwik and Svelte examples I shared above?
I don't want to publish an official package until I can verify that this approach works in a wide range scenarios. Vite is so popular that it is used in many different ways. However, since the approach works in Qwik which has many of the same characteristics as RSCs I'm hopeful it can work in most cases. |
I used However, since I updated StyleX to v0.4.1, I am getting the following error: Trying to use the official |
@nmn Is your Vite plugin implementation published to NPM, even as a beta or alpha release? You can release the version namespaced with alpha or beta or canary if you like. I'd be happy to give feedback on that. I'm just using React (CSR style) but I am using Vite. Alternatively do you have a React example I should install from GitHub instead? |
I think maybe esm cause it.I am currently looking for a better way to balance between multiple frameworks |
I will test esm after this weekend. |
Just wanted to say thanks. Your plugin has been working nearly perfectly for me. |
Not yet. I'm testing a few more frameworks before I do this.
I don't have a React example, you should be able to copy the setup from the Qwik example to try it with a React app. |
Yes, can try once I start a project tabula rasa that uses Stylex. |
@zaydek A friendly ping i release |
@nmn I tried to create a repro using React based on the Qwik directory you shared but I crashed and burned pretty quickly. Here is the rerpo repo: https://github.com/zaydek/experimental-vite-stylex-official. It's very possible I did something wrong but I tried to take the Qwik code base and just make the necesarry changes to React, nothing else.
|
@nonzzz Thank you! Still no problems. I've been succesfully ship two project so far using Stylex and vite-plugin-stylex-dev. I think you may have fixed the problem where the stylesheet doesn't load initially (seems to happen once when I start working on a project, then goes away indefinitely) because I can't reproduce it anymore. |
Oh. Ok. This is interesting. Will look into it. This is a bug with the ESM export from StyleX where it's refusing to respect imports without file extensions. |
Thanks OK. @nmn few observations: When upgrading all Stylex-related packages to Packages upgraded in question:
(I also made sure to remove node_modules and package-lock.json and do a fresh install to make sure there's no dependency caching.) So I went into the
One I did that both npx vite dev and npx vite build && npx vite preview (production mode) started working. There was one thing I noticed in the production console logs: You can ignore the locator stuff that's a Chrome plugin. To sanity check I opened it in Incognito mode and I see the same error. And if I click on where So it looks like it's very close to working without caveats, the naunces being the Tailwind thing (which doesn't seem necesarry for this plugin) and the superfluous console error which doesn't prevent the styles from being applied. Let me know when you want me to test again. The reference repo is up to date with this comment as of now. Here's the vite.config.ts file for reference:
|
This has already been removed the The You can remove the
This is the main thing I needed right now, since I'm trying to make the neccessary changes to StyleX itself. Thanks for the confirmation. I will go ahead with the StyleX changes and will revisit the Vite plugin to fix the |
I think vite plugin don't need inject style logic because vite has own hmr logic so we only keep them work it's enough, The most of thing is esm package should be work fine. By the way order is unnecessary. Normally |
@johnsonav1992 try with this import: import * as stylex from '@stylexjs/stylex'; idk why but using the named export doesn't work with the plugin |
Both |
@nmn @HorusGoul Yep, that worked! I do find it odd that they aren't allowing a named export but I'm assuming it's because of stuff under the hood that doesn't allow everything to work properly. Thanks again! |
@nmn Let's close this old issue. I don't think we'll develop or maintain more bundler plugins |
Vite is already the go-to for many. It's sad that we can't use Stylex. Webpack is like WordPress: old, boring, but widespread. |
This thread is full of options to use stylex with vite. The plugin just won't be maintained out of this repo, and anyone who is experienced with developing vite plugins can integrate the stylex transform |
Closing this issue for now as the recommendation is to use one of the two community Vite plugins. We might work on a Vite plugin eventually, but we have higher priority tasks to tackle in the short and medium term. |
It would be nice to have a Vite plugin. I tried the rollup plugin with a fresh React + Vite and got an error:
Error:
Edit: Cleaned up the fresh project;
dev
now runs successfully. However, runningbuild
leads to a different error.:The text was updated successfully, but these errors were encountered: