Repository: next.js
Issue: Trailing semicolon (`;`) stripped before bundling, breaking `@import` and following bundled rule
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 black until manually "fixed"._

It looks like a trailing semicolon (`;`) in SCSS files is stripped as part of transpilation of SCSS to CSS, before bundling occurs. For standalone files, this makes sense, as the trailing semicolon is optional. However, it doesn't make sense when these files are about to be bundled, because then they are no longer "standalone".

For the reproduction repository, the transpiled and bundled output of the styling under [`src/app/lib`] ends up being:

[//]: # (@formatter:off)
```css
@import"https://fonts.googleapis.com/css2?family=Roboto+Condensed"
:root{--validation:#be1a06}
```
[//]: # (@formatter:on)

Screenshot additionally showing relevant CSS warnings in the browser console:

![trailing semicolon issue generated output](https://github.com/JoelDSmith/next-bundling-bug/raw/main/resources/1.1.generated.png "Trailing semicolon issue generated output")

Screenshot showing the rendered page:

![trailing semicolon issue render](https://github.com/JoelDSmith/next-bundling-bug/raw/main/resources/1.2.render.png "Trailing semicolon issue render")

Simply manually re-adding the missing semicolon at the end of the `@import` line will fix the styling:

[//]: # (@formatter:off)
```css
@import"https://fonts.googleapis.com/css2?family=Roboto+Condensed";
:root{--validation:#be1a06}
```
[//]: # (@formatter:on)

![trailing semicolon issue manual fix](https://github.com/JoelDSmith/next-bundling-bug/raw/main/resources/1.3.manual-fix.png "Trailing semicolon issue manual fix")

![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/55000