I wrote the Tailwind CSS extension and I would like to add the ability to provide CSS class completions inside CSS and SCSS files too, such as when using the @apply directive. For example, typing “text-s” should provide the autocompletion item “text-sm”:
@apply text-sm ...
Hi @logan. Are you be able to provide any feedback on this issue? It is a common request with the Tailwind CSS extension and I would love to be able to add the feature.
Agh, I totally missed this question. I’m really sorry about that!
On the CompletionContext object provided to
provideCompletions(), there is a selectors property. This is an array of the ScopeSelector objects in effect at the completion point.
apply directive isn’t currently handled in any specific way, you’ll probably want to check for something like the
style.at-rule selector name. If that’s the case, you’ll need to scan backwards in the text of the document to see if it’s the
apply directive. Once you know that, you would then use the identifier and range on the CompletionContext to compare to see which CSS / SCSS classes you should provide.
I think that might be a starting point for this. This is a bit complicated, so don’t hesitate to ask more questions if you need!
No worries Logan. Thanks for the information! I’ll give it a try.