theron-wang/VS2022-Editor-Support-for-Tailwind-CSS

Class name sorting when conditionals is present.

Closed this issue · 6 comments

gm-ecreo commented

Hi.

We often use alpine js in our projects and use conditionals in our classes.

Ex: x-bind:class="open ? 'bg-green-dark text-white' : 'border-2 border-green-dark text-green-dark' "

When saving the file the extension sorts it so the outcome becomes this:

x-bind:class="open ? 'bg-green-dark text-white' 'border-2 border-green-dark text-green-dark' :"

and thereby breaking the conditional which results in js errors.

Is there a way to fix this?

Best regards.

theron-wang commented

For now, you can disable the feature in Tools > Options > Tailwind CSS IntelliSense and set the sort feature to None. I’ll take a look at this and get back to you.

Thanks for letting me know!

gm-ecreo commented

@theron-wang Thank you! :-)

theron-wang commented

This should be fixed in 1.3.1. Please let me know if you encounter any more issues. Again, thanks for letting me know!

HugCoder commented

The same issue seems to affect ng-class from angularjs.
ng-class="{true: 'fa-toggle-on', false: 'fa-toggle-off'}[invoice.IsCreditInvoice]"
might turn into
ng-class="{true: ''fa-toggle-on', false: ''fa-toggle-off'}[invoice.IsCreditInvoice]"
after saving the file. I first thought this was because of updating Visual Studio to 17.10.0 Preview 6.0, as it was fixed when I reverted to Preview 5. But I didn't notice at first that reverting also for some reason removed the extensions I had, including this one for Tailwind CSS. Now that I reinstalled it, I got the same problem and after disabling it, it was normal again.

theron-wang commented

@HugCoder Apologies for the late response - this should be fixed in 1.4.0. I was only able to reproduce this in a .razor file, not in a .html file, so could you confirm what type of file you were typing this in? I want to make sure that the issue is actually resolved.

Thanks!

HugCoder commented

@HugCoder Apologies for the late response - this should be fixed in 1.4.0. I was only able to reproduce this in a .razor file, not in a .html file, so could you confirm what type of file you were typing this in? I want to make sure that the issue is actually resolved.

Thanks!

No problem, the file is .cshtml in a MVC, .NET 8 webapp.

  • 👍1