Fix another case we have something that looks like a mixing that is used within a list of values

Fixes microsoft#44

Author: mjbvz

e2e/tests/errors.js

@@ -227,5 +227,60 @@ describe('Errors', () => {
             assert.strictEqual(errorResponse.body.length, 0);
         });
     });
+
+    it('should not return an error for a placeholder that spans multiple lines (#44)', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, `let css: any = {}; const q = css.a\`
+  color:
+    $\{'transparent'};
+  border-bottom: 1px;
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+        \``)
+        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);
+        });
+    });
+
+
+    it('should not return an error for complicated style (#44)', () => {
+        const server = createServer();
+        openMockFile(server, mockFileName, `let css: any = {}; const q = css.a\`
+  display: flex;
+  width: 6rem;
+  height: 5rem;
+  margin-right: -3px;
+  border-right: 3px solid
+    $\{({ active, theme: { colors } }) =>
+                active ? colors.yellow : 'transparent'};
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  font-weight: bold;
+  font-size: 0.875rem;
+  color: white;
+  cursor: pointer;
+  &:not([href]):not([tabindex]) {
+    color: white;
+  }
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+\``)
+        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

@@ -32,15 +32,29 @@ export = (mod: { typescript: typeof ts }) => {
                     // if in-property, replace with "xxxxxx"
                     // if a mixin, replace with "      "
                     const pre = templateString.slice(0, start);
-
-                    const replacementChar = pre.match(/(^|\n)\s*$/g) && !templateString.slice(end).match(/^\s*\{/) /* ${'button'} */ ? ' ' : 'x';
+                    const post = templateString.slice(end);
+                    const replacementChar = pre.match(/(^|\n)\s*$/g) && !post.match(/^\s*\{/) /* ${'button'} */ ? ' ' : 'x';
 
                     const 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*;/)) {
-                        return '$a:0' + result.slice(4);
+                    // If followed by a semicolon, we may have to eat the semi colon using a false property
+                    if (replacementChar === ' ' && post.match(/^\s*;/)) {
+                        // Handle case where we need to eat the semi colon:
+                        //
+                        // styled.x`
+                        //     ${'color: red'};
+                        // `
+                        //
+                        // vs. the other case where we do not:
+                        //
+                        // styled.x`
+                        //     color: ${'red'};
+                        // `
+                        if (pre.match(/(;|^|\})[\s|\n]*$$/)) {
+                            // Mixin, replace with a dummy variable declaration, so scss server doesn't complain about rogue semicolon
+                            return '$a:0' + result.slice(4); // replace(/./gm, c => c === '\n' ? '\n' : ' ');
+                        }
+                        return placeholder.replace(/./gm, c => c === '\n' ? '\n' : 'x');
                     }
 
                     return result;