typescript-plugin-css-modules
typescript-plugin-css-modules copied to clipboard
goToDefinition doesn't work properly
In VSCode, 'Go to Definition' (Ctrl + click on a classname) doesn't work for me; it opens the GenericMarkup.module.less file, and that's it.
tscondig.json
"plugins": [ { "name": "typescript-plugin-css-modules", "options": { "classnameTransform": "camelCaseOnly", "goToDefinition": "enabled", } } ]
Steps to reproduce:
- Open any .tsx file that uses a CSS module.
- Click on a classname imported from the CSS module.
- Observe that it navigates to the incorrect place in the opened file.
Expected behavior: The CSS module file should open at the correct classname's place.
OS: Windows 11 IDE: VSCode
I have the same problem. I upgraded typescript
to 5.3.3
and typescript-plugin-css-modules
to 5.0.2
and goToDefinition
navigates now to the end of the file. It was working before for us
config:
{
"name": "typescript-plugin-css-modules",
"options": {
"classnameTransform": "asIs",
"customMatcher": "\\.css$",
"dotenvOptions": {},
"postcssOptions": {},
"rendererOptions": {},
"goToDefinition": true
}
}
we used v4 with ts4 before, without any problem
Adding a minor info here, before in vscode hovering with cmd key underlined the class before, now it does not happen
just in case, I use the latest version of typescript-plugin-css-modules and typescript: '4.9.5'
Another info from the log:
Info 1145 [13:38:00.415] request:
{
"seq": 15,
"type": "request",
"command": "definitionAndBoundSpan",
"arguments": {
"file": "/.../Filename.tsx",
"line": 138,
"offset": 50
}
}
Perf 1146 [13:38:00.416] 15::definitionAndBoundSpan: elapsed time (in milliseconds) 0.7883
Info 1147 [13:38:00.416] response:
{"seq":0,"type":"response","command":"definitionAndBoundSpan","request_seq":15,"success":true,"body":{"definitions":[{"file":".../Filename.css","start":{"line":312,"offset":3},"end":{"line":312,"offset":14},"contextStart":{"line":312,"offset":3},"contextEnd":{"line":312,"offset":23}}],"textSpan":{"start":{"line":138,"offset":44},"end":{"line":138,"offset":53}}}}
Which is important cos Filename.css
has no more than 291 lines. It explains why goToDefinition
positions to the end of the css file
Hi @BohdanZinkevych, goToDefinition
is a boolean
value. You can see here that it defaults to false
. You should be able to get it to work by setting it to true
:
https://github.com/mrmckeb/typescript-plugin-css-modules?tab=readme-ov-file#options
Hi @dzsodzso63, I think you have a different issue.
Can you please raise a new request with a small reproduction? That will help me investigate further.
Note that this is an experimental feature, and even when working, may not always point to the right line.
@mrmckeb still doesn't work for me with or without goToDefinition: true
Hi @BohdanZinkevych, can you please supply a reproduction? This feature is experimental and won't work perfectly, but should get you close in many cases.
@mrmckeb yes, it's true, it leads me to the correct file but not to the correct place(line)
Hi @BohdanZinkevych, can you please supply a reproduction? This feature is experimental and won't work perfectly, but should get you close in many cases.
Hi @BohdanZinkevych , thanks for your idea, i really love the "goToDefinition" feature. I create a reproduction of this issue, go to definition always lead me to the last line. https://github.com/qyzzzz/typescript-plugin-css-modules-goToDefinition-reproduction
@mrmckeb looks like the very same issue to me
Hi all, I'm away at the moment, but will try to take a look at this in the next week or so.
This is an experimental feature, and I'm not sure we'll ever be able to make it work perfectly as TypeScript doesn't provide an API for this. But, we can try to make it better.