Support for swc in nextjs

[IshanKBG]

Nextjs 12 uses rust compiler instead of babel now which is a lot of faster as it's written on rust so it would be good if there would be a swc plugin for Vanilla extract so I can use it with nextjs without the babel plugin

[tmm]

Sharing from Discord:

The babel-plugin is optional for all integrations excluding unit tests. You will lose automatic debug IDs in development though which gives you more context on your class names.
If a path open up to be able to implement the babel-plugin in swc and integrate that way we'll also consider that. Either way though vanilla was designed to not need ast manipulation to work which makes us resilient to these kinds of changes.

[markdalgleish]

I updated the setup docs to make this clearer that the Babel plugin is optional with Next.js: https://vanilla-extract.style/documentation/setup/#nextjs

[Dremora]

The plugin seems to be required for testing though (unless I'm misreading the docs). Next.js is also using swc in Jest, which makes it impossible to use the plugin there. Is there any way to keep existing test setup without falling back to babel?

[kwonoj]

I was able to spin some free time to port @vanilla-extract/babel-plugin for the SWC: https://www.npmjs.com/package/swc-plugin-vanilla-extract . To use it in next.js, you may need to wait vercel/next.js#40520 to land though.

It is mostly compatible I believe, except the part setting its file scope identifier from pkg.json / pkg name as SWC's plugin cannot traverse up package.json. It uses cwd / plugin config specified name instead.

If this is something useful, I'd like to discuss making an upstream PR to maintain plugin codes in a single place.

[mattcompiles]

Great work mate, super interesting. 👏

We're actually in the process of embedding the babel plugin inside the webpack-plugin (and other plugins) to remove the external reliance on babel. This should fix the SWC issue in next, however we may look to migrate off babel all together at some point if there's value from a performance perspective. We've also removed the file scope stuff from the babel-plugin btw so you should be free to ignore that if you continue to work on this.

[kwonoj]

My main interest is swc works seamlessly, so if there's an upstream effort removes babel out of the workflow that'll be suffecient I guess.

[Braden1996]

This is fantastic and seems to work with Next 13 (which has moved away from WebPack). The only issue I've found is that vendor prefixes are missing.

I've created a GH issue for this here: kwonoj/swc-plugin-vanilla-extract#5

[samithaf]

@mattcompiles we use SWC to create the library packages instead of Babel since Next team seems to be moving away from Babel as well. Also SWC seems pretty fast.
As far as I know without having a SWC plugin we won't be able to create library package and also won't be able to unit test.

cc. @kwonoj

[josteph]

This breaks on latest release of NextJS (13.2.0), probably due to this changes vercel/next.js#45619.

I suggest to keep using 13.1.6 until it's fixed.