[NEXT-1296] Multi-file CSS import in layout.js is unpredictable

[nabtron]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:53:44 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T8103
    Binaries:
      Node: 20.2.0
      npm: 9.6.6
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.6-canary.0
      eslint-config-next: 13.4.5
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/nabtron/nextjs-css-sequence-bug-01

To Reproduce

Deploy this code on vercel.
Works fine on first deploy.
Then make a small change (add a semicolon or remove it in layout.js on any line).
wait for auto redeploy
The last css file goes missing.
check here: https://nextjs-css-sequence-bug-01.vercel.app/

I saw similar error in another project where the sequence of the css files is auto changed by nextjs too.

Describe the Bug

The css handing of multiple files linked in layout.js (in same directory) is buggy in production mode (works fine in dev mode)

The added repo link is new and clean nextjs project with only multiple css files added.

Sometimes it misses the last file, sometimes it changes their sequence.

Also, how can we ensure the sequence of css files?

Expected Behavior

Files should load in their own sequence.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

on vercel.org

_NEXT-1296

[dingram94]

We have a smiliar issue. In src/app/layout.tsx we are importing two css files. At first the css from a ui lib out of the node_modules directory and second a global next css file. In dev everything works fine, in production the order of the imports are different and the next css overrides the ui lib css.

[nabtron]

@cptcrank94 does it happen when you import those css files from public/ folder? i did that and it worked for now, but should be fixed in app folder too

[dingram94]

@nabtron we cant import the css from the ui from the public folder because we need to import it via node_modules.

[shuding]

There's a significant change landed in #51018 which fixes many CSS related problems (I think including this one as well). Could you upgrade to the latest version and verify again? Thanks.

[nabtron]

@shuding no, still having same issue, even with 13.4.7-canary.1

[manishoctal]

The same issue, right now, latest version of today. even I am having this issue now on local env as well. Is there any fix for that?

[filingroove]

I have similar issue. For me no CSS loads at all

This is all I do in app/layout.tsx and it works in next dev and some sort of css bundles ass seen in app-build-manifest.json

import 'reset-css';
import 'rc-tooltip/assets/bootstrap_white.css';
import '../css/index.css';

Then, when build and deployed, only styled-components css is inlined and no css is loaded on page or linked to the page

[kotAPI]

Can confirm this is a bug from nextjs