Suggestions broken on embedded languages

[jasonwilliams]

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

Version: 1.61.0-insider (system setup)
Commit: 4fbe034
Date: 2021-09-29T05:38:00.706Z
Electron: 13.5.0
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Windows_NT x64 10.0.19043

Investigation from:
styled-components/vscode-styled-components#322 (comment)

Steps to Reproduce:

1. Install the VSCode Styled Components extension https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components
2. Clone https://github.com/styled-components/vscode-styled-components
3. Navigate to src/tests/suite/colorize-fixtures/segmented-component.js file and add max-width: 100 underneath the padding: 3px line
4. Now add % to max-width
5. You should see something like this:
   6. If you
   hit ; you end up getting a bad suggestion (like above):

What's Expected

In a CSS file doing the same yields a much better experience. It only suggests the 100% and not others, and doesn't give weird textinputs when hitting semicolon or enter.

We have debugged this problem in depth and it seems to be a UI issue. This used to work as expected but over the past year it has been behaving like this, the extension hasn't changed and an old version of the extension does the same thing, so I believe something in the VSCode UI has changed to cause this. Any help would be appreciated.
I checked the language server, and that responds the same to both the embedded language and a native CSS file so I don't think the issue is there.

[mjbvz]

Have you tested using older TypeScript versions to see if the Typescript update caused this?

[jasonwilliams]

@mjbvz yep

This is using version 0.15.0 of the typescript styled plugin which is using an old "v3.6.4" of typescript

[jasonwilliams]

@mjbvz i appreciate you may not have time to properly look at this, but do you have any suggestions where we can look to figure out what’s going on?

I’ve looked at the language server results (from both css and typescript styled plugin) and they seem to be ok, so it could be the UI messing this up.

styled-components/vscode-styled-components#325 (comment) Seems to also be a symptom of this issue

[mjbvz]

If the TS server responses to VS Code are correct (you can check this using "typescript.tsserver.trace": "verbose"), you probably need to debug in VS Code itself to figure out why they are not showing up:

vscode/src/vs/editor/contrib/suggest/suggest.ts

Line 194 in 2c99163

export async function provideSuggestionItems(

You should be able to confirm that the completion items are returned but then getting filtered out for some reason

[jasonwilliams]

Thanks thats useful but its still hard to see where provideSuggestionitems links up with the language server. I get a response but its different from what the typescript-srtyled-plugin sends :/

Anyway, making use of that I was able to do some more digging

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.

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

https://github.com/microsoft/vscode/blob/main/src/vs/workbench/api/browser/mainThreadLanguageFeatures.ts#L476

^ this is the point I can’t follow anymore, how does that call into the tsserver or styled plugin? What is that calling?

I thought the culprit may be 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. But the types are correct.

Looking at the types for CompletionEntry and CompletionEntryDetails I don't see where the range would be passed through back to VSCode.

I think I may need your help on the rest @mjbvz, this seems to require someone with extensive VSCode core knowledge. I've done the best I can here. I Also think microsoft/TypeScript#40347 could be related

I have raised: microsoft/typescript-styled-plugin#155 (although sadly i don't think anyone is maintaining this). Saying that, when i set it it didn't make much difference

[jasonwilliams]

Progress report:

I've populated replacementSpan here

And now i can see a range making its way to VSCode:

j wasn't populated before. The only issue now is the range is wrong. It seems what ever is being used in the first image isn't yielding the correct value.

It looks like start: doc.offsetAt((item as any).textEdit.range.start) isn't correct?

[jasonwilliams]

Finally managed to fix this here: microsoft/typescript-styled-plugin#156 @mjbvz will need a review