next.js: CssSyntaxError in obscure cases when using SCSS and assetPrefix is set

What version of Next.js are you using?

10.0.5

What version of Node.js are you using?

15.6.0

What browser are you using?

What operating system are you using?

Linux

How are you deploying your application?

Describe the Bug

Weird error with postcss, only when using assetPrefix.

Expected Behavior

No error

To Reproduce

You will need the following files:

.
├── next.config.js
├── package.json
└── src
    ├── assets
    │   └── test.png
    └── pages
        ├── index.jsx
        └── styles.module.scss

next.config.js:

module.exports = {
        assetPrefix: "https://example.com/",
};

package.json:

{
	"name": "test-nextjs-bug",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start"
	},
	"dependencies": {
		"next": "10.0.5",
		"react": "^17.0.1",
		"react-dom": "^17.0.1",
		"sass": "^1.32.4"
	}
}

src/pages/index.jsx:

import styles from "./styles.module.scss";
const IndexPage = () => <div className={styles.test} />;
export default IndexPage;

styles.module.scss:

.test {
	background: center / auto, url(../test.png);
}

Anything in src/test.png.

Run yarn build

The build fails when webpack tries to run postcss on the scss in question:

yarn run v1.22.10
$ next build
info  - Creating an optimized production build  
Failed to compile.

CssSyntaxError: <css input>:2:1: Unclosed bracket
  1 | .test {
> 2 |   background: center / auto, url(../test.png);
    | ^
  3 | }
  4 | 


> Build error occurred
Error: > Build failed because of webpack errors

Notes:

• The issue happens regardless of whether we’re using an SCSS module, or a global SCSS file.
• The issue happens regardless of newlines/indentation in the SCSS file.
• The issue does not happen if we use plain CSS files instead of SCSS.
• The issue does not happen if we change ../test.png to /test.png.

While debugging this, I found issue postcss/postcss-scss#84 which was fixed in 2018, and triggers the same error in a suspiciously similar part of the code. Here is some relevant code which fixed the issue back then and it’s uncertain if it’s triggering it again.

I’ve been unable to completely reduce the css property from the original I triggered the bug with. It seems first slash in center / auto before the url() is required to trigger it. I can’t quite tell if background: center / auto, url(../test.png); is actually the exact input we are feeding to postcss.

Why file this issue here instead of in postcss?

I’ve not been able to reproduce the issue using postcss directly yet, and it’s almost 6.30 am. My main concern is that this only triggers when assetPrefix is set to a URL. The fact it says CssSyntaxError: <css input>:2:1: Unclosed bracket tells me NextJS may be doing some post-processing of the input iff assetPrefix is set. Furthermore, NextJS is using inlined versions of postcss in various places and I suspect it could be a bug in one of those.