First attempt to support Next.js 13 appDir

[SukkaW]

cc @TxHawks @Dwlad90

Would you like to try the patch to see if it works?

Note the appDir might still not work, but the current pages is not affected (the behavior is retained, thus it is fully backward compatible).

See also:

• https://github.com/vanilla-extract-css/vanilla-extract/issues/929
• https://github.com/vercel/next.js/pull/43916
• https://github.com/vercel/next.js/issues/44266

[SukkaW]

After digging a little into Next.js and webpack-virtual-modules, it turns out that Next.js just doesn't work well with webpack-virtual-modules. And that's why it doesn't work on Next.js 13 appDir.

I have started another project style9-webpack, re-implements style9's webpack plugin without using webpack-virtual-modules.

@TxHawks @Dwlad90 would you like to give style9-webpack a shot?

@johanholmerin I am really willing to port my style9-webpack implementation back to style9, but:

• I am unfamiliar with webpack inline loader syntax, so I am having trouble implementing the inlineLoader option of Style9Plugin.loader.
• The virtualFileLoader approach used in style9-webpack is simple and has less overhead than webpack-virtual-modules, but it might be a little bit slower as virtualFileLoader does extra serialization.

[johanholmerin]

If your new plugin works better I'd be happy to integrate it. As for the inline loaders, it consists of the name of the loader, followed by an question mark and options, an exclamation mark, and then the normal path, e.g. loader-name?{options}!./file.css. Here's the best documentation I could find on it: https://webpack.js.org/concepts/loaders/#inline

[SukkaW]

If your new plugin works better I'd be happy to integrate it.

It does work for me.

As for the inline loaders, it consists of the name of the loader, followed by an question mark and options, an exclamation mark, and then the normal path, e.g. loader-name?{options}!./file.css. Here's the best documentation I could find on it: https://webpack.js.org/concepts/loaders/#inline

https://github.com/SukkaW/style9-webpack/blob/a069a46b14dcf3f8c4e20cf04ca851584199b6e8/src/loader.ts#L69-L74

Because I am not familiar with inline loader syntax, I don't know where to put inlineLoader (where css-loader and MiniExtractPlugin.loader would be). Is it right after !=! or is it after virtualResourceLoader?

[SukkaW]

I am closing this PR now, because:

• webpack-virtual-modules is working for everyone except Next.js appDir users.
  • That's to say, if you only use Next.js' pages dir (without appDir), webpack-virtual-modules still works for you.
  • Next.js appDir not only can't work with webpack-virtual-modules, but also has some internal implementation quirk (Currently, it will drop all inline loaders when collecting styles in the Server Component, see https://github.com/SukkaW/style9-webpack/issues/1 for more information).
  • Although I am able to work around it (https://github.com/SukkaW/style9-webpack/commit/045ca4c6a28f93ceabfda05d87ca6d6af57a7561), I don't feel like introducing those dirty hacks in style9's codebase.

I will continue doing some experiments in my style9-webpack repo, and then I will open other PRs to backport some of the features/optimizations.