CSS - "opacity" percentage values are bundled incorrectly.

[Simill]

Describe the bug

Using a percentage value for the opacity CSS value will work fine in development with HMR, but the minified bundle will incorrectly set all opacity values to 1%.

Did you try recovering your dependencies?

Can reproduce with a fresh CRA app.

Environment

System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Binaries:
Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.9.4 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1038.0
Internet Explorer: 11.0.17134.1
npmPackages:
react: ^16.11.0 => 16.11.0
react-dom: ^16.11.0 => 16.11.0
react-scripts: 3.2.0 => 3.2.0
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. Create a new CRA app.
2. Open App.css and add opacity: 70% to the .App-header class.
3. Run yarn start. Inspect the header element and confirm that the opacity is 70%.
4. Run yarn build. Once the build is finished, open the minified css file in build/static/css. Search for opacity and observe that it is 1%.

Expected behavior

The opacity value should be minified as the same value in the source file.

Actual behavior

The opacity value is 1% no matter what percentage is used.

[tomjohnburton]

I also having this issue

[andriijas]

Seems to be an issue in https://github.com/NMFR/optimize-css-assets-webpack-plugin

At least when I disable that plugin in CRA's webpack config the output stays the same.

Note that percentage support for opacity isn't supported in all browsers https://developer.mozilla.org/en-US/docs/Web/CSS/opacity#Browser_compatibility