Using plugin breaks Visual Studio TSServer functionality

[jakelauer]

Describe the bug
When I enable the plugin, all of the TypeScript functionality in the Visual Studio 2017 editor breaks.

To Reproduce
Steps to reproduce the behavior:

1. Open a TypeScript project in VS2017
2. Enable the plugin
3. Observe

Expected behavior
Plugin functions and enables CSS module autocomplete.

Actual Behavior
TypeScript no longer provides any syntax highlight or navigation of any kind

Desktop (please complete the following information):

• OS: Windows 10

Additional context
I noticed a difference in the tsserver logs between when I am using the plugin and when I am not.

When it is enabled, tsserver basically just stops after the first time it attempts to watch a .module.scss file. Here is the final line in the log:

Info 1296 [12:22:53.699] FileWatcher:: Added:: WatchInfo: D:/<project>/Client/src/UI/UIKit/Controls/Spinner.module.scss 500 Project: WatchType: Closed Script info

When it is disabled, it does not do this.

[jakelauer]

More context. There are actually a few more lines logged when the plugin is enabled:

Info 1206 [12:40:41.201] FileWatcher:: Added:: WatchInfo: D:/<project>/Client/src/UI/UIKit/Controls/Spinner.module.scss 500 Project:  WatchType: Closed Script info
{"seq":110,"type":"request","command":"getOutliningSpans","arguments":{"file":"d:/<project>/Client/node_modules/typescript-plugin-css-modules/lib/index.js"}}
Perf 383  [12:40:42.942] 110::getOutliningSpans: elapsed time (in milliseconds) 1.1738
Info 384  [12:40:42.942] response:
    {"seq":0,"type":"response","command":"getOutliningSpans","request_seq":110,"success":true,"body":[{"textSpan":{"start":{"line":2,"offset":66},"end":{"line":8,"offset":2}},"hintSpan":{"start":{"line":2,"offset":55},"end":{"line":8,"offset":2}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":9,"offset":71},"end":{"line":11,"offset":2}},"hintSpan":{"start":{"line":9,"offset":57},"end":{"line":11,"offset":2}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":10,"offset":43},"end":{"line":10,"offset":62}},"hintSpan":{"start":{"line":10,"offset":44},"end":{"line":10,"offset":62}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":23,"offset":51},"end":{"line":30,"offset":2}},"hintSpan":{"start":{"line":23,"offset":31},"end":{"line":30,"offset":2}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":24,"offset":8},"end":{"line":26,"offset":6}},"hintSpan":{"start":{"line":24,"offset":5},"end":{"line":29,"offset":6}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":25,"offset":51},"end":{"line":25,"offset":53}},"hintSpan":{"start":{"line":25,"offset":51},"end":{"line":25,"offset":53}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":27,"offset":18},"end":{"line":29,"offset":6}},"hintSpan":{"start":{"line":27,"offset":5},"end":{"line":29,"offset":6}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":28,"offset":15},"end":{"line":28,"offset":18}},"hintSpan":{"start":{"line":28,"offset":16},"end":{"line":28,"offset":18}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":31,"offset":18},"end":{"line":179,"offset":2}},"hintSpan":{"start":{"line":31,"offset":1},"end":{"line":179,"offset":2}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":34,"offset":26},"end":{"line":174,"offset":6}},"hintSpan":{"start":{"line":34,"offset":5},"end":{"line":174,"offset":6}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":38,"offset":45},"end":{"line":38,"offset":48}},"hintSpan":{"start":{"line":38,"offset":46},"end":{"line":38,"offset":48}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":42,"offset":53},"end":{"line":42,"offset":56}},"hintSpan":{"start":{"line":42,"offset":54},"end":{"line":42,"offset":56}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":43,"offset":27},"end":{"line":45,"offset":10}},"hintSpan":{"start":{"line":43,"offset":9},"end":{"line":45,"offset":10}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":49,"offset":35},"end":{"line":57,"offset":10}},"hintSpan":{"start":{"line":49,"offset":9},"end":{"line":57,"offset":10}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":51,"offset":41},"end":{"line":55,"offset":14}},"hintSpan":{"start":{"line":51,"offset":22},"end":{"line":55,"offset":14}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":59,"offset":55},"end":{"line":59,"offset":58}},"hintSpan":{"start":{"line":59,"offset":56},"end":{"line":59,"offset":58}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":60,"offset":26},"end":{"line":60,"offset":29}},"hintSpan":{"start":{"line":60,"offset":27},"end":{"line":60,"offset":29}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":61,"offset":38},"end":{"line":69,"offset":10}},"hintSpan":{"start":{"line":61,"offset":9},"end":{"line":69,"offset":10}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":63,"offset":42},"end":{"line":68,"offset":14}},"hintSpan":{"start":{"line":63,"offset":42},"end":{"line":68,"offset":14}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":64,"offset":50},"end":{"line":67,"offset":18}},"hintSpan":{"start":{"line":64,"offset":50},"end":{"line":67,"offset":18}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":71,"offset":36},"end":{"line":73,"offset":10}},"hintSpan":{"start":{"line":71,"offset":9},"end":{"line":73,"offset":10}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":75,"offset":71},"end":{"line":77,"offset":10}},"hintSpan":{"start":{"line":75,"offset":71},"end":{"line":77,"offset":10}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":76,"offset":46},"end":{"line":76,"offset":63}},"hintSpan":{"start":{"line":76,"offset":46},"end":{"line":76,"offset":63}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":83,"offset":81},"end":{"line":97,"offset":10}},"hintSpan":{"start":{"line":83,"offset":46},"end":{"line":97,"offset":10}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":84,"offset":23},"end":{"line":84,"offset":26}},"hintSpan":{"start":{"line":84,"offset":24},"end":{"line":84,"offset":26}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":85,"offset":58},"end":{"line":87,"offset":14}},"hintSpan":{"start":{"line":85,"offset":13},"end":{"line":87,"offset":14}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":88,"offset":33},"end":{"line":90,"offset":14}},"hintSpan":{"start":{"line":88,"offset":13},"end":{"line":90,"offset":14}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":91,"offset":92},"end":{"line":92,"offset":32}},"hintSpan":{"start":{"line":91,"offset":92},"end":{"line":92,"offset":32}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":93,"offset":33},"end":{"line":95,"offset":14}},"hintSpan":{"start":{"line":93,"offset":13},"end":{"line":95,"offset":14}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":100,"offset":83},"end":{"line":114,"offset":10}},"hintSpan":{"start":{"line":100,"offset":46},"end":{"line":114,"offset":10}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":101,"offset":23},"end":{"line":101,"offset":26}},"hintSpan":{"start":{"line":101,"offset":24},"end":{"line":101,"offset":26}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":102,"offset":58},"end":{"line":104,"offset":14}},"hintSpan":{"start":{"line":102,"offset":13},"end":{"line":104,"offset":14}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":105,"offset":44},"end":{"line":107,"offset":14}},"hintSpan":{"start":{"line":105,"offset":13},"end":{"line":107,"offset":14}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":108,"offset":88},"end":{"line":109,"offset":32}},"hintSpan":{"start":{"line":108,"offset":88},"end":{"line":109,"offset":32}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":110,"offset":44},"end":{"line":112,"offset":14}},"hintSpan":{"start":{"line":110,"offset":13},"end":{"line":112,"offset":14}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":115,"offset":57},"end":{"line":172,"offset":10}},"hintSpan":{"start":{"line":115,"offset":9},"end":{"line":172,"offset":10}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":117,"offset":97},"end":{"line":171,"offset":14}},"hintSpan":{"start":{"line":117,"offset":59},"end":{"line":171,"offset":14}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":118,"offset":27},"end":{"line":118,"offset":30}},"hintSpan":{"start":{"line":118,"offset":28},"end":{"line":118,"offset":30}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":119,"offset":62},"end":{"line":121,"offset":18}},"hintSpan":{"start":{"line":119,"offset":17},"end":{"line":121,"offset":18}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":122,"offset":90},"end":{"line":123,"offset":36}},"hintSpan":{"start":{"line":122,"offset":90},"end":{"line":123,"offset":36}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":124,"offset":68},"end":{"line":170,"offset":18}},"hintSpan":{"start":{"line":124,"offset":40},"end":{"line":170,"offset":18}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":125,"offset":24},"end":{"line":164,"offset":22}},"hintSpan":{"start":{"line":125,"offset":21},"end":{"line":168,"offset":22}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":126,"offset":55},"end":{"line":132,"offset":26}},"hintSpan":{"start":{"line":126,"offset":25},"end":{"line":163,"offset":26}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":127,"offset":35},"end":{"line":131,"offset":30}},"hintSpan":{"start":{"line":127,"offset":36},"end":{"line":131,"offset":30}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":133,"offset":52},"end":{"line":163,"offset":26}},"hintSpan":{"start":{"line":133,"offset":30},"end":{"line":163,"offset":26}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":145,"offset":108},"end":{"line":151,"offset":30}},"hintSpan":{"start":{"line":145,"offset":78},"end":{"line":151,"offset":30}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":147,"offset":64},"end":{"line":149,"offset":34}},"hintSpan":{"start":{"line":146,"offset":33},"end":{"line":149,"offset":34}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":148,"offset":70},"end":{"line":148,"offset":101}},"hintSpan":{"start":{"line":148,"offset":70},"end":{"line":148,"offset":101}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":151,"offset":32},"end":{"line":151,"offset":34}},"hintSpan":{"start":{"line":151,"offset":32},"end":{"line":151,"offset":34}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":153,"offset":93},"end":{"line":155,"offset":30}},"hintSpan":{"start":{"line":153,"offset":74},"end":{"line":155,"offset":30}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":156,"offset":47},"end":{"line":162,"offset":30}},"hintSpan":{"start":{"line":156,"offset":29},"end":{"line":162,"offset":30}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":157,"offset":39},"end":{"line":161,"offset":34}},"hintSpan":{"start":{"line":157,"offset":40},"end":{"line":161,"offset":34}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":165,"offset":30},"end":{"line":168,"offset":22}},"hintSpan":{"start":{"line":165,"offset":21},"end":{"line":168,"offset":22}},"bannerText":"...","autoCollapse":false,"kind":"code"},{"textSpan":{"start":{"line":175,"offset":39},"end":{"line":177,"offset":6}},"hintSpan":{"start":{"line":175,"offset":5},"end":{"line":177,"offset":6}},"bannerText":"...","autoCollapse":true,"kind":"code"},{"textSpan":{"start":{"line":178,"offset":11},"end":{"line":178,"offset":66}},"hintSpan":{"start":{"line":178,"offset":12},"end":{"line":178,"offset":66}},"bannerText":"...","autoCollapse":false,"kind":"code"}]}
 {"seq":243,"type":"request","command":"getApplicableRefactors","arguments":{"file":"d:/<project>/Client/node_modules/typescript-plugin-css-modules/lib/index.js","startLine":1,"startOffset":1,"endLine":1,"endOffset":1}}
