[css] look for variables in all open documents

[kemerait]

I have 2 .css files. In the first one are 3 root level custom properties --color-1: red; / --color-2: green; and --color-3: blue; in the second .css file I reference them using #myelement { background-color: var(--color-1); } and everything is fine, HOWEVER if I add a second reference, for example { color: var(--color-3);} ,then intellisense no longer shows the 3 variables when I type var(--?), at best it shows only 1 of the 3. If I remove the second reference then it works correctly again. The problem also occurs if I add a second element so maybe #mysecondelement { background-color: var(--color-1);}

File primary.css :root { --color-1: red; --color-2: green; --color-3: blue; }

File secondary.css

myelement {

background-color: var(--color-1); color: var(--color-2); }

Here is a screen recording to show the issue (in the video there is a 3rd .css file, but it is empty and unrelated

https://github.com/microsoft/vscode/assets/172342943/4fe68b93-1ca2-4255-b3fa-b669aa722cfc

A complete removal and reinstall of VS code was performed and there are NO EXTENSIONS

Version: 1.90.0 (user setup) Commit: 89de5a8d4d6205e5b11647eb6a74844ca23d2573 Date: 2024-06-04T19:33:54.889Z Electron: 29.4.0 ElectronBuildId: 9593362 Chromium: 122.0.6261.156 Node.js: 20.9.0 V8: 12.2.281.27-electron.0 OS: Windows_NT x64 10.0.22631

[starball5]

book-keeping note: https://stackoverflow.com/q/78604916/11107541

[aeschli]

What's happening is that when the code completion is invoked the first time, textual proposals are shown as the CSS language server has no proposals. Once there's a color name in the file, the CSS language server shows that color. The textual proposals don't show anymore

• textual proposals uses the contents of all open editors
• the css extension only uses the current document
• the textual proposals are considered a 'fallback' is there's no language server providing any results.

[starball5]

Under what circumstances is this likely to be addressed?

• Without any @imports?
• If the variable-using file @imports the variable-declaring file(s)?
• If some other CSS file @imports them both (or HTML <link>s them both)- the variable-declaring file first?

[kemerait]

aeschli, it doesn't seem to matter what the type of property is...for example if I add a property of --myvalue: 32; and then assign the width: var(--myvalue) and further down try to assign the color: var(--xx); it offers me only --myvalue (an integer) and not one of the color properties. Does this fit within the same explenation?

[aeschli]

Yes, the css extension doesn't know what type the variable is. It just proposes all variable names that it can find in the current document. Following imports is currently not planed. But I can look into looking at the contents of all open editors that show CSS files.

[kemerait]

Thanks very much for looking into the problem. From my perspective it would seem that displaying all of the properites every time would be very beneficial. Without that functionality, it degrades the usefulness of the custom properties. Instead of Intellisense including those choices each time, it forces me to go back to a long list of properties in 1 or more files each time I want to use one. A more sensible way might be to always show all of the textual proposals and then maybe either order by or highlight those that also already exist in the current document, but having them disappear makes no sense and is not useful at all. Thanks again!

[starball5]

I can look into looking at the contents of all open editors that show CSS files

Would this just be for custom properties declared in a rule with the :root selector? That would be the safer option correctness-wise. Even then, it'd be risking wrong suggestions with shadow DOM involved.

[aeschli]

Available variables are only known at runtime, when a rule is matched. Even then it's not wrong to access an undefined variable So proposing all variables found is what we should do.

[kemerait]

I would think it should behave the way it does the first time you use var() ... using it a second or nth time shouldn't change the behaviour, which it now does...consistency is best.