Renaming a styled component does not always work from JSX

[mjbvz]

From @dontsave on October 22, 2018 20:40

• VSCode Version: latest
• OS Version: Windows 10

Renaming a styled component from the JSX does not rename the styled component at its declaration.

Steps to Reproduce:

test.tsx:

import styled from 'styled-components';
import * as React from 'react';

const Test = styled.div` <---- renaming Test here successfully renames test below
`;

export const Testing:React.SFC = p => {
	return (
		<div>
			<Test>hi there</Test> <----- renaming Test here does not rename test above
		</div>
	);
};

Does this issue occur when all extensions are disabled?: Yes

Copied from original issue: microsoft/vscode#61527

[mjbvz]

Tested with TS 3.2.0-dev-20181020

The rename response does not include the component definition:

Result: {
    "info": {
        "canRename": true,
        "displayName": "Test",
        "fullDisplayName": "Test",
        "kind": "const",
        "kindModifiers": "",
        "triggerSpan": {
            "start": {
                "line": 10,
                "offset": 14
            },
            "end": {
                "line": 10,
                "offset": 18
            }
        }
    },
    "locs": [
        {
            "file": "/Users/matb/projects/san/x.tsx",
            "locs": [
                {
                    "start": {
                        "line": 10,
                        "offset": 14
                    },
                    "end": {
                        "line": 10,
                        "offset": 18
                    }
                },
                {
                    "start": {
                        "line": 10,
                        "offset": 29
                    },
                    "end": {
                        "line": 10,
                        "offset": 33
                    }
                }
            ]
        }
    ]
}

[dontsave]

wow fast turnaround. i also noticed the original issue can be simplified to not include reference to styled components at all:

import * as React from 'react';

let S:React.ComponentClass; // <-- rename here changes both lines below

const e = <S/> // <-- rename here changes above
const e2 = <S></S> // <-- rename here does not change above