Fix flase error when placeholder used as value with unit outside of placeholder

Fixes microsoft#48

Author: mjbvz

e2e/tests/errors.js

@@ -282,5 +282,19 @@ describe('Errors', () => {
         });
     });
 
+    it('should not return an error for a placeholder value followed by unit (#48)', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, `function css(strings, ...) { return ""; }; const value = 1; const q = css\`
+            width: $\{value}%;
+        \``)
+        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

@@ -33,8 +33,7 @@ export = (mod: { typescript: typeof ts }) => {
                     // if a mixin, replace with "      "
                     const pre = templateString.slice(0, start);
                     const post = templateString.slice(end);
-                    const replacementChar = pre.match(/(^|\n)\s*$/g) && !post.match(/^\s*\{/) /* ${'button'} */ ? ' ' : 'x';
-
+                    const replacementChar = getReplacementCharacter(pre, post, logger);
                     const result = placeholder.replace(/./gm, c => c === '\n' ? '\n' : replacementChar);
 
                     // If followed by a semicolon, we may have to eat the semi colon using a false property
@@ -63,3 +62,20 @@ export = (mod: { typescript: typeof ts }) => {
         },
     };
 };
+
+function getReplacementCharacter(pre: string, post: string, logger: LanguageServiceLogger) {
+    if (pre.match(/(^|\n)\s*$/g)) {
+        if (!post.match(/^\s*\{/)) {  // ${'button'} {
+            return ' ';
+        }
+    }
+
+    // If the placeholder looks like a unit that would not work when replaced with an identifier,
+    // try replaceing with a number.
+    if (post.match(/^(%)/)) {
+        return '0';
+    }
+
+    // Otherwise replace with an identifier
+    return 'x';
+}