(info) This package and Dart SASS

[meduzen]

My initial plan for this package was to not upgrade it to Dart SASS. But unfortunately, hsl and hsla remain global (despite the existence of a namespaced color module with color.hue(), color.saturate() and color.lightness()) and their behavior is still chaotic.

Current algorithm and examples

Basically, the current result of using hsl and hsla seems to follow this decision tree:

• if there’s one CSS custom property in hsl/hsla, it’s left untouched by SASS;
• otherwise, it does the following:
  • add missing deg to the hue;
  • before SASS 1.52.1: if the hue angle unit is turn or rad, it replaces it by deg without converting;
  • add missing % in saturation and lightness;
  • check the number for the alpha channel:
    • if hsl with alpha channel, replaces hsl by hsla;
    • if hsla without alpha channel, replaces hsla by hsl.

This matches phase 1 of 3 (or 2 of 3 for the hue) in the deprecation plan for color units, leading to these outputs:

.class {

  color: hsla(34deg, 20%, 40%); // ✔ valid
     // `hsl(34deg, 20%, 40%)`

  color: hsla(34, 20%, 40%); // ✔ valid
     // `hsl(34deg, 20%, 40%)`

  color: hsl(34, 35%, 92%, 0.2); // ✔ valid
     // `hsla(34deg, 35%, 92%, 0.2)`

  color: hsla(.5turn, 20%, 40%);
     //  `hsl(180deg, 20%, 40%)` // ✔ valid since SASS 1.52.1
     //  `hsl(1deg, 20%, 40%)` // ❌ invalid, should be `180deg`

  color: hsl(34, 20, 40, var(--some-number, 'aa')); // ❌ invalid, missing `deg` and `%`
     // `hsla(34, 20, 40, var(--some-number, 'aa'))`

  color: hsl(34deg, 20, 40, .8); // ✔ valid, warns about missing `%` (deprecated)
     // `hsla(34deg, 20%, 40%, 0.8)`

  color: hsla(34 35 92); // ✔ valid, warns about missing `%` (deprecated)
     // `hsl(34deg, 35%, 92%)`

  color: hsl(34 35 92 / .5); // ✔ valid, warns about missing `%` (deprecated)
     // `hsla(34deg, 35%, 92%, 0.5)`

  color: hsl(34 35 92 / var(--some-number)); // ❌ invalid, missing `deg` and `%`
     // `hsl(34 35 92/var(--some-number))`
}

For these reasons, this package is (unfortunately) still useful in Dart SASS. No matter the deprecation phase, for now there’s no decent plan for hsl and hsla.

Currently, hsl.scss perfectly works both @import and @use, but its documentation should be improved to reflect the current state of hsl/hsla in SASS.

Related tasks:

• Document usage in Dart SASS #5
• Migrate to Dart SASS #3
• Add a @debug mode #4