The true-hsl.scss from meduzen

(info) This package and Dart SASS

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:

meduzen / true-hsl.scss Goto Github PK

true-hsl.scss's People

Contributors

Stargazers

Watchers

Forkers

true-hsl.scss's Issues

Guess we will never see HSL() support in node

Document usage in Dart SASS

Add a `@debug` mode

(info) This package and Dart SASS

Migrate to Dart SASS

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs