Percentage opacities in CSS files will compile to "1%" in a production build

[bvaughn]

Originally reported by @mruiz42: facebook/react#19747

• Source code: https://codesandbox.io/s/trusting-glitter-0icl7
• Deployed sandbox: https://csb-0icl7.netlify.app/

Recap of the problem, courtesy of @eps1lon:

What a frustrating bug. It originates in react-scripts (reported in #7980). It seems like the underlying fix wasn't propagated. If you go further down you find NMFR/optimize-css-assets-webpack-plugin#118 and cssnano/cssnano#881.

I'd suggest tracking down which package didn't publish the fix by upgrading their relevant dependencies.

Maybe @gaearon can move this issue to create-react-app. Otherwise we should file a new bug report with create-react-app and close it here.

[jrr]

To anyone else that hits this, you might be interested in a stylelint rule to prohibit percentage-based opacity:

https://stylelint.io/user-guide/rules/alpha-value-notation