Color completion not previewing colors when non-hex variables are present

[allan2]

This issue is related to #166197 but diferent. That issue is for color completion only showing for hex variables and not for other types like RGB, RGBA, or string.

This one is for color completion not previewing colors at all, including for hex variables, under certain conditions.

Issue Description

When non-hex variables are present, the color square and color code sometimes don't show up in the autocomplete suggestions.

Example code is here https://github.com/allan2/vs-code-css-color-issue
Tested on VS Code October 2022 with extensions disabled.

Issue in detail

This bug occurs when there are variables of mixed sources, such as hex and RGB. Notice how the color square and color code are present in the beginning when $ is typed, but missing in the end when we type $. (Note that there is also an autocompletion that occurs when the colon is typed, more on that later)

Backspacing resets the list so that the squares are displayed again.

I noticed this when copying and pasting color: . This suggests that the autocompletion on colon insertion is also related to this bug.

No bug when variables are hex-only.

Additional comments

This issue is about what happens when the variable is completed. The last character typed would be $.

But could it be more useful earlier? After typing the property color, this is what happens:

A colon is inputted. The result:

A lot is shown, and this makes sense to do so.

A space is inputted. The result:

Could I suggest that variables also be shown in this list? And that the $ would filter to the list of variables?

[vscodenpa]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[vscodenpa]

🙂 This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!