feat: add support for "go to definition" for Sass

[mrmckeb]

This adds experimental support for "go to definition" for Sass.

Resolves #34.

[carlbergman]

Hey @mrmckeb, would you like some assistance getting this PR moving?

PS. Noticed that an .only found it's way into one of the files: https://github.com/mrmckeb/typescript-plugin-css-modules/pull/137/files#diff-40e4d369d78e5d7b90768b9601d7f3f22f22cc9ce172e06698ad50e65303d7b0R234

[habovh]

Hey there, trying to make this work on our current setup. One of the challenges in our project is that SCSS modules files are automatically prefixed with an import that sets up globally-scoped variables and mixins.

At first I was tinkering with a custom renderer, but I soon realised that getCssExports did not receive the sourceMap from the custom renderer, only the compiled CSS.

So as a POC before thinking about adding the sourceMap option to the custom renderer, I went ahead and modified getCssExports to actually compile a hard-coded template string made of two imports: the "prepend" import and the actual fileName. Here's a source map comparison between the original getCssExports and the modified one:

sourceMap with unmodified getCssExports

{
  "version": 3,
  "sourceRoot": "",
  "sources": [
    "file:///Users/jordanbecker/Repositories/allsquare/react-app/components/club-show/pictures/styles.module.scss"
  ],
  "names": [],
  "mappings": "AAAA;EACE",
  "file": "file:///Users/jordanbecker/Repositories/allsquare/react-app/components/club-show/pictures/styles.module.css"
}

sourceMap with customized getCssExports to include prefix on any module file

{
  "version": 3,
  "sourceRoot": "",
  "sources": [
    "file:///Users/jordanbecker/Repositories/allsquare/react-app/styles/prepend.scss",
    "file:///Users/jordanbecker/Repositories/allsquare/react-app/styles/settings/_sizes.scss",
    "file:///Users/jordanbecker/Repositories/allsquare/react-app/styles/tools/_gradient.scss",
    "file:///Users/jordanbecker/Repositories/allsquare/react-app/components/club-show/pictures/styles.module.scss"
  ],
  "names": [],
  "mappings": "AAAA;AAAA;AAAA;AAAA;ACaA;;AAAA;;AAAA;AAaA;AAIA;AAKA;AAGA;AAGA;AAIA;AAGA;ADtCA;AAAA;AAAA;AAAA;AEVA;EACE;IACE;;EAEF;IACE;;EAGF;IACE;;;AAGJ;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;;AAGJ;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;;ACnCJ;EACE",
  "file": "file:///Users/jordanbecker/Repositories/allsquare/react-app/components/club-show/pictures/styles.module.css"
}

It seems that the format is valid and it should work, but "Go to definition" keeps on landing on the wrong lines of the .module.scss files.

Also, leaving the getCssExports function as-is still fails with the Go to definition for files that do not use any of the global prepended data.

I really tried hard and can't figure out how to get this working properly. Ideas? Am I missing something here, or is this PR not remotely working even for simple cases?

[eterv]

any update? I really need this feature (scss module).

[bigmeow]

I clone the code to the local computer, build it, and then use the 'yarn link' command to use in the project. However, this feature does not work