Show variable color with alternative method of defining HSL colors

[mdollde]

The color swatch works fine with your extension. But If you define HSL colors like this

my-element {
--gray-3-hsl: 210 14% 89%;

color: hsl(var(--gray-3-hsl));
background-color: hsl(var(--gray-3-hsl) / 30%);
}

than the color is not shown. The method has the advantage that you can use the Alpha channel very easily without defining further variables.

Do you think it's possible to make the color swatch work with this method of defining css variables for hsl colors?

[phoenisx]

This is a nice feature to add to the extension.

Thanks for opening the PR.

This will be fixed in next release 👍

[phoenisx]

This will be fixed as part of v1.3.0 release.

The following example now generates a proper parsed color for a CSS color function.

:root {
  --gray-3-hsl: 210 14% 89%;
}

body {
  --gray-3-hsl-solid: hsl(var(--gray-3-hsl));
  --gray-3-hsl-translucent: hsl(var(--gray-3-hsl) / 30%);
}

.element {
  color: var(--gray-3-hsl-solid);
  background-color: var(--gray-3-hsl-translucent);
}

Keep in mind that directly accessing a non color variable won't work.

:root {
  --gray-3-hsl: 210 14% 89%;
}

.element {
  /* This won't parse the colors, as the variable points to a non-color value */
  color: hsl(var(--gray-3-hsl));
  background-color: hsl(var(--gray-3-hsl) / 30%);
}

Thanks for your support, and please do raise a bug if you face any issue 👍🏾