34

Im building a Reactjs project and using scss instead of css. In the App.scss file, I set opacity: 87%; (note: unit is percent).

Everything worked normally (the opacity value still equal 87%) when I run command: yarn start

But when I run command: yarn build and check value opacity in the file build/static/css/main.86352307.chunk.css then the opacity value was changed to 1%.

File App.scss:

.App {
  text-align: center;
  opacity: 87%;
}

After build project: File build/static/css/main.86352307.chunk.css

.App{text-align:center;opacity:1%}
/*# sourceMappingURL=main.86352307.chunk.css.map */

Step to reproduce issue

#1. npx create-react-app my-app
#2. cd my-app
#3. yarn add node-sass
#4. rename file App.css to App.scss and then add opacity: 87% in class .App

#Testcase 1: run yarn start => the opacity value (87%) is apply for class .App
#Testcase 2: run yarn build => the opacity value (1%) is apply for class .App

Please tell me know the reason.

Ho Van
  • 341
  • 3
  • 5

2 Answers2

35

This issue has been reported in create-react-app and optimize-css-assets-webpack-plugin.

https://github.com/facebook/create-react-app/issues/7980

https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues/118

It appears the bug has been fixed, but the latest released version does not have the fix. I've fixed the problem by changing my opacity values from nn% to 0.nn values (e.g. 70% becomes 0.7).

Scott Daniel
  • 789
  • 8
  • 12
  • Indeed set percentage to opacity worked in development but in staging environment did not work. I changed 85% to 8.5 and it worked. Thanks for the hint. – Niyongabo May 18 '20 at 03:28
  • This is it. https://caniuse.com/mdn-css_properties_opacity_percentages Using percentages are still not a thing for most browsers. So a lot of web dev plugins haven't bothered to deal with it and we just get unpredictable results. Some work, some don't. Changing to decimal solved for us. – Bestknighter Apr 12 '21 at 14:04
9

I think opacity accepts values in the range 0.0 to 1.0. Any value outside the interval, though valid, is clamped to the nearest limit in the range. In your example the nearest limit is clamped to 1%;

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

Sai Chandra
  • 167
  • 1
  • 7
  • 1
    A in the range 0.0 to 1.0, inclusive, or a in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range. – Ho Van Nov 14 '19 at 10:09
  • In Sass documentation: Percentages in Sass work just like every other unit. They are not interchangeable with decimals, because in CSS decimals and percentages mean different things. – Sang Dang Nov 14 '19 at 10:27
  • If opacity is set to 1%, then it's _not_ clamped, because 1% is between 0 and 1 (or more precisely, clamping the value didn't change it). It just means that if you did something like `opacity: 7;`, then it would be the same as saying `opacity: 1;` because `clamp(0, 7, 1)` would evaluate to 1. Also, apparently using `opacity` with percents isn't supported in all browsers. More info https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() – ChrisCrossCrash May 11 '21 at 19:00