Migrate postcss-lab-function

[romainmenke]

• converted to typescript
• inlined the color conversion
• added unit tests for the color conversion

---

inlined the color conversion

The current color conversion is not perfect, neither is the conversion in https://github.com/csstools/postcss-lab-function

This conversion tries to match https://facelessuser.github.io/coloraide/
As this packages was suggested as a reference in current spec work.
They try to implement the CSS spec in python.

Once out of gamut color handling is fully specced we should rework the color conversion.
Inlining the functions makes it possible to do this locally without needing to introduce breaking changes in https://www.npmjs.com/package/@csstools/convert-colors

Ideally convert-colors would one day be brought up to speed too.
But I want to avoid getting stuck here because that package is much bigger than what we require for lab and lch

---

fixes lch hue values with units : csstools/postcss-lab-function#12

This was a small fix.
Just added a check for the unit of the last value and the conversion for the value.

---

fixes CSS variables : csstools/postcss-lab-function#11

:root {
  --firebrick-a50-var: lch(40% 68.8 34.5 / var(--opacity-50));
}

:root {
  --firebrick-a50-var: rgba(179, 34, 35, var(--opacity-50));
}

@supports (color: lab(0% 0 0)) and (color: lch(0% 0 0)) {
  :root {
    --firebrick-a50-var: lch(40% 68.8 34.5 / var(--opacity-50));
  }
}

---

fixes rounding of rgb values : csstools/postcss-lab-function#10

I tested this in browsers and they also round the rgb() values.

color: rgb(1.123, 32.234, 5.50)

window.getComputedStyle(foo).color -> rgb(1, 32, 6)

[Antonio-Laguna]

Does this round up or down? Floor or ceil? I'm worried about the tests updates

[romainmenke]

Does this round up or down? Floor or ceil? I'm worried about the tests updates

It uses Math.round based on what browsers currently do.

document.documentElement.style="color: rgb(0, 0, 0.49)";
console.log(window.getComputedStyle(document.documentElement).color);
// rgb(0, 0, 0)
console.log(Math.round(0.49));
// 0

document.documentElement.style="color: rgb(0, 0, 0.50)";
console.log(window.getComputedStyle(document.documentElement).color);
// rgb(0, 0, 1)
console.log(Math.round(0.50));
// 1

document.documentElement.style="color: rgb(0, 0, 0.51)";
console.log(window.getComputedStyle(document.documentElement).color);
// rgb(0, 0, 1)
console.log(Math.round(0.51));
// 1

[Antonio-Laguna]

Nice work! This is very thorough