Sprinkles not applying in production build with NextJS App Directory

zackshackleton commented 1 year ago

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

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

prncss-xyz commented 1 year ago

Same problem encontered.

anthony-kirkham commented 1 year ago

Same issue encountered also

zxqx commented 1 year ago

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

adri1wald commented 1 year ago

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

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

Sounds good, just created an issue over with Next.

sebpowell commented 1 year ago

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

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

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

jere-co commented 1 year ago

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

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

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

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

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

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!