Autocomplete when writing % and then ; is broken

[Sandstedt]

Describe the bug (including copyable syntax)
When writing ex max-width: 100% IntelliSense starts auto-completing with a lot of nonsense, like none, 100%, auto or max-content. If I now write a semi-colon, ;, this nonsense autocompleted word is attached to the end.

Screenshot

2021-09-02-11-34-57.mp4

To Reproduce

• Inside a styled declaration, write max-width: 100% and then write a semi-colon

Expected behaviour
Not having any autocomplete at all here. Other units, like px and vh works fine.

Build environment (please complete the following information):

• OS: Mac and Windows (same bug)
• VSCode Version: 1.59.1
• Extension Version 1.6.6

Context
This happen in an update sometime during the summer. Hasn't been a problem before.

[jasonwilliams]

Thanks for raising @Sandstedt

[jasonwilliams]

This happen in an update sometime during the summer. Hasn't been a problem before.

@Sandstedt It's happening on older versions, which makes me think VSCode has changed something rather than this extension. But if you're able to get it working on a specific version please let me know.

So it looks like accepting on semicolon is a VSCode thing:
https://www.reddit.com/r/vscode/comments/hj9q2o/how_do_i_stop_autocomplete_from_accepting/

The second question is why are the suggestions so terrible?
Well looking at TypeScript Styled Plugin i can see that on 100%| it offers this:

The above screenshot is https://github.com/microsoft/typescript-styled-plugin/blob/0d3a95e27abc3eeaf5b56b8267a6b62b0a6af025/src/_language-service.ts#L117

Those 25 items are coming from the CSS language server's doComplete method as we can see here:

So at this point the UI is just displaying what the language server is sending, will need to go deeper..

Looking at the CSS Language server it seems to be recieving the correct tokens, we can see here that current word is correct:

The input CSS we pass is this:

:root{

  padding: 3px;
  max-width: 100%;

}

The nodePath this generates is:

0:Stylesheet {parent: null, offset: 0, length: 45, children: Array(1), textProvider: ƒ}
1:RuleSet {parent: Stylesheet, offset: 0, length: 45, children: Array(2), selectors: Nodelist, …}
2:Declarations {parent: RuleSet, offset: 5, length: 40, children: Array(2)}
3:Declaration {parent: Declarations, offset: 26, length: 15, property: Property, children: Array(2), …}
4:Expression {parent: Declaration, offset: 37, length: 4, children: Array(1)}
5:BinaryExpression {parent: Expression, offset: 37, length: 4, children: Array(1), left: Term}
6:Term {parent: BinaryExpression, offset: 37, length: 4, children: Array(1), expression: NumericValue}
7:NumericValue {parent: Term, offset: 37, length: 4}

It looks like the CSS lang service sends everything back for max-width regardless of the already-typed value:
https://github.com/microsoft/vscode-css-languageservice/blob/main/src/services/cssCompletion.ts#L338-L340

[jasonwilliams]

So the CSS Language server is just returning everything back and VSCode isn't filtering them down by what was entered, nothing has changed in the extension so it could be a bug in the core, Maybe @aeschli could be of some assistance here?

native CSS files aren't doing this and I understand they use the CSS Language service too, so will have to look there.

I've ran the debugger over the native CSS version (following https://github.com/microsoft/vscode-css-languageservice#development) and the CSS Langauge Service sends back the same 23 items, so it seems to be a UI difference. Im out of options at this point apart from to just raise it with VSCode

[jasonwilliams]

Raised: microsoft/vscode#134328
Other issues that arose from this:

• Debugging in WSL (to test different versions of Lang Server): Debugger does not connect in WSL but works fine in native Windows microsoft/vscode#134523
• TypeScript language server should be using textdocument use vscode-languageserver-textdocument microsoft/typescript-styled-plugin#151

[jasonwilliams]

Context
This happen in an update sometime during the summer. Hasn't been a problem before.

@Sandstedt (or anyone else affected) one thing that would help with this issue is if you’re able to reproduce it working in the correct state on an older version. Even if you can’t that would be useful to know too. This would help us know if the extension or VSCode itself broke.

[forsgren]

I'm having similar issues. Pressing return should end up with the current, correctly typed, line. Not ending up getting stuff added.

autofail.1.mp4

[jasonwilliams]

If someone wants to fix this I would take a look at what the CSS Language server is doing. This may take a couple of windows so I would do as follows: (Using whatever windowing system your OS offers)

Window 1

Follow https://github.com/microsoft/vscode-css-languageservice#development and get setup with that, make sure the breakpoint is working like in the readme

Window 2

Follow https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md#setting-up-for-development--debugging make sure the breakpoints are working here too.

Then its a case of seeing why Window 1 works and Window 2 doesn't, it may be something different we send to the CSS Language service, maybe the positioning or offset is slightly off.

If anyone has any time to look into this its appreciated

[jasonwilliams]

If anybody wants to help fix this there’s a ticket open here microsoft/typescript-styled-plugin#155

The full context (including reproduction steps) is here: microsoft/vscode#134328 (comment)

[jasonwilliams]

Fixed by: microsoft/typescript-styled-plugin#156

[Sandstedt]

@jasonwilliams

Great to hear! 🎉 Sorry didn't find/take any time to help out. Can I buy you a week's worth of coffee instead? 😅 (seriously, thank you so much!)

[karlhorky]

Can I buy you a week's worth of coffee instead? 😅 (seriously, thank you so much!)

Yeah totally, seriously, do you have a donation page @jasonwilliams? Would also want to support you!

[jasonwilliams]

That’s very kind but I’m ok!
You can help by testing the latest release and letting me know if there’s any issues. It should be out now, see changelog and don’t forget to switch to the new version.

I will use prereleases in future for beta testing

[karlhorky]

Checked it out and reported back in #325 (comment) , thanks!