CTRL/CMD + Clicking Non-Existent Classes Should Navigate to CSS File

[jwalkerinterpres]

Is your feature request related to a problem? Please describe.

It's really annoying when I make a new file, add a class to it in my JSX, and then go to add the corresponding CSS: I have to manually navigate to the CSS file (despite having this great extension installed).

Describe the solution you'd like

When you CTRL/CMD + click on css.iDontExistYet VS Code should open the matching CSS file, instead of doing nothing at all.

I would argue that it should do so even if that CSS file doesn't exist, because when you navigate to a non-existent file in VS Code, the app gives you the option to create that file (which of course is exactly what you want to do when you just made a JSX file, and now need to add it's CSS).

If the file does exist (but the class doesn't) the user should be taken to the top/bottom of that file. I'd vote the bottom, since you're more likely to want to add a new class to the end of a CSS file than the start.

This feels like it would be an upgrade for 100% of users: I can't think of anyone who would say "I want this extension to do nothing when it could do something useful, like take me to the file" ... but if such a person exists, this behavior could be guarded by a setting. Again though, I really doubt that is necessary.

Describe alternatives you've considered

The only alternative is to manually navigate to the file, either through VS Code's navigation options, or by CTRL/CMD + clicking on another class (that does exist in the CSS) elsewhere in your JSX.

Additional context

I don't know anything at all about VS Code extensions, but I'd be happy to help with this in any way I can be useful. I'd even be willing to submit a PR for the feature, but I would need a lot of "hand holding" direction on what code is where.

[Viijay-Kr]

@jwalkerinterpres Thanks for opening the issue.

Before getting into the details of the feature request, have you considered using code actions to add the non existing selector that not only adds the non existing selector to your module but also takes you to the css module (if it exists). More info about code actions can be found here

This will significantly help you with the annoying aspect of manual navigation that you mentioned.

To talk about the Cmd/Ctrl+Click proposal, it's not quite natural to expect the editor to provide Go to definition for something that doesn't exist yet. It because of the fact that there is no source for a symbol that is yet to exist.

Also regarding your proposal about creating the module on Ctlr/Cmd+Click seems a bit out of scope of this extension as this extension aims to provide intellisense to existing css modules . Its will be highly deviating to its principle, if the extension supports module generation/file system manipulation considering the ambiguous nature of uncertain context. Hope this helps .

[jwalkerinterpres]

To talk about the Cmd/Ctrl+Click proposal, it's not quite natural to expect the editor to provide Go to definition for something that doesn't exist yet. It because of the fact that there is no source for a symbol that is yet to exist.

I have to (respectfully) disagree with you here. When you Cmd/Ctrl + Click, you expect to go somewhere, correct? As a user, you don't Cmd/Ctrl + Click for no reason: you do it because you are expecting the tool to take you somewhere.

Therefore, the absolute worst thing the tool can do is ... not take you anywhere. So, you have a choice between that option, the absolute worst ... and taking the user to the file, which will actually be useful and help them.

Please, if you truly believe the user wants to Cmd/Ctrl + Click and have nothing happen, could you explain why they'd want that?

[Viijay-Kr]

When you Cmd/Ctrl + Click, you expect to go somewhere, correct? As a user, you don't Cmd/Ctrl + Click for no reason: you do it because you are expecting the tool to take you somewhere.

May be just so we are on the same page . I am not saying Ctrl+Click shouldn't do anything . All I am saying is that in the situation when there is no source for a symbol to go to then the editor cannot take you anywhere on Ctrl/Cmd+Click. This is a general rule for all languages in VS code. This is the case with non existing selector feature this extension handles using VS code diganostics.

[jwalkerinterpres]

This is a general rule for all languages in VS code.

Again, I have to respectfully disagree. In VS Code, in any language (I believe) you can CMD/CTRL + Click on an import to a non-existent file, and VS Code will happily take you to it:

(On the left is my import to the broken file; on the right is VS Code opening that file, after I CMD + clicked the import on the left.)

I encourage you to try it for yourself. If you do, I think you'll see that the plug-in's behavior is the opposite of the VS Code standard ...

... but again, forget the standard: what truly matters most is user experience. As a user, if you take me to the broken file, I can create it. If you don't, I can't do anything. Letting users do stuff is always better :)

[Viijay-Kr]

That applies for modules and not for symbols. For symbols the code action providers let you add missing functions or property and in our case the extension offers add the missing selector . Also the capability of the extension is limited to existing modules with which the parsing logic can work . So what you are requesting is out of scope of this extension . Unfortunately it cannot be considered . Diagnostics for both missing modules and missing selectors is already a great addition IMHO compared to the other extensions out there . So anything besides that is not in the scope of the extension.