Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<style> completions and html custom data completions not provided in some cases #4092

Closed
rchl opened this issue Mar 13, 2024 · 3 comments
Closed
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first

Comments

@rchl
Copy link
Collaborator

rchl commented Mar 13, 2024

I have a project that provides completions for the class attribute using custom data format. Volar provides those completions (aaa) when class attribute value is empty or after a space but not when there is already a character inserted (even if it matches the completion).

Here is a screencast (it's supposed provide both aaa and aaa-local in both cases:

Screen.Recording.2024-03-13.at.14.51.31.mov

Note also the inconsistent behavior with providing component-local aaa-scoped completion. It's provided when the custom data completions are not provided and vice-versa.

Note2: In the 2.0.6 version the component-local classes are not suggested at all which seems like a separate bug. I've made the video using 1.x version.

Steps:

  1. Clone repo: https://github.com/rchl/vue-completions-bug
  2. install dependencies
  3. Open App.vue
  4. Trigger completions within the class attribute when value is
    a) empty
    b) "a"

The issue is most likely around https://github.com/volarjs/volar.js/blob/15cf7fd2940938fb47c33a1db98d0173168064ee/packages/language-service/lib/languageFeatures/complete.ts#L150-L154 where it exits early and doesn't ask services for completions.

@rchl
Copy link
Collaborator Author

rchl commented Mar 14, 2024

@johnsoncodehk what does the logic for determining which service returns the mainCompletion is supposed to be in https://github.com/volarjs/volar.js/blob/15cf7fd2940938fb47c33a1db98d0173168064ee/packages/language-service/lib/languageFeatures/complete.ts#L169 ? It feels a bit random that it's set to URI of the current virtual document based on whichever service returns completions first. It seems to result in completions being omitted.

@rchl
Copy link
Collaborator Author

rchl commented Mar 15, 2024

Not setting the cache.mainCompletion so that the caching logic is never used makes things work as expected in this case at least. I suppose it might result in some duplicates, at least according to the comments in the code, but I'm not sure how to trigger that case. None of the tests fail either with that change.

Is the old Volar repo, before being split into separate repos, available somewhere? As it is now it's impossible to blame the lines and find the reasoning for any change since the history was lost during the transition.

@johnsoncodehk johnsoncodehk added bug Something isn't working upstream good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first labels Mar 24, 2024
@johnsoncodehk
Copy link
Member

This issue mixes several problems.

  1. parseCssClassNames did not capture aaa in the following code.
.aaa,
.bbb {
  color: blue;
}

This was fixed in 3be60c6#diff-f24244b7d2c995ef747db56b1010b8f4a484b8c458f6fe93d7db3d8691e7fe9aR3.

  1. TS virtual code prevents HTML completion because its embedded level is deeper than HTML virtual code. This is solved by setting completion.isAdditional = true.

  2. class="" does not trigger completion, this is solved by generating additional virtual code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first
Projects
None yet
Development

No branches or pull requests

2 participants