Offering class completions in CSS files

Get Help
1

Hi all,

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”:

.btn {
    @apply text-sm ...
}

Is this possible? If so, what would be the best approach? The extension currently provides completions using the JavaScript API, not the XML syntax method.

Thanks!

3 Likes
2

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.

Thanks, Jason

3

Agh, I totally missed this question. I’m really sorry about that!

From the JavaScript completions API, you would need to do the following in a completion provider:

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.

Since the 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!

1 Like
4

No worries Logan. Thanks for the information! I’ll give it a try.