Sprinkles not applying in production build with NextJS App Directory

[zackshackleton]

Describe the bug

Once sprinkles reach a certain size, NextJS production builds no longer import the needed CSS files. While running in development mode, everything works great.

I have created a minimal reproduction of the issue. If you go in and comment out any 1 of the sprinkle conditions in ./src/styles/sprinkles.css.ts the production build works correctly.

When the styles are not applied I am seeing the correct classnames in the mark up and the correct css generated in ./.next/static/css/* however the css files are not being loaded.

I made the page and layout client components to avoid any possible issues with Next's server components.

Dev Build:

Production Build:

Reproduction

https://github.com/zackshackleton/sprinkles-nextjs13

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 4.20 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.5 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 112.1.50.121
    Firefox: 111.0.1
    Safari: 16.4
  npmPackages:
    @vanilla-extract/css: ^1.11.0 => 1.11.0
    @vanilla-extract/next-plugin: ^2.1.2 => 2.1.2
    @vanilla-extract/sprinkles: ^1.6.0 => 1.6.0
    @vanilla-extract/webpack-plugin: ^2.2.0 => 2.2.0

Used Package Manager

npm

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.

[prncss-xyz]

Same problem encontered.

[anthony-kirkham]

Same issue encountered also

[zxqx]

Seeing the same issue w/ production build and agree it seems like it's related to how many sprinkles are being extracted.

[adri1wald]

I've been hunting this down for the last couple hours. What I've found is the following:

https://github.com/vercel/next.js/blob/v13.4.2/packages/next/src/server/app-render/get-css-inlined-link-tags.tsx

cssFilesForEntry has all the required css files, but for some reason the chunks set that gets returned does not. Now trying to figure out why that is the case.

It appears the clientReferenceManifest.clientModules is missing the css files. Trying to figure out why.

All chunks are presented in this module entry, but not where they are used:

{
  // ...
  "[REDACTED]/node_modules/@vanilla-extract/webpack-plugin/extracted.js#": {
    "id": "null",
    "name": "default",
    "chunks": [
      "static/css/033cde0f9a29e6bc.css",
      "static/css/d600972155af5d3b.css",
      "static/css/4d065bb72fe1c3b2.css",
      "static/css/81c4a6d5521a7a63.css"
    ]
  }
  // ...
}

[mattcompiles]

This looks like an issue on the Next side. I'd suggest creating an issue on the Next repo. We can keep this open until it's resolved though.

[zackshackleton]

Sounds good, just created an issue over with Next.

[sebpowell]

Just ran into this as well – I believe it's the same issue – locally, I am seeing class names such as sprinkles_paddingLeft_gutter_mobile__3c6yu8e6 in the DOM. In production, this shows up as _3c6yu8e6, but is not linked to any stylesheet.

[z4o4z]

looks like i've found a workaround:

needs to disable splitChunks in the next.config.js:

  {
    webpack: config => {
      config.optimization.splitChunks = false;

      return config;
    },
  }

[sebpowell]

@z4o4z – this worked for me, thank you for sharing!

[jere-co]

@z4o4z Excellent find.

This seems to not be a sprinkles-specific issue, but rather breaks down when the amount of CSS is large enough.

I created a test repository for demonstration.

This commit breaks the build, as does uncommenting any more of the style objects currently commented out in the src/app/styles.css.ts.

Like @z4o4z described, setting the webpack config.optimization.splitChunks in next.config.js to false makes the build work again (latest commit in the above repository).

[z4o4z]

yeah, it looks like the issue is related to mini-css-extract-plugin cause it generates chunks and files. I have an idea in mind how to disable chunks only for CSS, will try and let you know if that works.

[i-bsd]

yeah, it looks like the issue is related to mini-css-extract-plugin cause it generates chunks and files. I have an idea in mind how to disable chunks only for CSS, will try and let you know if that works.

Thanks. The splitChunks workaround works but it's not a solution if it hurts performance causing large bundles.

[vovacodes]

We've run into the same issue, the workaround also works so thanks @z4o4z . Hoping that a long-term fix is landing some time soon

[vovacodes]

Well this workaround has a severe drawback of bloating the size of the lambdas that next creates for your server components, and we actually ran into the limit (50MB❗️) there.

This idea about the fix you had @z4o4z, is it something that we could maybe do locally via the next.config's webpack hook?

[elliotwestlake]

Not sure if this has been fixed but we are using next@13.4.4 and @vanilla-extract/next-plugin@2.1.3 and I have just removed this and all seems to be working fine now!

[QuentinRoy]

It might depend on the size of your css. I just tried again with next@13.4.5 and @vanilla-extract/next-plugin@2.1.3, and no luck..

[zackshackleton]

This issue seems to be resolved with the latest Vanilla Extract and Next builds

[headline-design]

Using the latest Vanilla Extract and Next 14 and it's still a major issue.

[askoufis]

@headline-design Please create a new issue with a reproduction if you're still encountering this issue.