search

SukkaW / style9-webpack

The another Webpack Plugin for Atomic CSS-in-JS implementation style9
https://github.com/johanholmerin/style9
MIT License
19 stars 3 forks source link

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

Open Dwlad90 opened 1 year ago

Dwlad90 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 style9-webpack@0.3.1 or newer, and use style9-webpack/next-appdir (instead of style9-webpack/next) in your Next.js config.

Dwlad90 commented 1 year ago

@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 style9-webpack@0.3.2: https://codesandbox.io/p/github/Dwlad90/elegant-cloud-zckzqc/main

SukkaW commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Dwlad90 commented 1 year ago

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 style9-webpack@0.5.2: 35f4e31

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