[html][css] Investigate cross css/html, multi file support

[aeschli]

Approach:

• merge HTML & CSS servers to avoid cross LSP communication
• in the server build an (in-memory) index of for the contents of css and html files in the current folder

Benefits:
In HTML

• code completion in 'class' attributes using the collected class names (same for ids)
• goto & peek references on 'class' attributes (same for ids)

In CSS/LESS/SCSS

• code completion for class names based on already used class names in HTML and CSS (same for ids)
• goto & peek references on 'class' attributes (same for ids)
• code completion for variables defined in other css files

[Kcko]

"code completion for variables defined in other css files" ¨
is it possible to extend this behavior by scss/less lang?

[rsheptolut]

Do you think this will also allow:

• A "rename class" refactoring: simply press F2 to rename class and all its uses (from within CSS / SCSS or HTML);
• And a feature to show css rules as "grayed out" if they're not used anywhere?

This, along with the better IntelliSense, will allow CSS to become more like other programming languages, where we rely on this sort of help from the IDE. To not break the app, these two will of course require imposing certain limitations on the project to work with these names statically (like what happened in the JS world with methods and modules, to be able to do tree-shaking on them). May even be useful to limit this to only work within a component (as in, an Angular component). Anyway, if used right this can be huge for increasing maintainability of your styles, and will put vscode even further ahead of the game.

[andrecasal]

For convenience, here's all possible use cases.

CSS IntelliSense within HTML files

DESTINATION	SOURCE	SUPPORTED	COMMENTS
ID attributes	Style tag	NO
ID attributes	External CSS files	NO
Class attributes	Other class attributes	NO	Not sure if useful
Class attributes	Style tag	NO	Check extension below
Class attributes	External CSS files	NO	Check extension below
Style tag	ID attributes	NO
Style tag	Class attributes	NO
Style tag	IDs from style tag	NO
Style tag	Classes from style tag	YES
Style tag	External CSS files	NO	Check extension below

The suggested extension in the comments column, caches CSS classes in your repository coming from any CSS or HTML file in your repository. Even though this is better than nothing, it does pollute your suggestion box with CSS classes your HTML doesn't link to and doesn't show IDs.

CSS IntelliSense within CSS files

DESTINATION	SOURCE	SUPPORTED
ID selectors	Other ID selectors in the CSS file	NO
ID selectors	Imported CSS files	NO
ID selectors	HTML files that link to this CSS file	NO
Class selectors	Other class selectors	YES
Class selectors	Imported CSS files	NO
Class selectors	HTML files that link to this CSS file	NO

[zitup]

may be can try this https://marketplace.visualstudio.com/items?itemName=zitup.classnametocss

[archteck]

I believe this is a must-have.
I think VS Code is a editor for Web Dev (not only for WebDev but without extension it is), so this a must!
Please implement this feature

[onetrev]

I think providing support for cross css/scss/html, multi file support would also solve this issue at the same time. Note, it also has quite a few more votes than this issue. #28459

[diegovogel]

Please, I want this so bad. This extension did exactly this and worked great for a while but now it's buggy and seems to be abandoned. We need this to be native in VS Code 🙏

[onetrev]

Hey @diegovogel ... Agreed this really should be added. But for now I have found this extension does what the one you are having trouble with, and does a whole lot more.

[diegovogel]

Thanks @onetrev! That works beautifully so far. I've seen countless posts about this same issue where people suggest other extensions that only do autocomplete of classes in HTML, not the other way around. I thought this was another one of those but it pulls from HTML to CSS as well 🎉

[NoelAbrahams]

@aeschli We've spend two days evaluating all available extensions for simple Sass support and none of them work. I'm essentially talking about referencing variables and mixins defined in another file, imported via @import.

VS2022 has had support for Go-to-definition for sass files for a number of years.

VSCode is failing quite badly on this.