search

microsoft / typescript-styled-plugin

TypeScript server plugin that adds intellisense to styled component css strings
MIT License
839 stars 58 forks source link

CSS suggestions get dropped off when converting up into TypeScript completion items #132

Closed jasonwilliams closed 1 year ago

jasonwilliams commented 3 years ago

Hi @mjbvz I was looking into fixing the colon and semiColon auto completion which has been raised in styled-components

I came across completion items, which i assumed I can add a command property to, but it seems they're converted to completionEntrys which seems to be a typescript thing. https://github.com/microsoft/typescript-styled-plugin/blob/main/src/_language-service.ts#L382-L395

CompletionEntrys look similar to CompletionItems but don't have a command property (Im assuming they need to be generic).

Do you know what's happening here? And does this make the above task not possible?

jasonwilliams commented 3 years ago

I added some code actions to https://github.com/microsoft/typescript-styled-plugin/blob/f0e69975e8d140b4ec59f2cf5b6fcfee10b3a256/src/_language-service.ts#L401-L408 but nothing seems to have happened on the UI side

jasonwilliams commented 3 years ago

Hey @aeschli, messaging you because it looks like you've dealt with this before. It seems CompletionItems coming up from cssLanguageService have commands attached to them. But once they go through translateCompetionEntry they get dropped off. Mainly because CompletionEntry doesn't have an equivalent.

This means we're losing codeActions and commands coming up from CSS Language Service. Is there a way to rectify this? Does the interface need changing?

Here (line 126) items have codeActions and Commands, but once they go through 137 all that has gone.

aeschli commented 3 years ago

The command that we add to the css completions is 'editor.action.triggerSuggest`. It opens code completion again after a proposal is applied. For example when a property is competed, the user can complete the values right away.

I think you would have to convince the TypeScript guys to adopt the feature (at least a 'regtrigger' flag). Looking at the current API I don't see any tricks to achieve this. Even if there were, it would have to to be adopted in our TypeScript client. Maybe @mjbvz knows more.

On the css side you can turn off the addition of command (document settings: completion.triggerPropertyValueCompletion), I would suggest to also turn off the semicolon after the completion (completion.completePropertyWithSemicolon) so this looks a bit cleaner

jasonwilliams commented 3 years ago

I think you would have to convince the TypeScript guys to adopt the feature (at least a 'regtrigger' flag). Looking at the current API I don't see any tricks to achieve this. Even if there were, it would have to to be adopted in our TypeScript client. Maybe @mjbvz knows more.

@aeschli what's the reason TypeScript's language server interface have restricted commands in ts.CompletionEntry, is that not needed? I thought typescript would need this for their own language server? From what I understand there's no way to pass a completionItem's command back up to VSCode?

you would have to convince the TypeScript guys to adopt the feature

I wouldn't even know where to start in bringing that up as a feature request, It seems like the interfaces need adjusting and the TypeScript client would need changing to receive the commands? Maybe there's more to it than that.

On the css side you can turn off the addition of command (document settings: completion.triggerPropertyValueCompletion), I would suggest to also turn off the semicolon after the completion (completion.completePropertyWithSemicolon) so this looks a bit cleaner

Not sure I'm with you here, our issue is the command isn't happening at all, not that we want to turn it off. Do you mean once we've implemented it ourselves there would be conflicts?

aeschli commented 3 years ago

Commands on completions are quite an advanced feature, and is, to my knowledge, used only rarely. It's also not very clean as for this to work across editors it would require to define a set of known commands. As said, for 'retrigger' it would be much better to have this more explicit as a flag (`retrigger') on the completion proposal.

Unfortunately TypeScript's API types and VSCodes API types are quite different for historical reasons. As said, I would suggest to file an issue against TypeScript for them to support a 'retrigger' property on the proposal.

mjbvz commented 1 year ago

Closing as this package has been deprecated in favor of the official styled-components/typescript-styled-plugin fork

After updating to that fork, follow up in the styled-components repo if this is still an issue