TypeScript server is silently dying when having comments and/or commented variables in SCSS files

[ChristianIvicevic]

Describe the bug
If any SCSS file happens to include comments that somehow have SCSS variables in them, your plugin will throw an exception and silently cripple the TypeScript server which seizes to work. It seems to attempt to parse the variables nonetheless.

To Reproduce
Steps to reproduce the behavior:

1. Create a CRA2.1 app with node-sass installed

2. Add a Foo.module.scss file.

3. Add the following code to it:

    .foo {
        width: 100px;
    }
   
    // .locationPanel {
    //     height: calc(100vh - #{$pt-navbar-height});
    //     width: $locationPanel-width;
    // }
   
    // .locationDetails {
    //     height: calc(100vh - #{$pt-navbar-height});
    //     width: calc(100% - #{$locationPanel-width});
    // }
   

4. Import it using import styles from "./Foo.module.scss";

5. Notice how the TypeScript server output will show errors and no more quick infos are usable

Expected behavior
No crash of the TypeScript server.

Screenshots
This is an excerpt of the TypeScript server log which shows the initial exception.

<css input>:14:1: Unknown word

CssSyntaxError: <css input>:14:1: Unknown word
    at Input.error (/Users/christian/Projects/graphql-pokemon/node_modules/typescript-plugin-css-modules/node_modules/postcss/lib/input.js:130:16)
    at Parser.unknownWord (/Users/christian/Projects/graphql-pokemon/node_modules/typescript-plugin-css-modules/node_modules/postcss/lib/parser.js:559:22)
    at Parser.other (/Users/christian/Projects/graphql-pokemon/node_modules/typescript-plugin-css-modules/node_modules/postcss/lib/parser.js:168:12)
    at Parser.parse (/Users/christian/Projects/graphql-pokemon/node_modules/typescript-plugin-css-modules/node_modules/postcss/lib/parser.js:77:16)
    at parse (/Users/christian/Projects/graphql-pokemon/node_modules/typescript-plugin-css-modules/node_modules/postcss/lib/parse.js:17:12)
    at new LazyResult (/Users/christian/Projects/graphql-pokemon/node_modules/typescript-plugin-css-modules/node_modules/postcss/lib/lazy-result.js:60:16)
    at Processor.<anonymous> (/Users/christian/Projects/graphql-pokemon/node_modules/typescript-plugin-css-modules/node_modules/postcss/lib/processor.js:138:12)
    at Processor.process (/Users/christian/Projects/graphql-pokemon/node_modules/typescript-plugin-css-modules/node_modules/postcss/lib/processor.js:117:23)
    at Object.exports.getClasses (/Users/christian/Projects/graphql-pokemon/node_modules/typescript-plugin-css-modules/lib/helpers/cssSnapshots.js:9:47)
    at Object.exports.getDtsSnapshot (/Users/christian/Projects/graphql-pokemon/node_modules/typescript-plugin-css-modules/lib/helpers/cssSnapshots.js:23:27)
    at Object.ts.createLanguageServiceSourceFile (/Users/christian/Projects/graphql-pokemon/node_modules/typescript-plugin-css-modules/lib/index.js:23:49)

Desktop (please complete the following information):

• OS: macOS 10.4.2

[mrmckeb]

Hi @ChristianIvicevic, thanks for the error report - and sorry for the issues you've had.

It looks to me that this is caused by the style of commenting. Whilst Sass supports single-line comments, they are not supported by CSS and I'm guessing they're not supported by the dependencies used here.

The quick fix might be to strip out those lines completely. If you'd like to take a look and raise a PR, that would be great - otherwise, I can definitely take a look at the end of this week.

In the meantime, you should find that multiline comments help you get around this issue.

[ChristianIvicevic]

@mrmckeb Unfortunately I have no experience writing plugins for TypeScript in the first place so I won't be able to contribute to a PR to fix this issue. At least I was able to track down the issue even though my IDE still favors the single line comments when using my hotkeys which is another topic.

[mrmckeb]

Again, sorry for this issue - I'll try to get on it ASAP, but just don't have time today/tomorrow. Friday or the weekend I'll get it done ;)

[ChristianIvicevic]

Don't worry since I'm not in any hurry - I am currently using your plugin in a small private test project and since I know the workaround for the time being I can work around the bug anyways.

[ChristianIvicevic]

@mrmckeb Just a minor addition to the issue: it seems empty SCSS files cause the same issue occasionally.

[mrmckeb]

This is still on my radar, I'm on leave from tomorrow (from my day job) so worst case, I'll get onto it this week on holidays ;)

It sounds like PostCSS plugins aren't handling this well, and I think this should be easy to reproduce with tests.

[mrmckeb]

Hi @ChristianIvicevic, I've solved this and will release tomorrow, along with #14. Thanks for your patience.