Perf 2049 [12:40:42.777] 243::getApplicableRefactors: elapsed time (in milliseconds) 0.7389
Info 2050 [12:40:42.777] response:
    {"seq":0,"type":"response","command":"getApplicableRefactors","request_seq":243,"success":true,"body":[]}
Info 2051 [12:40:42.997] request:
    {"seq":244,"type":"request","command":"getApplicableRefactors","arguments":{"file":"d:/<project>/Client/node_modules/typescript-plugin-css-modules/lib/index.js","startLine":47,"startOffset":15,"endLine":47,"endOffset":15}}
Perf 2052 [12:40:42.997] 244::getApplicableRefactors: elapsed time (in milliseconds) 0.4764
Info 2053 [12:40:42.997] response:
    {"seq":0,"type":"response","command":"getApplicableRefactors","request_seq":244,"success":true,"body":[]}
Info 2054 [12:40:43.77] request:
    {"seq":245,"type":"request","command":"geterr","arguments":{"delay":0,"files":["d:/<project>/Client/node_modules/typescript-plugin-css-modules/lib/index.js"]}}
Perf 2055 [12:40:43.77] 245::geterr: async elapsed time (in milliseconds) 0.3020
Info 2056 [12:40:43.78] event:
    {"seq":0,"type":"event","event":"syntaxDiag","body":{"file":"d:/<project>/Client/node_modules/typescript-plugin-css-modules/lib/index.js","diagnostics":[]}}
