Selecting Intellisense suggestion results in doubled content being typed

Describe the bug (including copyable syntax) I see this as a one solid issue, symptoms of which are being solved in other issues. This is a continuation of this https://github.com/styled-components/vscode-styled-components/issues/219. Namely, the Intellisense in styled-components code won’t account for previously typed text when making suggestions and completions. I will describe it in several examples below.

1. Start creating some pseudo styling like after, selection, etc. After hitting ENTER you will get this

2. If you start typing some css, Intellisense box would pop-up, close it and continue typing again. Say, it was flex- before. After applying the suggested option, say, flow, you will get flex-flex-flow (so the previously typed text is not accounted).

This is happening to me since early versions (below 1.0) of the extension.

Expected behavior The behavior should be identical with regular css files.

Build environment (please complete the following information):

• OS: ubuntu 18.04 or windows 10, both using the same versions of vscode and extension.
• vscode@1.59.1
• vscode-styled-components@1.6.6 (or other versions, does not matter)

[jasonwilliams]

Ok I had some time today…

The good news is we have a new place to look: https://github.com/microsoft/vscode/issues/134328#issuecomment-973593757

This is where VSCode receives the suggestions from the language server and decides what to do wit them. First we can start with basic CSS.

This is the CSS I’m working with…

div {
  accent-color: black;
  color: black;
  width: 100%| < cursor here (hitting ctrl + spacebar)
}

The bug, is that in styled components it appends another 100% on the end, but in CSS it doesn’t. lets take a look at how the CSS language server responds…

The above is good, we can see that the editStart and the editInsertEnd match up with the 100% in the css. This explains why it works well,

Now lets take a look at the response from TypeScript Styled Plugin…

This is interesting (and expected). the editStart value is set as where the cursor is. Causing the new snippet to be placed at the end (or duplicating as this ticket puts it).

I suppose we need to see what sets that value and why its wrong (where as the CSS one is correct).

few hours later

Well it looks like I’ve found the issue (somewhat), VSCode is falling back to the defaultRange. it seems the range gets lost somewhere between the language server and VSCode

I think the culprit is here https://github.com/microsoft/typescript-styled-plugin/blob/main/src/_language-service.ts#L121-L138 because item has the range, but its never converted. So it just gets dropped

[jasonwilliams]

Fixed by: https://github.com/microsoft/typescript-styled-plugin/pull/156