[BUG] classRegex ignored in vuejs

[mathieutu]

Hi,
Thanks for the great work!

Describe the bug
When in vueJS templates case, the checks are made against class token, and not against the defined classRegex.

To Reproduce
Steps to reproduce the behavior:

1. Add classRegex to settings
2. Add classes to an attribute that is concerned by the regex.

Expected behavior
Any vue attributes concerned by classRegex should be validated.

Environment (please complete the following information):

• OS: macOS
• Eslint last version

Thanks!

[francoismassart]

Hi @mathieutu,
please try this beta version:

npm i eslint-plugin-tailwindcss@3.10.1-beta.3 -D

and let me know if it works for you

[francoismassart]

@mathieutu can you provide a real world example of classRegex + vuejs in the comments so that I can easily add unit tests as well ?

[mathieutu]

It's working great, thanks!

There is a native component in VueJS called Transition which has the following props:

• enterActiveClass
• enterFromClass
• enterToClass
• leaveActiveClass
• leaveFromClass
• leaveToClass

So my classRegexp is simply class$. (as the keyname will be lowercase at the time of the check)

[francoismassart]

I already met these scenarios in our main react project and usually I use ctl() utility which is included by default in the callees option. It sure can be done via classRegex as well 👍

I'll close this issue once release out of the beta channel

[mathieutu]

Yeah, but as I'm using twUI, it's better if I can avoid adding a function to all the properties 😅

(Also, it's not best to add a runtime function just for linting.)

[francoismassart]

👉 eslint-plugin-tailwindcss@3.10.1