Linaria support for the app directory (client and server components ✨)

[dlehmhus]

next-with-linaria

I created a new package/webpack config that allows you to use the css-in-js library linaria inside the app directory, for client and server components. If anybody wants to take it for a spin, feedback is greatly appreciated. 🤓

[juanferreras]

@dlehmhus many thanks for your work! I'm curious how far from the official @linaria/webpack5-loader you needed to work.

There's been some small but promising initiatives such as callstack/linaria#1045 to bring in better support into the linaria project itself, given that next-linaria is unmaintained.

Would you mind opening an issue in https://github.com/callstack/linaria to discuss to see if the maintainer would welcome that?

As runtime CSS-in-JS is fundamentally incompatible with RSC (as in, styles outside of client components), linaria would be amongst the easiest paths for existing folks to migrate away if they wanted to.

[dlehmhus]

hey @juanferreras, I'm very glad you like it.

The main issue with the app directory feature of next.js is that I doesn’t work with webpack inline loaders. Unfortunately that’s what @linaria/webpack5-loader is based on. My implementation uses webpack-virtual-modules to create “fake” CSS Modules. So the spirit of both loaders is the same, but they work totally different. The inline loader approach is with no doubt the preferred one, but as I mentioned, is not working for the new next.js features.

At the moment I wouldn’t feel comfortable adding this to the callstack/linaria repo, since this would make it too official. There is way more going than in next-linaria and I really want to make sure this approach actually scales. But once I have a good feeling about that, I definitely would be open to the idea!