Info 2057 [12:40:43.79] [typescript-tslint-plugin] "Computing tslint semantic diagnostics for 'd:/<project>/Client/node_modules/typescript-plugin-css-modules/lib/index.js'"
Info 2058 [12:40:43.79] [typescript-tslint-plugin] "(runTsLint) start"
Info 2059 [12:40:43.79] [typescript-tslint-plugin] "(runTsLint) Loaded tslint library"
Info 2060 [12:40:43.79] [typescript-tslint-plugin] "(runTsLint) About to validate d:/<project>/Client/node_modules/typescript-plugin-css-modules/lib/index.js"
Info 2061 [12:40:43.79] [typescript-tslint-plugin] "(doRun) starting validation for d:/<project>/Client/node_modules/typescript-plugin-css-modules/lib/index.js"
Info 2062 [12:40:43.79] [typescript-tslint-plugin] "(doRun) Changed directory to d:/<project>/client/node_modules/typescript-plugin-css-modules/lib"
Info 2063 [12:40:43.79] [typescript-tslint-plugin] "(doRun) About to getConfiguration"
Info 2064 [12:40:43.79] [typescript-tslint-plugin] "(getConfiguration) Starting for d:/<project>/Client/node_modules/typescript-plugin-css-modules/lib/index.js"
Info 2065 [12:40:43.79] [typescript-tslint-plugin] "(doRun) Configuration fetched"
Info 2066 [12:40:43.79] [typescript-tslint-plugin] "(doRun) No linting: a JS document, but js linting is disabled"
Info 2067 [12:40:43.79] event:
    {"seq":0,"type":"event","event":"semanticDiag","body":{"file":"d:/<project>/Client/node_modules/typescript-plugin-css-modules/lib/index.js","diagnostics":[]}}
