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 (callstack/linaria#888). In fact, we need something similar in Rollup/Vite:

griffel/packages/webpack-loader/src/webpackLoader.ts

Lines 69 to 80 in b4c7acc

	// ⚠ "this._compilation" limits loaders compatibility, however there seems to be no other way to access Webpack's
	// resolver.
	// There is this.resolve(), but it's asynchronous. Another option is to read the webpack.config.js, but it won't work
	// for programmatic usage. This API is used by many loaders/plugins, so hope we're safe for a while
	const resolveOptionsFromWebpackConfig: webpack.ResolveOptions = this._compilation?.options.resolve || {};
	const resolveSync = enhancedResolve.create.sync({
	...resolveOptionsDefaults,
	alias: resolveOptionsFromWebpackConfig.alias,
	modules: resolveOptionsFromWebpackConfig.modules,
	plugins: resolveOptionsFromWebpackConfig.plugins,
	});

[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 💣

griffel/packages/webpack-loader/src/webpackLoader.ts

Lines 92 to 93 in b4c7acc

	Module._resolveFilename = (id, { filename }) => {
	const resolvedPath = resolveSync(path.dirname(filename), id);

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, callstack/linaria#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 (Anber/wyw-in-js#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).