Would you prefer if React CSS modules enables Code lens and Peek References features

[Viijay-Kr]

Dear Community members ,

I have been thinking of introducing of some CSS language features namely Code lens and Peek references for selectors

• Reference Information
  • Demo
• Code lens
  • Demo

The above two features has been prototyped and being experimented in this PR

I have definitely experienced the need for the above features when working with large react projects that involves a huge deal of selectors which are modular . A quick action to find the usages of the selectors is super helpful to perform any further refactoring.

However the current prototype I have drafted comes with a performance hiccup both run time and memory. I have tried to optimize it as much as possible but still not ready to ship it without optimizing further and provide a zero cost solution.
In order to do that, I first need your inputs and suggestions to proceed with those features.

So answering the questions will be helpful to proceed any further

1. Do you see the any value from these features ?
2. Do you absolutely need them or can live without them ?

If you have come across this thread on your spare time , do throw in your feedback. It will be helpful for me to take a decision and spend further time on it
cc: @karlhorky @strlns

[karlhorky]

These would be great! 😍

Personally, I would gladly pay a small performance penalty for the Peek Reference feature. If it slowed down my editor too much, I would disable it (hopefully there would be a way to disable)

I would personally disable the CodeLens version, since I disable all CodeLens decorations in my editor - I like having a consistent line height.

[Viijay-Kr]

@karlhorky Thanks for taking the time to respond. I agree with you about code lens . It definitely gives a bothering experience at times .

I will try to ship Reference Feature soon since you have showed interest in that . I could only hope that it brings the same value to our users :)

[Viijay-Kr]

References and Code lens feature is out with v2.6.0

[karlhorky]

Oh, I found two ways to do it (these actions can also be assigned to keyboard shortcuts):

1. cmd-shift-P -> Peek References
2. Right click -> Peek -> Peek References (or right click -> Go to References)

Would be cool to get the cmd-click option as well, if possible!

[karlhorky]

Interesting, maybe this cmd-click is actually "Go to Definition" (more info below), which currently doesn't work as an action:

So maybe if a definition is contributed by the extension, then the cmd-click would also work 🤔

Reference about "Go to Definition":

The Go To Definition and Open Link mouse gestures will adapt such that they do not conflict with the multicursor modifier.

Source: https://stackoverflow.com/a/57446936/1268612

[Viijay-Kr]

@karlhorky Actually I'm not quite sure about how to accomplish this using language providers ? My bet is actually registering a definition provider for css language and get the references for the range. Feel free to open a issue if you can

Also I sorta agree with you that cmd+click would be greatly useful than doing Peek references.

[Viijay-Kr]

@karlhorky After digging a bit about how typescript documents support this feature . Turns out you have an option to assign an alternate command for go to definition . This is set as peek references in my settings.json so when a symbol doesn't yield any go to definition , the peek references command is executed . Unfortunately this doesn't apply/doesn't work in css documents. So I presume this is an issue with vs code rather than this extension as VS code doesn't have builtin cross language support.

Edit: Although Go to definition works when the cursor is at the beginning of a selector

Screen.Recording.2024-04-25.at.11.33.48.mov

So it works partially but not completely . Registering go to definition is a dirty workaround

[karlhorky]

@Viijay-Kr thanks for investigating! Do you think this issue is relevant?

• [html][css] Investigate cross css/html, multi file support microsoft/vscode#47331

If it is, does it make sense for you to explain the use case over there in case the VS Code team would be willing to consider it?