HSL-variable interpolation outputs an imprecise color
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 17k
- Forks
- 3.4k
- Avg merge
- 7h 42m
- Merged PRs (30d)
- 26
Description
Hey!
LESS version 3.8.1 introduced outputting HSL color values as authored instead of their HEX counterparts (e.g. hsl(0, 0%, 76%) outputs hsl(0, 0%, 76%) instead of #c2c2c2 now), which is a really cool feature. However, using HSL colors with variable interpolation sometimes (depending on the color parameters) outputs the color slightly imprecisely (and very ugly):
(v3.8.1+)
@color1: hsl(56, 8%, 14%);
@color2: hsl(0, 8%, 1%);
.color-element {
color: ~"@{color1}";
color: ~"@{color2}";
}
expected result:
.color-element {
color: hsl(56, 8%, 14%);
color: hsl(0, 8%, 1%);
}
actual result:
.color-element {
color: hsl(55.99999999999997, 8.00000000000001%, 14.000000000000002%);
color: hsl(8.000000000000004%, 2%);
}
This happens with and without the tilde, obviously.
I'm using two different colors here to demonstrate that not every value is outputted like this, e.g. hsl(0, 8%, 17%) is completely fine - notice here that the values are dependent of the others (with 17% lightness, the 8% saturation is suddenly fine).
However, not using variable interpolation works as expected:
@static-color: hsl(56, 8%, 14%);
.color-static {
color: @static-color;
}
result:
.color-static {
color: hsl(56, 8%, 14%);
}
I have also tried with HSV and RGB, but those ones are still being converted into their HEX counterparts, which is why I'm not sure whether the sudden HSL preservation is a feature.
This is tested using lessc on Windows 10.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the examples with lessc, comparing interpolated HSL values with the static-color case. Trace the HSL color parsing and output path involved in variable interpolation; done means both reported colors compile to the exact authored HSL values without floating-point artifacts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- compilers, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100