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

[jasonwilliams]

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]

I added some code actions to

typescript-styled-plugin/src/_language-service.ts

Lines 401 to 408 in f0e6997

	return {
	name: item.label,
	kind: item.kind ? translateCompletionItemKind(typescript, item.kind) : typescript.ScriptElementKind.unknown,
	kindModifiers: getKindModifiers(item),
	displayParts: toDisplayParts(item.detail),
	documentation: toDisplayParts(item.documentation),
	tags: [],
	};

but nothing seems to have happened on the UI side

[jasonwilliams]

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]

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]

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]

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]

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