Fix unexpected property error for referenced components

Fixes microsoft#74

Author: mjbvz

e2e/tests/errors.js

@@ -376,4 +376,19 @@ describe('Errors', () => {
         assert.isTrue(errorResponse.success);
         assert.strictEqual(errorResponse.body.length, 0);
     });
+
+    it('should not return an error (#74)', async () => {
+        const errorResponse = await getSemanticDiagnosticsForFile(
+            `let css: any = {};
+            const ListNoteItem = 'bla';
+            const ListNoteTitle = css.span\`
+                font-weight: bold;
+                color: \${props => props.theme.primaryColor};
+                \${ListNoteItem}:hover & {
+                    text-decoration: underline;
+                }
+            \`;`);
+        assert.isTrue(errorResponse.success);
+        assert.strictEqual(errorResponse.body.length, 0);
+    });
 });

src/_substituter.ts

@@ -83,6 +83,18 @@ function getSubstitution(
         return '$a' + result.slice(2);
     }
 
+    // Placeholder for component
+    //
+    // styled.x`
+    //     ${'button'}:hover & {
+    //         color: red
+    //     }
+    // `
+    // Replace with fake selector
+    if (context.post.match(/^\s*[:].+?[\{&]/)) {
+        return '&' + ' '.repeat(result.length - 1);
+    }
+
     // Placeholder used as hex value:
     //
     // styled.x`

src/test/substituter.test.ts

@@ -171,7 +171,7 @@ describe('substituter', () => {
             [
                 'position: relative;',
                 '',
-                'xxxxxxxxxxxxxxxx:hover & {',
+                '&               :hover & {',
                 '   transform: rotateY(180deg);',
                 '}',
             ].join('\n')