Info 2068 [12:40:43.80] event:
    {"seq":0,"type":"event","event":"suggestionDiag","body":{"file":"d:/<project>/Client/node_modules/typescript-plugin-css-modules/lib/index.js","diagnostics":[{"start":{"line":12,"offset":28},"end":{"line":12,"offset":41},"text":"File is a CommonJS module; it may be converted to an ES6 module.","code":80001,"category":"suggestion"},{"start":{"line":16,"offset":56},"end":{"line":16,"offset":80},"text":"Could not find a declaration file for module 'postcss-icss-selectors'. 'd:/<project>/Client/node_modules/postcss-icss-selectors/lib/index.js' implicitly has an 'any' type.\n  Try `npm install @types/postcss-icss-selectors` if it exists or add a new declaration (.d.ts) file containing `declare module 'postcss-icss-selectors';`","code":7016,"category":"suggestion"},{"start":{"line":18,"offset":56},"end":{"line":18,"offset":80},"text":"Could not find a declaration file for module 'postcss-filter-plugins'. 'd:/<project>/Client/node_modules/postcss-filter-plugins/dist/index.js' implicitly has an 'any' type.\n  Try `npm install @types/postcss-filter-plugins` if it exists or add a new declaration (.d.ts) file containing `declare module 'postcss-filter-plugins';`","code":7016,"category":"suggestion"}]}}
Info 2069 [12:40:43.80] event:
    {"seq":0,"type":"event","event":"requestCompleted","body":{"request_seq":245}}

[mrmckeb]

Hi @jakelauerm, would you be able to look into this and raise a PR?

I'm not on Windows and don't work with Visual Studio (I use VSCode), so this will be hard for me to test.

Also, have you tried without other plugins? Just out of interest... It may also be good to see if this is only VS that's affected, if VSCode is affected too - then it'll be easier to solve.

[jakelauer]

I can try - how do you usually go about debugging this stuff? Is there a way to attach a debugger?

[jakelauer]

I have narrowed this down by slow trial and error. I think this is happening because I'm using .scss files and features. It appears that the plugin fails when it encounters variables being defined (or other such SCSS-only syntax). I started by deleting code from the .scss file it was stuck on (Spinner.module.scss) until it got past that file.

I actually had to delete all of the contents of the file because it started with a relative import. After I did that, it failed at the next file that also had the same relative import.

The import in question is a file that solely exists to define variables. I deleted the entire contents of that file as well to see what would happen, and it did not fix it. So, it looks like purely the act of using an @import with a relative path causes things to fail. Is relative import supported for SCSS? Looking at the commit for relative import support, it seems to only be for CSS and LESS.

[hellocontrol-bng]

FYI I am @jakelauer - this is my work account. I created a PR for this because I determined that the issue was rooted in SASS being unable to import files due to getFilePath depending on the / character being a useful way to get the folder name of a file.

[hellocontrol-bng]

@mrmckeb Have you had a chance to check out my PR above?

[mrmckeb]

Thanks @jakelauer / @hellocontrol-bng - and sorry for the slow response again.

Your fix is great, and I'll get this out today!

[mrmckeb]

Thanks again, this is out as https://github.com/mrmckeb/typescript-plugin-css-modules/releases/tag/v2.1.1.