Can't navigate to class definition

[ajnozari]

I have a weird bug where my classes are auto-filled. My IDE does not seem to determine where the class is initially defined.

This occurs only when returning a callback, not when an object is passed to makeStyles(). I am using this with MUI and upgraded from v4->v5, so I may have just missed something.

Please let me know if you need any further information and I will do my best to get it to you.

[garronej]

Hi @ajnozari,

Can you send me a screenshot?

[ajnozari]

That's a screen cap that shows my makestyles and an element using a style, I can include a screencap for the whole page if you want.

[garronej]

I don't see the relevent things in your screen.
The important parts are cropped.

What I can already tell you is:

• A hook should always start with use I'm surprised you don't get warnings about it.
• You don't need to annotate Theme

- const styles = makeStyles()((theme: Theme)=> ({
+ const useStyles = makeStyles()(theme => ({

[ajnozari]

Roger I'll try that and see what happens

[ajnozari]

Here's a smaller screen than the last one easier to see everything

[garronej]

If I type the exacte same code in VSCode it works:

Looks like you are using Inteliji and it's missconfigured....

[ajnozari]

That's the weird thing, if I don't pass a theme (when not needed), it works fine, and it's able to find the declaration.

It only shows like this when I use an arrow function to pass the theme. I'm also able to work around it by passing the theme from the component via the useTheme hook, and referencing that in the object. See below:

I also tried resetting my IDE to default settings but saw no change. Perhaps it's something weird with Intellij? But you can see in the picture the root in classes.root is now purple, which means it's picked up properly...

[garronej]

Have you tried opening your project with VSCode?
Upgrading TypeScript?

[ajnozari]

I don’t use VSCode so that won’t help me.

mill try updating typescript and see if that helps.

[garronej]

I don’t use VSCode so that won’t help me.

That will help you make sure that the problem is related to Intelliji....

[osa911]

I have the same issue Mainly I use WebStorm, but I also checked it in VS Code, and there is the same issue Also, you can check it at your documentation: https://stackblitz.com/edit/tss-react-wv2set?file=Hello.tsx,index.tsx,tss.ts Try to open Hello.tsx and find definition of label className

So IDE shows me the className which I define at makeStyles

But then if I click on the class definition it could not find the right path. I've upgraded typescript to 4.8.4

I remember I've played with examples of tss v3 via WebStorm and it works fine, but in my project, it did not :(

[garronej]

@osa911 Thanks for reporting but I think the problem @ajnozari is facing is different.
In his case, when he types classes. he dosen't get any suggestion.

Now about the fact that it isn't possible to navigate to the de declaration... this dosen't suprise me, it would be neat if it worked but, to my knoelage, it never did.

If you can provide evidence of navigation working with older version of TSS I can investigate.

[osa911]

@garronej I have a fork of your project and there it works))) https://github.com/osa911/tss-react/blob/main/src/test/apps/ssr/pages/index.tsx And also it was working on my project as well but I did not find how it was :smiley:

https://user-images.githubusercontent.com/14163474/193691414-db26ab27-035e-43bf-bf1b-d5170f67bc38.mov

[garronej]

very intresting thank you, I'll see if I can make it work again
it's true that it's very conveignent

[osa911]

I've played a little bit locally with this and it looks like a bug, not a feature))

[garronej]

I've played a little bit locally with this and it looks like a bug, not a feature))

lol, I don't understand, what do you mean?

[osa911]

If I replace import makeStyles

import { makeStyles } from "../shared/makeStyles";

to makeStyles definition

import { createMakeAndWithStyles } from "tss-react";
import { useTheme } from "@mui/material/styles";

export const { makeStyles, useStyles, withStyles } = createMakeAndWithStyles({ useTheme });

it will break goto definition...

https://user-images.githubusercontent.com/14163474/193700627-4a3e8848-bcee-47c4-b80d-5015c4a8d2e4.mov

[ajnozari]

@osa911 Thanks for reporting but I think the problem @ajnozari is facing is different. In his case, when he types classes. he dosen't get any suggestion.

Now about the fact that it isn't possible to navigate to the de declaration... this dosen't suprise me, it would be neat if it worked but, to my knoelage, it never did.

If you can provide evidence of navigation working with older version of TSS I can investigate.

possible

So I'm sorry if I confused you, I do get suggestions, it that when I hover over the classes.className my IDE doesn't know where it's being referenced from, weirdly it DOES offer the classes as a suggestion.

Something weird must be going on with PHPStorm for it to not know where the object is defined, but still be able to give it in autocomplete

[ajnozari]

I have the same issue Mainly I use WebStorm, but I also checked it in VS Code, and there is the same issue Also, you can check it at your documentation: https://stackblitz.com/edit/tss-react-wv2set?file=Hello.tsx,index.tsx,tss.ts Try to open Hello.tsx and find definition of label className

So IDE shows me the className which I define at makeStyles

But then if I click on the class definition it could not find the right path. I've upgraded typescript to 4.8.4

I remember I've played with examples of tss v3 via WebStorm and it works fine, but in my project, it did not :(

This is the exact issue I'm facing, I just explained it very poorly

[garronej]

This is the exact issue I'm facing, I just explained it very poorly

ok thank you for clearing this out, I didn't read what you said carefully enough.

[garronej]

Now that I know it is possible to navigate

Hi @osa911, @ajnozari
I tried all I could to reproduce a scenario where this was working but I failed. 😞

The steps I took

git clone https://github.com/garronej/tss-react
cd tss-react
# Back to commit n°500
git checkout 11b4c5884ead610f9f31249b21518647ea69008d
yarn 
yarn build
yarn start_ssr
# > Select TypeScript version > Use Workspace version 4.6.4

Then I navigate to src/test/apps/ssr/pages/index.tsx and after right click -> Go to definition:

I am very willing to work on this, if this is actually possible with open source tooling.

I'm afraid that it was only working in the first place for both of you thanks to some Inteliji specific heuristic.
I'm afraid the TypeScript compiler itself isn't capable of producing the line number where the classes are declared.

[ajnozari]

Something strange I noticed is that if I pass an object to makeStyles instead of a callback it works fine and I am able to navigate to the definition of the class just fine.

So I agree something weird is happening with TS.

[garronej]

I'm now convinced of that:

I'm afraid that it was only working in the first place for both of you thanks to some Inteliji specific heuristic. I'm afraid the TypeScript compiler itself isn't capable of producing the line number where the classes are declared.

Closing since it's an intellij feature that I have no contrôle about.

Thanks for reporting anyway.

[MasterRedStorm]

Has anyone found a way to make the navigation work? A click on "card" here still moves me to a wrong area. it worked fine with mui v4 makeStyles.

I know that it is related to the type of "classes". Since "classes" has a type like this: const classes: Record<"classA" | "classB" | "classC" | "classD", string>

the relation to the definition in "tssStyles.create" is lost.

But i have no idea how i could update the type.