Usage with Next 13's appDir

[TxHawks]

We tried to use Style9 inside Next's new app dir, and it would seem that mini-css-extract-plugin doesn't extract and inject a css file.

Classes are added to the DOM, so Style9 itself does work.

It also works when adding 'use client' at the top of the layout file.

I didn't have time to dig into it, but does anyone has any idea? @SukkaW are you experiencing the same issue?

[SukkaW]

I have been testing Next.js 13 Layout since its closed beta weeks ago. I have encountered the same problem as well and have reported the issue to the Next.js team already. Also, I have fired an issue after Next.js conf starts, see vercel/next.js#41791

It is not only style9. I even reproduce the issue with css modules.

[TxHawks]

I saw your issue regarding CSS modules, but the problem with Style9 is even wider.

CSS modules work in the server component, the problem is only in client components imported inside a server component.

With Style9, mini-css-extract-plugin doesn't extract styles even in the layout server component.

[SukkaW]

Yes, but the root cause should be the same.

[TxHawks]

I just saw that a fix was merged in Next#42077.

Not next to a computer right now, but will try and check tomorrow if this fixes things for Style9 as well.

[TxHawks]

So, looks like Next#42077 indeed fixed the issue with css-modules and static css files, but Style9 is still broken. In dev mode, a CSS file is generated in .next/static/css/, but is not injected to the page in the browser.

Ran into another issue with running a production build so couldn't check there

[Dwlad90]

Not very well versed in this, but after some research, it would seem that the culprit is that Next uses the afterOptimizeModules or chunkGroups to create the flight-manifest-server that determines which files are injected into the page, while the Style9 Webpack plugin only builds the css file in the processAssets hook, which runs long after.

@johanholmerin @SukkaW any ideas on how to tackle this?

[SukkaW]

Yes, I am considering the same thing. .next/static/css/style9.css is generated and included in Next.js' serverComponentManifest (which is generated by FlightManifestPlugin), but it is not included in Next.js' serverCSSManifest (which is generated by FlightClientEntryPlugin).

[SukkaW]

After close inspection, it is probably not the case.

style9 use compilation.hooks.processAssets to perform the CSS process (using postcss, to sort and merge media queries, etc.). At that time, .next/static/css/style9.css should already exist.

In short, style9 doesn't add the css during compilation.hooks.processAssets.

[Dwlad90]

Hmmm.... Any other ideas?

By the way - this is actually worse now after the change in latest canary and styles aren't injected even when the layout is marked with 'use client'

[SukkaW]

Hmmm.... Any other ideas?

By the way - this is actually worse now after the change in latest canary and styles aren't injected even when the layout is marked with 'use client'

Previously the CSS import does work with client components, but it actually shouldn't. That behavior is caused by an internal implementation detail of Next.js and is subject to change. We should let the Next.js team make CSS imports work in the correct way.

We should probably fire a new issue to Next.js, explains how style9 works (how style9 will transform the source code, how style9 uses virtual modules), and provides a minimum reproduction using style9.