Styles extraction doesn't work in server components (Workaround Available~! See comments)

[sukkaw]

Styles extraction doesn't work in server components (Workaround Available~! See comments)

[SukkaW]

Thank you so much, the new version of the plugin works perfectly with both components (Server and Client).

Thanks for your feedback!

In the meantime, I will keep the issue open. Once Next.js has fixed that part of its internal implementation, I will add a deprecation/removal warning in style9-webpack/next-appdir (to inform users to switch back to style9-webpack/next), and then I will close the issue.

[Dwlad90]

@SukkaW
Thank you so much, the new version of plugin works perfectly with both components (Server and Client).

Here is a very basic reproduction with [email protected]:
https://codesandbox.io/p/github/Dwlad90/elegant-cloud-zckzqc/main

[SukkaW]

@Dwlad90

Would you like to try the following patch to see if it works? (only the patch for next is needed).

https://gist.github.com/bizarre/825cab8224c28e93ff1a3933642f9271

Contexts:

- vanilla-extract-css/vanilla-extract#929
- vanilla-extract-css/vanilla-extract#929 (comment)

Never mind, the patch doesn't work, and the issue might not be related to Next.js.

Would you like to share your reproduction to a GitHub repo? I might want to try it out locally.

---

Update

It looks like the server components' styles never get extracted and collected.

---

Update

I am not sure, but it seems like Next.js just somehow gets rid of the virtualFileLoader when processing style9 generated CSS on the server side,

[SukkaW]

@Dwlad90

After discussing with @shuding (Next.js Team Member), he is able to pinpoint where Next.js drop all the loaders:

https://github.com/vercel/next.js/blob/3a9bfe60d228fc2fd8fe65b76d49a0d21df4ecc7/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L425-L429

Here, only path and query are passed down, and all loaders are ignored.

In the meantime, I am creating a workaround for this. I have created a workaround. You can upgrade to [email protected] or newer, and use style9-webpack/next-appdir (instead of style9-webpack/next) in your Next.js config.

[Dwlad90]

Hey @SukkaW,
CSS extraction on server components stopped working in the NextJS version @(13.5.4).
Could you please check what happened?

Here is a basic reproduction:
https://codesandbox.io/p/github/Dwlad90/elegant-cloud-zckzqc/draft/goofy-dawn

Update:
It works fine with the latest version of style9-webpack (0.5.2), thanks.

[SukkaW]

Could you please check what happened?

Update:
It works fine with the latest version of style9-webpack (0.5.2), thanks.

Actually, the issue should have happened since Next.js 13.4.19, when Next.js removes the experimental.appDir (appDir is now enabled by default).

Here is the related fix that has landed in [email protected]: 35f4e31

[Dwlad90]

Could you please check what happened?

Update:
It works fine with the latest version of style9-webpack (0.5.2), thanks.

Actually, the issue should have happened since Next.js 13.4.19, when Next.js removes the experimental.appDir (appDir is now enabled by default).

Here is the related change that has landed in [email protected]: 35f4e31

This actually happened after updating Next JS from "13.4.19" to "13.5.4". The previous version didn't have this problem.