[html] Allow navigating to CSS class definitions

[ShashankaNataraj]

Other editors like webstorm, allow the user to click on the CSS class name the same way VSCode allows command + clicking functions / class names to take the user to its definition.

Is this planned? I searched the issues list and didn't find anything like this...

[anjildhamala]

Please make this (+ html) happen. this is the only thing keeping me from moving to vscode from webstorm.

[aeschli]

@zignd @andersea @ecmel This would be a good addition to the IntelliSense for CSS class names, HTML Class Suggestions or HTML CSS Support extensions. They are have an index of all class names and could also offer 'go to declaration'

[andersea]

It would be cool.

One issue that pops into my head right now is, what should we do if the same class name is included multiple times in separate files? I have seen some projects with duplicate versions of bootstrap css files, for example. Which one should we jump to?

HTML Class Suggestions uses file hashing to prevent the same definition being parsed multiple times. It only cares about finding a set of unique class names to present to the user. Right now none of these extensions (as far as I know) store any information about what the source file contains which css classes, because this information is not needed for the extension to do its work.

[anjildhamala]

@andersea You could show a list of all the files where the css class is included and the user would select one. (from webstorm)

[aeschli]

@andersea The definition provider can return a single or mutiple locations (type Definition = Location | Location[];). VSCode will show a selection widget.

[zignd]

The definition provider can return a single or mutiple locations (type Definition = Location | Location[];). VSCode will show a selection widget.

Interesting, I guess that for my extension I will simply store the location in which the class definitions were found in a key-value structure in which the key would be the class name and the value a list of locations. Thanks for the tip @aeschli!