Opacity Converted to 1%

[mousedownmike]

🐞 Bug report

Command (mark with an x)

• build
• serve

Is this a regression?

I have gone back to 10.1.3 and the problem exists there.

Description

A clear and concise description of the problem...

When SCSS opacity values are provided as percentages they are always converted to 1% when run the cli runs with --prod.

🔬 Minimal Reproduction

1. ng new opacity-bug --style scss
2. Replace the app.component.html and app.component.scss values with the example below.
3. Run ng serve --prod

app.component.html

<div class="toolbar"></div>

app.component.scss

.toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #1976d2;
  opacity: 80%;
}

🔥 Exception or Error

Inspect the .toolbar style in the browser and observe:

.toolbar[_ngcontent-sja-c0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #1976d2;
    opacity: 1%;
}

This issue does not appear when running in development mode (e.g. ng serve)

🌍 Your Environment

Angular CLI: 11.2.1
Node: 12.20.2
OS: linux x64

Angular: 11.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.1
@angular-devkit/build-angular   0.1102.1
@angular-devkit/core            11.2.1
@angular-devkit/schematics      11.2.1
@angular/cli                    11.2.1
@schematics/angular             11.2.1
@schematics/update              0.1102.1
rxjs                            6.6.3

Anything else relevant?

Using opacity: .8 fixes the problem

[mousedownmike]

This appears to be a cssnano problem:
cssnano/cssnano#957

[alan-agius4]

Indeed this is a CSSNano problem which is not actionable by the Angular CLI.

Duplicate of #17516

[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.}