[BUG] `no-custom-classname` false negative on arrays/objects passed to callee

[matt-tingen]

Describe the bug
classnames and similar allow:

• objects where the keys are classes and values are boolean representing whether the class is enabled
• arbitrarily nested arrays to group classes organizationally or with conditionals

For example:

classnames(
  ["asdf foo"],
  myFlag && [
    "bar",
    someBoolean ? ["baz"] : { "qwerty": someOtherFlag },
  ]
);

no-custom-classname does not identify invalid classes within arrays and objects passed to a callee.

To Reproduce
Steps to reproduce the behavior:

1. Ensure classnames is configured as a callee
2. Paste the above code block

Expected behavior
All five classes (asdf, foo, bar, baz, qwerty) are identified as invalid

Environment (please complete the following information):

• OS: macOS
• Softwares + version used:
  • node 16.3.0
  • yarn 1.22.10
  • eslint 7.32.0
  • eslint-plugin-tailwindcss 3.2.0
  • tailwindcss v3.0.15

Additional context
I'd be happy to make a PR if this change makes sense.

[leo]

I just ran into this too! Would be wonderful if this would work!

As an example, the following didn't throw an error, even though I have tailwindcss/no-arbitrary-value set to ["error"]:

<nav
  className={cns("flex relative flex-row rounded-lg select-none", {
    "bg-gray-200 p-1": !size,
    "bg-gray-100 p-[3px]": size === "sm",
  })}
>

If I remove the object construction and just use a string, it works just fine.

[francoismassart]

Hi there, it's hard to handle because of the multiple possible cases.

I do not plan on implementing this feature but if anyone is up for it, just contribute with a PR 😉

What I do must of the time is using ctl with TemplateLiteral:

<nav
  className={ctl(`
    flex
    relative
    flex-row
    rounded-lg
    select-none
    ${!size && "bg-gray-200 p-1"}
    ${size === "sm" && "bg-gray-100 p-[3px]"}
  `)}
>

[francoismassart]

Can be tested via npm i eslint-plugin-tailwindcss@3.3.0-beta.0 Thank you @matt-tingen 🚀

[leo]

That version seems to be working well!

I just added it to my project and it detected a bunch of new occurrences for linting and helped fixing them.

[kachkaev]

I guess that this PR was (at least in part) reverted by @dipsaus9 in #185. Unless I miss something, code like this is no longer linted:

<nav
  className={cn("flex relative flex-row rounded-lg select-none", {
    "foo": !size,
    "bar baz": size === "sm",
  })}
>

CC @matt-tingen (author of #103)