[BUG] Using arbitrary values like *-[color]/alpha in the class name causes an error in the "tailwindcss/no-custom-classname" rule

[taigakiyokawa]

Describe the bug
I add the class bg-[#ccc]/75 and get an error:

Expected behavior
There should be no error.
If I add the class like bg-[#ccc]/[75%] then get no error, but the class like bg-[#ccc]/75 should also work correctly.

Environment (please complete the following information):

• OS: macOS 12.2.1
• Softwares + version used:
  • VSCode 1.64.0
  • eslint-plugin-tailwindcss 3.5.0
  • tailwindcss 3.0.23
  • npm 8.1.0
  • node v16.13.0

eslint config file or live demo
https://play.tailwindcss.com/fezYYq7F1Z

[asharonbaltazar]

Hey, loving your lib. Just jumping on this issue to say that this an issue with stroke-[val] as well.

[francoismassart]

I just published a beta version with the fixes listed on #132
https://github.com/francoismassart/eslint-plugin-tailwindcss/tree/fix/no-custom-classname-plugin-support#readme

npm i eslint-plugin-tailwindcss@3.6.0-beta.0

Please give it a try and provide feedback and or issues 👍
Thank you

[francoismassart]

@taigakiyokawa & @asharonbaltazar can you

npm i eslint-plugin-tailwindcss@3.6.0-beta.1 and confirm it fixes your issues ?

Thanks

[asharonbaltazar]

Hey @francoismassart, I'll give it a shot later today.

[taigakiyokawa]

@francoismassart Sorry for late reply. I also try it later today.

[taigakiyokawa]

@francoismassart
quick note: I checked bg-[#ccc]/[75] is working but similar cases such as border-t-[#000]/[5] doesn’t working yet.

[francoismassart]

@taigakiyokawa strange, I edited the dedicated unit test and it passed:

See bdc4bbd

[francoismassart]

@taigakiyokawa maybe you should make sur to restart Visual Studio Code after installing the latest beta.
Sometimes it is required in order to get it updated.

[asharonbaltazar]

@francoismassart Can confirm, after a VS Code restart, that stroke-[4] is working for me! Anything else you want me to test?

[francoismassart]

Should be fixed in the latest release 3.6.0

Make sure to:

1. Update the eslint-plugin-tailwindcss package
2. Restart your editor
3. Report any issue on this repo

[asharonbaltazar]

My one complaint is that it's a bit annoying to npm run lint --fix every time we upgrade. Otherwise, appreciate the hard work!