-
-
Notifications
You must be signed in to change notification settings - Fork 320
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: colormin is lossy, colors in minified builds don't match development #1515
Labels
Comments
I see, do you want to send a fix? Should not be hard |
Hey @alexander-akait! Which option do you prefer as the solution?
Or is there another option you would prefer? Once we agree on a solution, I'll provide a PR to fix the issue. Thanks! |
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
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:
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
, convertingrgb(255, 255, 255)
to#fff
, or convertingrgb(255, 0 ,0)
tored
.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
The text was updated successfully, but these errors were encountered: