CSS variable with built-in color name replaced with color code on build

Bug report

Describe the bug

I have added some css variable using scss map in global css with naming like below:

$colorPalette: (
	red: #ff0000,
	red1: #fa5e56,
	red2: #DA291C,
	red3: #d0021b,
	red4: #4C191B,
        black: #000000
)

:root {
  @each $color, $value in $colorPalette {
    --#{$color}: #{$value};
  }  
}

After building the project, I see variable becomes like below but in dev it works fine:

--red: #ff0000;
--red1: #fa5e56;
--red2: #DA291C;
--red3: #d0021b;
--red4: #4C191B;
--#000: #000;

To Reproduce

Just add a css variable with any builtin color name and build the project.

Expected behavior

After project building variables should remain like below:

--red: #ff0000;
--red1: #fa5e56;
--red2: #DA291C;
--red3: #d0021b;
--red4: #4C191B;
--black: #000;

System information

• OS: Ubuntu 20,4
• Browser (if applies) Any browser
• Version of Next.js: 9.4.4
• Version of Node.js: 12.16.1

[panteliselef]

I believe this has been resolved

$colorPalette: (
        red: #ff0000,
        red1: #fa5e56,
        red2: #DA291C,
        red3: #d0021b,
        red4: #4C191B,
        black: #000000
);

:root {
  @each $color, $value in $colorPalette {
    --#{$color}: #{$value};
  }
}

my package.json

  "dependencies": {
    "next": "12.1.6",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "sass": "^1.49.9",
  },
  "devDependencies": {
    "@types/node": "17.0.39",
    "@types/react": "18.0.0",
    "@types/react-dom": "^18.0.0",
    "typescript": "^4.6.2"
  }

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.