"Go to definition" in VSCode

[jens-duttke]

I've written the Gatsby plugin gatsby-plugin-dts-css-modules which is based on this Webpack plugin.

A user created an issue in my issue tracker, describing a problem, which I also have very often while using VSCode:
jens-duttke/gatsby-plugin-dts-css-modules#3
The "Go to Definition" functionality of VSCode takes you to the type definition, and not to the CSS source class.

I thought a little bit about this problem, and figured out, that TypeScript declaration maps can be used to solve this problem.

I've created an example, containing a .ts file, a .scss file, a type definition file created by dts-css-modules-loader and a manually created .d.ts.map file:
https://github.com/jens-duttke/scss-declaration-map-demo

If you are using VSCode you'll notice that it jumps directly from the TS code into the SCSS file, instead of jumping into the type definition file.
That's a great benefit and would make the work with CSS files a lot easier.

For sure, that sounds easier than it is, and it has a couple of disadvantages:

1. It's required that previous loaders generate a valid source map you can rely on
2. 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 rule should the editor jump, if you click on ".foo"?

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

3. 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?

But I think 3. is covered by Sass while creating it's sourcemap and 2. is covered by the editor, if all occurences of the class are linked in the sourcemap.

What do you think?