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

[Dwlad90]

Maintainer Edits/Notes:

For those who want to use style9 in Next.js 13's appDir + Server Components, use style9-webpack/next-appdir instead of style9-webpack/next for now.

For those who want to know why style9 might not work with Next.js 13's appDir, check out https://github.com/SukkaW/style9-webpack#motivation and https://github.com/SukkaW/style9-webpack/issues/1#issuecomment-1406730266

---

The plugin seems to work great with client components in the app dir, but not in server components.

Here is a very basic reproduction: https://codesandbox.io/p/sandbox/ew8bdq

Can you spot anything wrong with our setup?

From the testing we've done, it would seem like Style9 itself works fine. If a server component uses a class that is also used in a client component (e.g., both use color: green;), the server component has the correct class and is painted green. However, if the server component uses a style that isn't used in any client component, say color: gold;, it will have a class on it that does not exist in the extracted css file.

[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:~~

~~- https://github.com/vanilla-extract-css/vanilla-extract/issues/929~~ ~~- https://github.com/vanilla-extract-css/vanilla-extract/issues/929#issuecomment-1338310803~~

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]

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

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]

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]: https://github.com/SukkaW/style9-webpack/commit/35f4e3115308dc2dd98ff3a07f8cd8ddbeb80b53

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