[nextjs] Support Turbopack

[bestickley]

Summary

When using next dev --turbo, I get the error: Error: @pigment-css/react: You were trying to call "css" function without configuring your bundler. because withPigment from @pigment-css/nextjs-plugin works by adding a webpack plugin which is not supported yet by Turbopack as stated in their docs: Will we be able to use webpack plugins?.

Examples

N/A

Motivation

I want to benefit from dev server performance improvements of Turbopack while using @pigment-css/react

Search keywords: pigment, turbopack

[bestickley]

One possible way forward today would be to implement the current webpack plugin via a loader as those are supported in turbopack. However, I'm guessing the APIs that are needed for @pigment-css/nextjs-plugin to do it's transformations are beyond the scope of a loader but I hope I'm wrong.

[joshwcomeau]

++ — I believe the issue is that there's a downstream dependency, wyw-in-js, which needs to be updated. It's tracked here: Anber/wyw-in-js#53

But 100% agree, turbopack support would likely be a big perf / DX win.

[brijeshb42]

I believe the issue is that there's a downstream dependency, wyw-in-js, which needs to be updated

That's actually not the case for the bundler plugins. Our Next and Vite implementations are independent of WyW (though Vite is mostly same). So we have more control over the changes. The issue is that Turbopack integration in Next does not support loaders that return CSS which is essential for Pigment to function.

[gurkerl83]

In the long term, especially for large projects this could be crucial. For a current project, I've transitioned to using Ark and Panda, which offer functionality similar to Pigment-CSS. With these frameworks, using turbopack is feasible.

It might be beneficial to invest some time in understanding how they enable this feature. Additionally, I've found the creators of these frameworks to be exceptionally supportive and informative.

I did a bit of research and it seems Panda does not rely on webpack at all.

@brijeshb42 Another thing what might be worth explaining is the dependency to either wyw-in-js and / or linaria used by the pigment thingy. In the code there are several references with the word linaria used, which system is now in use can someone explain please.

Thx!

[brijeshb42]

@gurkerl83 We are definitely aware of these libraries and would have already implemented the required changes if they were implementing that is specific to turbopack. Panda specifically is only a postcss plugin in simplest terms.

In case of Pigment CSS, we do in-place source code transformation as well as css generation/injection. As of right now, turbopack does not allow loaders to inject css but we are already following its updates and whenever we are able to do so, we'll update the nextjs plugin to support turbopack. It's only a matter of time.

As for Linaria/WyW-in-JS, both terms can be used interchangeably as early versions of Linaria were both a CSS-in-JS library and a framework to build upon other library. We'll modify the code to remove this confusion.