Named colors used in hyphenated variable names show preview

[jeremydeckard]

When using known color names as part of a variable name, the color preview is applied incorrectly

To Reproduce

Given:

$hcis-blue: #517ab0;
$hcis-dark-blue: #015eab;
$hcis-green: rgb(139, 187, 66);
$hcis-pink: rgb(216, 73, 124);
$hcis-yellow: rgb(255, 195, 37);

$primary: $hcis-blue;
$danger: $hcis-yellow;

$dark-gray: #5c5c5c;

Produces:

Potential fix

Changing the regular expression to include a non-capturing prefix, e.g. (?<=.*:.*)(...existing expression...), will match only the values on the right side of the colon.

Matches using existing regular expression:

blue
#517ab0
blue
#015eab
green
rgb(139, 187, 66)
pink
rgb(216, 73, 124)
yellow
rgb(255, 195, 37)
blue
yellow
gray
#5c5c5c

Matches with suggestion applied:

#517ab0
#015eab
rgb(139, 187, 66)
rgb(216, 73, 124)
rgb(255, 195, 37)
#5c5c5c

These will work as well.

Given:

--orange: purple

span {
border: 1px solid red;
}

Produces:

purple
red

Known issue

Given:

span.outline {
border: 1px solid red;

::after {
    content: 'pink';
    color: blue;
}

}

Produces:

red
pink
blue

Expected behavior would be to omit 'pink' since it's not a color.

[jcackowskidiagram]

This is still an issue if you define a variable with a variable.

Example:

$color-blue: $color-different-🟦blue;

[stamminator]

Issue still taking place

[stamminator]

Confirmed fixed in v1.0.9 👍