Regression: Angular 12.0.1 z-index is getting a # inserted when building for production

[glued]

Bug Report

Affected Package

unknown

Is this a regression?

yes

Yes, the previous version in which this bug was not present was: .... 12.0.0

Description

I have a .scss stylesheet where an element has z-index:999 but when building the application for production, angular converts that to z-index:#999. How? Are you pattern matching against colors? Yes style optimization is turned on in the angular.config

Minimal Reproduction

see above

Exception or Error

see above

Your Environment

Angular Version:

Angular CLI: 12.0.1
Node: 14.17.0
Package Manager: npm 6.14.13
OS: darwin x64

Angular: 12.0.1
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@angular/cdk                    10.2.7
@angular/fire                   6.1.5
@angular/material               10.2.7
@schematics/angular             12.0.1
ng-packagr                      12.0.0
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

 "sass": "^1.22.7",
 

[JoostK]

Please see angular/angular-cli#20870

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}