vite: Add plugin for Vite

[zoontek]

Hello 👋

This project seems very promising! Do you have plan to support Vite with a custom plugin?

Documentation: https://vitejs.dev/guide/api-plugin.html vanilla-extract plugin (for reference): https://github.com/seek-oss/vanilla-extract/tree/master/packages/vite-plugin

[layershifter]

Hey, yes we plan to have more integrations with bundlers and frameworks. Having Vite plugin is something that we want.

The implementation should be similar to the existing Webpack loader: call Babel and reuse bundler's module resolution. I haven't checked Vite docs yet and don't know what APIs are exposed, but it should it be doable.

[zoontek]

Yes, it's doable! @vitejs/plugin-vue-jsx does exactly that: https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx

[layershifter]

The closest example/reference for us is @linaria/rollup, but it has the problem that I mentioned (https://github.com/callstack/linaria/issues/888). In fact, we need something similar in Rollup/Vite:

https://github.com/microsoft/griffel/blob/b4c7acc77e5e7b4883ca32249418a3d93dc43e77/packages/webpack-loader/src/webpackLoader.ts#L69-L80

[layershifter]

Okay, it seems that this.resolve() in Rollup is close to what we need 😸

[layershifter]

Okay, it seems that this.resolve() in Rollup is close to what we need 😸

FYI: I've made some progress on it and it almost works.

The problem is that in Module._resolveFilename we should have only sync code (it's used in require() overrides) while this.resolve() in Rollup is async 💣

https://github.com/microsoft/griffel/blob/b4c7acc77e5e7b4883ca32249418a3d93dc43e77/packages/webpack-loader/src/webpackLoader.ts#L92-L93

I will think how we can workaround this 🤔

[zoontek]

I will check when I have some time 🙂

[layershifter]

I will check when I have some time 🙂

@zoontek thanks. ~~FYI: I will cleanup my branch and will post as a draft PR on the next week.~~

EDIT: PR is posted #41, packages/vite-plugin/src/vitePlugin.ts contains a comment about problematic place:

[layershifter]

There is some work in Linaria that could help with that, https://github.com/callstack/linaria/pull/1001. Looking forward to it 🐱

[SahilTara]

Just wanted to bump on this issue since the linaria pr linked seems to have been merged.

[layershifter]

@SahilTara indeed, but we will need to move to Linaria v4 first (#184).

[vamsiampolu]

Any update on the vite plugin?

[layershifter]

Any update on the vite plugin?

As wyw-in-js is out, I can rollout the plugin finally 🎉

I reworked original PR (#41) and it can be shipped once the issue will be fixed (https://github.com/Anber/wyw-in-js/issues/27). As @Anber will be offline for some time, I expect that we will be able to ship it after NY.

[layershifter]

FYI #41 was merged and plugin will be available on NPM today. It does not support CSS extraction, yet (#494).