Repository: next.js
Issue: In-JavaScript `import`s of SCSS files re-ordered, resulting in bundled `@import` not being first in chunk
Labels: bug

### Link to the code that reproduces this issue or a replay of the bug

https://github.com/JoelDSmith/next-bundling-bug

### To Reproduce

1. Clone this repository
2. Execute `npm install`
3. Execute `npm run build`
4. Execute `npm run start`
5. Navigate to [`http://localhost:3000`]
6. _Observe that one of the two documented issues have occurred_ (in both cases, the font rendered will be incorrect)
7. Repeat steps 3 through 6 until the other documented issue has occurred

[`http://localhost:3000`]: http://localhost:3000

### Current vs. Expected behavior

_Indicator: when this issue is reproduced with the reproduction repository, the rendered text will be red._

Sometimes, bundling results in a change of ordering of SCSS files `import`ed from within JavaScript. This is problematic
when the first SCSS file has one or more `@import` lines, but it ends up not being at the beginning of the chunk, which
violates the CSS specification.

For this reproduction, the transpiled and bundled output of the styling under [`src/app/lib`] ends up sometimes being:

[//]: # (@formatter:off)
```css
:root {
  --validation:#be1a06
}
@import"https://fonts.googleapis.com/css2?family=Roboto+Condensed"
```
[//]: # (@formatter:on)

Screenshot additionally showing relevant CSS warning in the browser console:

![import re-ordering issue generated output](https://github.com/JoelDSmith/next-bundling-bug/raw/main/resources/2.1.generated.png "Import re-ordering issue generated output")

Screenshot showing the rendered page:

![import re-ordering issue render](https://github.com/JoelDSmith/next-bundling-bug/raw/main/resources/2.2.render.png "Import re-ordering issue render")

Screenshot showing the expected rendering:

![expected page render](https://github.com/JoelDSmith/next-bundling-bug/raw/main/resources/0.1.expected.png "Expected page render")

[`src/app/lib`]: https://github.com/JoelDSmith/next-bundling-bug/blob/main/src/app/lib

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Education
Binaries:
  Node: 18.12.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 13.4.20-canary.16
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A
```


### Which area(s) are affected? (Select all that apply)

Not sure

### Additional context

The reproduction repository reproduces two bugs with Next.js + SCSS bundling when creating an optimised production build (bugs are not present when running in dev mode). Configuring swcMinify: false does not make a difference.

Only one bug manifests at a time, seemingly at random; rebuilding and re-running the production server repeatedly results in different outcomes.

These bugs have been replicated using this repository with both version 13.4.19 and version 13.4.20-canary.16 of Next.js. The first bug has been reproduced using a private repository with version 13.4.7, version 13.4.12, and version 13.4.19 of Next.js.

Ticket for the other bug: https://github.com/vercel/next.js/issues/54999