Opacity resolves to 1% in production build

[mrVanderWel]

🐞 bug report

Affected Package

I am not sure but I guess somewhere in the build process.

Is this a regression?

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

Description

When building the application in production mode an element with an opacity of 95% is rendered as one with an opacity of 1%. In dev mode the opacity remains 95%. This happens when using scss for styling.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-iglae5?file=src%2Findex.html

🔥 Exception or Error

 No warnings or errors are logged or shown.

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.1
Node: 12.8.1
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0 

Also on:

Angular CLI: 9.0.7
Node: 12.8.1
OS: win32 x64

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.7
@angular-devkit/build-angular      0.900.7
@angular-devkit/build-ng-packagr   0.900.7
@angular-devkit/build-optimizer    0.900.7
@angular-devkit/build-webpack      0.900.7
@angular-devkit/core               9.0.7
@angular-devkit/schematics         9.0.7
@angular/cdk                       9.1.3
@angular/material                  9.1.3
@ngtools/webpack                   9.0.7
@schematics/angular                9.0.7
@schematics/update                 0.900.7
ng-packagr                         9.0.3
rxjs                               6.5.4
typescript                         3.7.5
webpack                            4.42.1

Anything else relevant?

[alan-agius4]

Hi @mrVanderWel,

On production build the css optimiser (cssnano) is rounding up the number to 1, which isn't correct. Since 95% is a valid value as per https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

Please contact the author(s) of the cssnano project or file an issue on their issue tracker.

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