[BUG] Support of Vue v-bind:class

[extrem7]

Seems like the plugin doesn't work with Vue v-bind:class functionality.

[kevinvalk]

This is a shame because https://tailwindcss.com/blog/automatic-class-sorting-with-prettier does sort classes in :class.

[innocenzi]

Would be awesome. I tried with the existing options but couldn't manage to find a regex that could work.

[francoismassart]

@extrem7, @kevinvalk, @innocenzi, @NielsJanssen, @hrubysi
I'm working on this and I'll share a beta version soon starting only with no-custom-classname rule.

Are you willing to test it out and give feedback using real/complex projects once it is available in the beta channel ?
Instructions will follow 😉

[innocenzi]

Awesome! I would love to.

[francoismassart]

Here is a first beta for the no-custom-classname rule only, all rules will follow in the next betas

npm i eslint-plugin-tailwindcss@3.9.0-beta.0 -D

👉 Make sure the no-custom-classname rule is enabled.

I made an invalid test in https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/feat/v-bind/tests/lib/rules/wip.js#L71, take a look at it if you want to know what to expect in terms of usage.

Thank you for your feedback(s)

[francoismassart]

FYI: I don't think I'll go as far as checking the value of a variable inside the data() of a SFC to validate its value.

An easy fix for this is using a callee like ctl to "force" eslint-plugin-tailwindcss to validate the arguments as Tailwind CSS classnames...

We use this same logic in our react project when we pass props meant to contain Tailwind CSS classnames (which are not named class or className) .

e.g.

...
<Transition
  as={Fragment}
  enter={ctl('transition duration-100 ease-out')}
  enterFrom={ctl('scale-95 opacity-0')}
  enterTo={ctl('scale-100 opacity-100')}
  leave={ctl('transition duration-75 ease-in')}
  leaveFrom={ctl('scale-100 opacity-100')}
  leaveTo={ctl('scale-95 opacity-0')}
>
...

[innocenzi]

Hey! So no-custom-classname works well:

It's overwhelming though that the whole :class is erroring instead of just the actual line/string that contains the class name.

Seems like other rules are not yet implemented?

[francoismassart]

The entire underlining is normal, it could be enhanced for sure but it disappears quickly especially if the error is fixable automatically by the plugin.

As stated in my previous comment, for now only the no-custom-classname is supported but more rules will be published in beta channel soon and I’ll post it in this issue.

[innocenzi]

Awesome! Thanks for your work. Looking forward to the sorting. ❤️

[francoismassart]

Here is a new beta version with all the rules available for v-bind

👉 npm i eslint-plugin-tailwindcss@3.9.0-beta.1

Keep in mind that arrays and objects passed to a :class attribute are parsed by its inner parts "in isolation"...

The plugin won't lint array elements "amongst themselves":
e.g. :class="['p-0', 'p-10', 'm-0']" won't throw a contradicting error for p-0 vs p-10
but :class="['p-0 p-10', 'm-0']" will throw a contradicting error for p-0 vs p-10

I'll keep it in beta for few days at least, please test it out.

Thank you for the feedback.

[innocenzi]

Hey, just tried that — seems to work perfectly fine for arrays at first sight.

Classname order doesn't seem to work for objects in arrays:

It does work for :class with a single object though:

[francoismassart]

@innocenzi 👇
npm i eslint-plugin-tailwindcss@3.9.0-beta.2

should do the trick 🎉

[innocenzi]

Can confirm, does the trick 🎉

Not sure how hard it would be to implement, but it would be great if no-contradicting-classname and enforces-shorthand could work per :class block and not per individual line, just like the current underlining works.

However, I'm really happy with what's currently in 3.9.0-beta.2 — so, thanks again :)

[hrubysi]

It seems to work well for me.
Thank you for this! I hated to use prettier just to be able to sort tailwind classes.

[hrubysi]

@francoismassart I found a bug while using v-bind.

Error:

TypeError: Cannot read properties of null (reading 'name')
Rule: "tailwindcss/classnames-order"

Triggering code:

<slot v-bind="slotData"></slot>

const slotData = {
  vModel: model,
};

[francoismassart]

@hrubysi thank you, I’ll fix this and publish a new beta

[francoismassart]

@hrubysi 👉 npm i eslint-plugin-tailwindcss3.9.0-beta.3 -D