Repository: next.js
Issue: When using App dir, Global CSS seems to get bundled incorrectly
Labels: CSS

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
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):
```js
{
  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:
```tsx
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:
![Screenshot 2023-04-07 at 10 23 55 PM](https://user-images.githubusercontent.com/51345689/230699395-10613107-3d06-49cb-9459-6f8176a407d9.png)

However if i then build the app, and run it the icons are small:
![Screenshot 2023-04-07 at 10 36 34 PM](https://user-images.githubusercontent.com/51345689/230699684-f73ce46d-7dda-4486-a646-c4fafe6e704d.png)

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):
![Screenshot 2023-04-07 at 10 30 38 PM](https://user-images.githubusercontent.com/51345689/230699480-ef9ff66f-aaf2-446a-8956-d86f39eeb437.png)



### 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:
```tsx
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