Go To Definition for CSS

[swyxio]

just helping to pick up issues from #83

go to definition

• go to definition from class in template to css
• go to definition from class in template moustache tags like class to css
• go to definition from css to template

i have no knowledge of how to do this but happy to give it a try

[dummdidumm]

Here are my quick thoughts about it:

General things

This is the interface DefinitionsProvider (method name is getDefinitions). It gets a position (line, column) of the current cursor position from which the definition info has to be computed.

I would leave out the "class in template moustache tags" (class="{bla ? 'class1' : 'class2'}") out for now and first see if the solution works out well.

From template to css

Step 1 - get name at position

Option 1: Use the svelte compiler/parser output. The AST contains info about where classes are used I think. Drawback: Will not work if the code is in a state where svelte parser will throw an error.
Option 2: Do some kind of backwards regex matching like "is there a class=" to the left of me? If yes, get full name".

Step 2 - Find name in css

Don't know if we can leverage the existing CSS language service inside CSSPlugin here, I don't think it provides such methods. So a regex might have to do it. After that, the target position has to be computed from the match.

From css to template

Step 1 - get name at position

I think the CSS language service inside CSSPlugin can help us here with nodeAtPosition or sth like that.

Step 2 - find name in template

Option 1: traverse svelte compiler/parser AST
Option 2: Regex or parse5

Architectural considerations

• Where to put this? This functionality is crossing borders a little. Best place to me seems CSSPlugin.
• If we use the svelte compiler, we get the problem that currently that is used only inside SveltePlugin. So that would need to get extracted one level up into the Document so other plugins can use that, too.

[swyxio]

thanks for the great thoughts - this seems a bit bigger than i can handle right now i think. i may hunt around for something smaller to try tackling, maybe someone else can tackle this (or me in future)

[ampcpmgp]

I would like this feature very much!
CSS Peek didn't do it for me.

(by DeepL translation)

[Jojoshua]

Linking #1518

[LexRiver]

I don't know why, but for me moving style tag to custom css or scss file works for me.
In bottom of MyComponent.svelte:

<style lang="scss">
    @import './MyComponent.scss';
</style>

Now I can navigate from svelte file on class="my-style" to definition of css class in scss file by go to definition (F12) in vscode.

[IcyFoxe]

Any progress on this? In Vue I found this feature very helpful.