Vue `<Transition>` classes are not sorted

[dhruvkb]

For the Vue components, only the attributes class and :class are sorted.

https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/01fe07a29aeefcc7933e5cec22a840ab07fd3918/src/index.js#L543

However the Transition component in Vue has many other attributes that contain class names

-

• enter-class
• enter-active-class

• enter-to-class

• leave-class
• leave-active-class

• leave-to-class

• v-enter-from
• v-enter-active

• v-enter-to

• v-leave-from
• v-leave-active
• v-leave-to

Can support be added to lint the order of classes inside these attributes as well?

[pm0u]

+1 for perhaps offering similar customization to the intellisense plugin for tailwind (experimentalClassRegex) we have classes in headless UI <Transition /> component as well as CVA (class-variance-authority) that are currently missed by this prettier plugin.

[thecrypticace]

Hey! We've discussed the internally and, for now at least, we're going to leave this as-is. In Vue class and :class are specialized at the compiler level so it's pretty much guaranteed what they're going to be. This means that using class is a safe-bet for us to treat as a list of classes.

While we could add {enter,leave}-{to,active}-class etc… it has the possibility to conflict with other components that happen to use the same prop names. Now, this doesn't mean we won't do this. It will just require a bit of thinking through on our part. I can see how we'd want to maybe open up customization (or not?) of these lists on a per-format basis which means we have to potentially introduce multiple configuration options.

Thanks for the idea and we'll definitely keep this in mind for future ideas and improvements to the plugin.