less / less/less.js

HSL-variable interpolation outputs an imprecise color

Open
#3,383 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug low priority
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.