Merge pull request microsoft#23 from kingdaro/semi-interpolation-fix

Fix for microsoft#22

Author: mjbvz

e2e/tests/errors.js

@@ -4,7 +4,6 @@ const { openMockFile, getFirstResponseOfType } = require('./_helpers');
 
 const mockFileName = 'main.ts';
 
-
 describe('Errors', () => {
     it('should return error for unknown property', () => {
         const server = createServer();
@@ -115,4 +114,44 @@ describe('Errors', () => {
             assert.strictEqual(error.end.offset, 8);
         });
     });
+
+    it('should not error with interpolation at start, followed by semicolon #22', () => {
+        const server = createServer();
+
+        const lines = [
+            "function css(...args){}",
+            "const mixin = ''",
+
+            // test single-line
+            "css`${mixin}; color: blue;`",
+
+            // test multi-line (normal case)
+            "css`",
+            "  ${mixin};",
+            "  color: blue;",
+            "`",
+
+            // test multiple spaces after semi
+            "css`",
+            "  ${mixin}   ;",
+            "  color: blue;",
+            "`",
+
+            // test hella semis - will this ever pop up? probably not, but screw it
+            "css`",
+            "  ${mixin};;; ;; ;",
+            "  color: blue;",
+            "`",
+        ];
+
+        openMockFile(server, mockFileName, lines.join('\n'));
+
+        server.send({ command: 'semanticDiagnosticsSync', arguments: { file: mockFileName } });
+
+        return server.close().then(() => {
+            const errorResponse = getFirstResponseOfType('semanticDiagnosticsSync', server);
+            assert.isTrue(errorResponse.success);
+            assert.strictEqual(errorResponse.body.length, 0);
+        });
+    })
 })

src/index.ts

@@ -36,9 +36,22 @@ export = (mod: { typescript: typeof ts }) => {
                     end: number
                 ): string {
                     const placeholder = templateString.slice(start, end);
+
+                    // check to see if it's an in-property interplation, or a mixin,
+                    // and determine which character to use in either case
+                    // if in-property, replace with "xxxxxx"
+                    // if a mixin, replace with "      "
                     const pre = templateString.slice(0, start);
                     const replacementChar = pre.match(/(^|\n)\s*$/g) ? ' ' : 'x';
-                    return placeholder.replace(/./gm, c => c === '\n' ? '\n' : replacementChar);
+
+                    let result = placeholder.replace(/./gm, c => c === '\n' ? '\n' : replacementChar);
+
+                    // check if it's a mixin and if followed by a semicolon
+                    // if so, replace with a dummy variable declaration, so scss server doesn't complain about rogue semicolon
+                    if (replacementChar === ' ' && templateString.slice(end).match(/^\s*;/)) {
+                        result = '$a:0' + result.slice(4);
+                    }
+                    return result;
                 },
             }, { logger });
         },