The value of opacity in less was been modified by cssnano if I specificied the value in percent form

[yanyu0517]

I had declared the opacity in percent form that maybe not a standard, and got the modification of value after processed by cssnano. Just like below picture

98% changed to 1%

[yanyu0517]

The reason for this issue has been located by my workmate.
The 55th line of cssnano/packages/postcss-convert-values/src/index.js
is the point. If the opacity is declared in percent form like 98%, the content of pair object may like this:

{
    number: 98,
    unit: '%',
}

pair.number is greater than 1 and the node.value would be assigned 1%

[anikethsaha]

seems like a bug. it should be

if a number is greater than 1
then it should be converted to a percentage of 1

like (number/100) * 1

opacities range from 0-1 so if the number is greater than one. convert it with respect to 1.

or even if we can do with respect to the unit. if it's mentioned as % then simply pass it as it is. no need for any conversion the browser will take care of it.

[alexander-akait]

@anikethsaha feel free to send a PR with fix

[alexander-akait]

It is invalid syntax, please fix your code, invalid syntax is not allowed for minification

[redeyes2015]

Just in case anyone like me bumping into this issue in the future: #881 have fixed this, but there is no release including it, yet, as of 2020/4/20. For now, if you need cssnano, replace the percentage syntax is the easiest option.

In CSS color 3, percentage for opacity is allowed, but CSS color 4 will make this sytnax (opacity: 98%) valid:

• https://www.w3.org/TR/css-color-4/#transparency
• https://www.w3.org/TR/css-color-4/#typedef-alpha-value

And Chrome and Firefox seem to support it already; a short experiment also shows they do support percentage syntax of opacity.

[parzibyte]

Well, just to clarify. If you are specifying the opacity in percentage like this:

img{
opacity: 70%;
}

Change it to:

img{
opacity: 0.7;
}

And it will work like a charm!