When using App dir, Global CSS seems to get bundled incorrectly

[SamuelQuinones]

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.3.0: Mon Jan 30 20:38:43 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T8112
    Binaries:
      Node: 16.18.0
      npm: 8.19.2
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.3
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0

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

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/SamuelQuinones/samtheq.com/tree/main

To Reproduce

Using the above repository

1. Update src/app/layout.tsx to import @fortawesome/fontawesome-svg-core/styles.css directly, making sure to put it above import "../styles/globals.css";
2. remove the import "../styles/fa.css"; line
3. If Possible, seed a database with prisma
4. if that is not possible, in the src/app/experience/page.tsx file, just have getExperienceItems return the following (so you can see data):

{
  lastUpdated: 2022-10-10T02:54:46.000Z,
  error: false,
  experienceItems: [
    {
      ID: 3,
      description: 'Incognito but reversed',
      start_date: 2022-04-02T00:00:00.000Z,
      end_date: null,
      signifier: 'Super User',
      place: 'Cognito Inc',
      exp_type: 'work',
      additional_info: []
    },
    {
      ID: 2,
      description: 'Created fake data for demos',
      start_date: 2022-01-02T00:00:00.000Z,
      end_date: 2022-04-01T00:00:00.000Z,
      signifier: 'Super User',
      place: 'Not Real Inc.',
      exp_type: 'work',
      additional_info: []
    },
    {
      ID: 5,
      description: 'Made Keyboards',
      start_date: 2021-02-04T00:00:00.000Z,
      end_date: null,
      signifier: 'Bachelors in Design',
      place: 'MKB College',
      exp_type: 'education',
      additional_info: [Array]
    },
    {
      ID: 1,
      description: 'Came up with a fake company',
      start_date: 2021-01-01T00:00:00.000Z,
      end_date: 2020-01-01T00:00:00.000Z,
      signifier: 'CEO',
      place: 'Fake Company LLC',
      exp_type: 'work',
      additional_info: [Array]
    },
    {
      ID: 4,
      description: 'Took latin courses',
      start_date: 2019-01-01T00:00:00.000Z,
      end_date: 2019-12-31T00:00:00.000Z,
      signifier: 'Masters In Latin',
      place: 'Lorem Ipsum University',
      exp_type: 'education',
      additional_info: [Array]
    }
  ]
}

5. Build the app
6. Run the app using npm run start

Describe the Bug

When importing styles from node_modules and local styles as global styles, import order is preserved in development.

Given the following imports in my root layout file:

import "@fortawesome/fontawesome-svg-core/styles.css";
import "../styles/globals.css";

Using the provided repo, if I navigate to my experience page, notice the size of the icons:

However if i then build the app, and run it the icons are small:

Looking at the Dev tools, it looks like even though my fontawesome import is first - and should therefore be overwritten by the tailwind rule that sets the height and width as it does in development) for some reason when bundling, the css order gets mixed up (this is the prod screenshot):

Expected Behavior

Css order should be consistent across all environments. It is also worth noting that this does not seem to happen when using the pages folder and an _app.tsx file.

I am able to get around it by using the trick you see in the repo which is to import that node_modules css file into another css file, and then importing that globally as well like so:

import "../styles/fa.css";
import "../styles/globals.css";

Which browser are you using? (if relevant)

Chrome, FireFox, Safari

How are you deploying your application? (if relevant)

next start

[WoLfulus]

I'm seeing this while in development. I'm not sure, but seems like the hot reload reorders the css somehow, causing styles to break randomly.

[philwolstenholme]

Might be the same issue as #48807 or #47585

[SamuelQuinones]

Might be the same issue as #48807 or #47585

I don't believe it is the same issue as #48807 as hot reloading itself works fine, and things work as expected in development.

I can't say for certain if its the same as #47585 as I am not using link tags for my css, I'm importing them directly into the file.

The big issue here is that for me things work completely fine in dev, and issues occur in prod

[Frikki]

I believe this is a #47585 issue.

[SamuelQuinones]

An update: This is still happening as of the most recent release

[switz]

I'm still seeing this even on 13.4.5-canary.8

yup, I have the following css imports in my root app layout

import 'npm_module/dist/index.css';
import '../styles/local.css';
import '../styles/local2.css';
import 'npm_module2/dist/other.css';

the two npm modules are combined and moved after the 2 local css files, which are combined themselves.

I'm using pnpm if that affects anything, did not see this issue when using yarn.

[jwalcher]

I'm experiencing this kind of random ordering of global CSS in 13.5.2. Is this still an issue for anyone, or is there another thread with up-to-date discussion?

[avarayr]

I am experiencing this issue which causes random full-page reloads because HMR (incorrectly) thinks CSS module hashes change between unrelated file changes.