When developing with Next.js, css is not generated

[Karibash]

Describe the bug

When a page transition is made on the Next.js development server, the css of the destination page is not generated.
Reproduced with version 2.2.1 of @vanilla-extract/next-plugin, lowering the version to 2.1.3 makes it work correctly.

Reproduction

https://stackblitz.com/edit/stackblitz-starters-dcvpht

System Info

System:
    OS: macOS 13.4.1
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 1.16 GB / 32.00 GB
    Shell: 3.6.1 - /usr/local/bin/fish
  Binaries:
    Node: 18.16.0 - ~/.local/share/nvm/v18.16.0/bin/node
    npm: 9.5.1 - ~/.local/share/nvm/v18.16.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.248
    Firefox: 81.0.2
    Safari: 16.5.2

Used Package Manager

pnpm

Logs

No response

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[edenstrom]

I've been looking into this a bit. It only happens between navigation in the pages directory. Navigating in the app directory works perfectly. Also navigating from a route in app to a route in pages and vice versa.

One more thing is that HMR doesn't work either.

1. Go to home
2. Change index.css.js (CSS is updated)
3. Navigate to other
4. Change other.css.js (CSS is not updated)
5. Refresh
6. CSS is loaded and HMR works again

No solution in sight though. Trying to debug further.

Possible culprit? #1105

EDIT 2: This patch works for us for now with only pages. Not well tested at all, and would not recommend merging it. 😅

diff --git a/dist/vanilla-extract-next-plugin.cjs.dev.js b/dist/vanilla-extract-next-plugin.cjs.dev.js
index 0f6ca91fc7cdc332b5274d54993830782366093c..1f61384b80f726b5870bf3a581501a7e99e29c58 100644
--- a/dist/vanilla-extract-next-plugin.cjs.dev.js
+++ b/dist/vanilla-extract-next-plugin.cjs.dev.js
@@ -8,6 +8,7 @@ var css = require('next/dist/build/webpack/config/blocks/css');
 var findPagesDir = require('next/dist/lib/find-pages-dir');
 var fileResolve = require('next/dist/build/webpack/config/blocks/css/loaders/file-resolve');
 var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
+var {getGlobalCssLoader} = require('next/dist/build/webpack/config/blocks/css/loaders');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -97,10 +98,23 @@ const createVanillaExtractPlugin = (pluginOptions = {}) => (nextConfig = {}) =>
     const cssRules = config.module.rules.find(rule => Array.isArray(rule.oneOf) && rule.oneOf.some(({
       test
     }) => typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
+    const postcss = () => css.lazyPostCSS(options.dir, getSupportedBrowsers(options.dir, options.dev), undefined);
     cssRules.unshift({
       test: /\.vanilla\.css$/i,
       sideEffects: true,
-      use: getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
+      use: dev ? getGlobalCssLoader(
+        {
+          assetPrefix: config.assetPrefix,
+          isClient: !isServer,
+          isServer,
+          isDevelopment: dev,
+          future: resolvedNextConfig.future || {},
+          experimental: resolvedNextConfig.experimental || {},
+          // @ts-ignore -- 'appDir' config is in beta
+          hasAppDir: false,
+        },
+        postcss,
+        []) : getVanillaExtractCssLoaders(options, resolvedNextConfig.assetPrefix)
     });
 
     // vanilla-extract need to emit the css file on both server and client, both during the

[hazzo]

Same here, pls fix this :)

[syfxlin]

The cause of the problem is that @vanilla-extract/next-plugin removed the next-style-loader from #1105. However, using the next- style-loader may cause inconsistent order between the development and production CSS outputs. I'm not sure if it can be added back.

[IwannabeRealnerD]

I had exactly same issue. - On page directory, css was not generated on HTML(development server)

I downgraded @vanilla-extract/next-plugin to 2.1.2(it was 2.3.1) and it's working fine.
Build result is also working fine.

NextJS - 13.3.4
@vanilla-extract/css - 1.13.0

[huypham50]

Same issue, hopefully #1203 fixes this

"next": "^14.0.4"
"@vanilla-extract/css": "^1.13.0"
"@vanilla-extract/next-plugin": "^2.1.2"

[askoufis]

I tested @vanilla-extract/next-plugin@2.4.0 in your reproduction and it has fixed the issue.

[takahiro-1227]

I upgraded to 2.4.0, but this issue is still happened.

[askoufis]

@takahiro-1227 Could you please raise a separate issue with a minimal reproduction.