-
-
Notifications
You must be signed in to change notification settings - Fork 327
[Bug]: colormin is lossy, colors in minified builds don't match development #1515
Description
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:
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