[Bug]: colormin is lossy, colors in minified builds don't match development

[adamwathan]

Describe the bug

Right now when you minify certain color syntaxes, cssnano converts them to a different color format, for example RGB values are often converted to HSL:

/* Input */
html {
  background-color: rgb(143 101 98 / 43%);
}

/* Output */
html {
  background-color: hsla(4, 19%, 47%, .43);
}

But because the HSL values are rounded to whole numbers for the saturation and lightness channel, this is a lossy conversion — only 100 values can be represented compared to the 256 that are possible in RGB channels.

When converting the HSL value above back to RGB, it's not the same:

  html {
-   background-color: rgb(143 101 98 / 43%);
+   background-color: rgb(143 100 97 / 43%);
    /*                          ^  ^      */
  }

This issue is most noticeable when working on sites that need to share colors between the actual UI and image assets, where you can often see a seam between the image and the browser rendered UI where the colors aren't an exact match.

Expected behaviour

Colors should only be minified when it can be done in a way that guarantees no information is lost, for example converting #ffaaff to #faf, converting rgb(255, 255, 255) to #fff, or converting rgb(255, 0 ,0) to red.

Another option is to convert with higher precision, so we don't round to whole numbers and instead preserve the fractional elements. I feel like this didn't used to work but my testing now seems to show this working in modern browsers.

Alternatively, colormin could be disabled in the default preset and only enabled in the advanced preset where there are other unsafe optimizations.

Steps to reproduce

See reproduction in cssnano playground:

https://cssnano.co/playground/#eyJpbnB1dCI6Imh0bWwge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMTQzIDEwMSA5OCAvIDQzJSk7XG59IiwiY29uZmlnIjoiY3NzbmFuby1wcmVzZXQtZGVmYXVsdCJ9

Version

6.0.1

Preset

default

Environment

N/A, occurs in cssnano playground.

Package details

N/A, occurs in cssnano playground.

Additional context

No response

[alexander-akait]

I see, do you want to send a fix? Should not be hard

[RobinMalfait]

Hey @alexander-akait!

Which option do you prefer as the solution?

1. Convert the color without losing information. One way we can do this is by converting the color, then converting it back and checking if it is the same color. This could potentially be slow if it works for 99% of colors you use, but not for the other 1%.
2. Including the decimal points in HSLA would ensure the result is not lossy, but since cssnano is using another package for this (colord) we would have to patch this upstream. Then wait for a release and then bump it here.
3. Move the colormin to the advanced preset and remove it from the default preset.

Or is there another option you would prefer? Once we agree on a solution, I'll provide a PR to fix the issue. Thanks!

[ludofischer]

The best would be to send a PR to colord. A likely fix might be voiding to round on this line: https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/colord.ts#L89