Go to Defintion

[LeonardoGentile]

Hello,
thank you very much for your work! 👍

When importing a class into a module in vscode it doesn't complain, everything works correctly.
But I found counterintuitive that when in VsCode I click on "Go to definition/Implementation" (not "Go to type definition") I am taken to the type definition file.

Is this a limitation of VSCode or the plugin?
Any known workaround to jump to the css module instead?

[jens-duttke]

VSCode (or TypeScript which is internally used) is not able to jump to the CSS class directly, because it is only aware of the type definition file, but not of the CSS file.
TypeScript has also no understanding of CSS, Sass, Less or whatever language you are using, so it doesn't even know what a CSS class is and how it's defined in the language you are using. That all internally handled by Webpack and its loaders, which is used by Gatsby.

I often had the same problem in the past, and in my opinion that is a reasonable requirement.
I've played a little bit around, and figured out, that this could be achieve with TypeScript declaration maps.
But while thinking more about that, I came across different issues:

In CSS you can split your declarations in multiple CSS rules:

.foo:hover {
	color red;
}

.bar, .foo {
	font-size: 10px;
}

.foo:hover {
	background: red;
}

.foo {
	margin: 0;
}

To which of these rules should the editor jump, if you click on foo in your TypeScript code?

This can get even more complex, if you @import SCSS files into your SCSS Module, which also include the class .foo.

Beside that, for example in Sass you could dynamically create class names. Imagine this code:

$columns: 12;

%float-styles {
  float: left;
}

@mixin col-x-list {
  @for $i from 1 through $columns {
      .col-#{$i}-m { @extend %float-styles; }
  }
}

@include col-x-list;

Should the editor jump to the @include, to the %float-styles, to the @mixin or to the @for or to the .col-#{$i}-m?

Last but not least this Gatsby plugin is based on the Webpack loader dts-css-modules-loader. If such a functionality needs to be implemented, then in this Webpack loader.
I'll create a issue in the dts-css-modules-loader repo later, including an demo.

[jens-duttke]

I'll close this issue, because it must be handled in the dts-css-modules-loader. If it should be implemented there, it'll be available in this Gatsby plugin as well.