Color completion only displays color squares for hex variables

[allan2]

This issue has appeared before in #63062 and #68269.

When defining variables, color squares appear for all variables sources (hex, RGB, RGBA, string).
When using color completion, only hex gets color squares in the autocomplete option.

[GauravB159]

I have been checking this out and have found a couple issues. Part of this can be fixed in microsoft/vscode-css-languageservice

File: cssCompletion.ts

This function only tests for built-in colors and hex values. Adding another part to it that checks for color functions fixes the two color functions.

Making this change fixed $rgb and $rgba.

However, another fix needs to be made for $string and also a possible variable called $hwb that uses the hwb color function.

File: suggestWidgetRenderer.ts

This function only adds the preview color for elements that have rgb, hsl, or hex codes. It ignores all other values. I am pushing a potential fix that adds an extra condition when the Completion Item Kind is color and the color cannot be extracted using Regex. This would handle cases such as the internal color issue because the CSS Extension can easily determine if the color is an internal color but the main code cannot.

[aeschli]

Marking this as dup of microsoft/vscode-css-languageservice#314