[nextjs] Support Turbopack about pigment-css HOT 7 OPEN

@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.

from pigment-css.

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.

from pigment-css.

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.

from pigment-css.

++ — 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.

from pigment-css.

Closing as duplicate of mui/material-ui#41416

from pigment-css.

@brijeshb42 I'm reversing the duplicates. While this one is more recent, it has already more engagement.

from pigment-css.

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!

from pigment-css.