Bug: Using opacity as a percentage value in a css file will become 1% in the production build.

[mruiz42]

Using opacity as a percentage value in a css file will become 1% in the production build version, even though in the localhost website it will appear correctly. The way around this is to use a decimal value (ex. 0.95) for opacity.

React version: 16.13.1

Steps To Reproduce

1. Set a css class to have a percentage opacity value (ex. 95%)
2. run npm run-scrips build
3. build version will have incorrect percentage (1%)

code example:

.App {
font-family: sans-serif;
text-align: center;
opacity: 50%;
}

The current behavior

Opacity will change from any percentage value to 1% in app build version.

The expected behavior

Opacity will stay the same percentage in build version.

[gaearon]

A reproducing example, please.

[bvaughn]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. Screenshots or videos can also be helpful if they help provide context on how to repro the bug.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[mruiz42]

Here is the code sandbox, as requested.
https://codesandbox.io/s/trusting-glitter-0icl7
Deployed sandbox: (Where the issue arises, when built.)
https://csb-0icl7.netlify.app/

[bvaughn]

Did you forget to commit CSS to the source sandbox you linked?

What I see is:

.App {
  font-family: sans-serif;
  text-align: center;
}

[mruiz42]

Did you forget to commit CSS to the source sandbox you linked?

What I see is:

.App {
  font-family: sans-serif;
  text-align: center;
}

I guess I forgot to press ctrl+s to save the changes. Should be up now.

[eps1lon]

What a frustrating bug. It originates in react-scripts (reported in facebook/create-react-app#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.

[bvaughn]

Thanks for the investigation and summary, @eps1lon!

Migrated to facebook/create-react-app#9588