ignore classname in `naming-convention`

Question

I am using tailwind and react, and eslint.

I have the current configuration

        "@typescript-eslint/naming-convention": [
          "error",
          {
            "selector": "default",
            "format": ["camelCase", "UPPER_CASE", "PascalCase"],
            "leadingUnderscore": "allow",
            "trailingUnderscore": "allow"
          },
          {
            "selector": "variable",
            "format": ["camelCase", "UPPER_CASE", "PascalCase"],
            "leadingUnderscore": "allow",
            "trailingUnderscore": "allow"
          },
          {
            "selector": "typeLike",
            "format": ["PascalCase"]
          }
        ],

But in the code, when I use classname library I have to do the following :

   className={
     classNames({
     'py-2 pl-8 pr-4 cursor-pointer ':true,
     })
    }

Which break the rules...

I would like to know if I can ignore the convention for anything in between classname({***})

Answer 1

To ignore everything inside a classNames call, you’d need something similar to the indent rule’s ignoredNodes that has access to the AST but I couldn’t find a similar option for @typescript-eslint/naming-convention.

A workaround would be to follow the documentation’s example on ignoring properties that require quotes with e.g.

{
    "selector": "property",
    "format": ["strictCamelCase"],
    "filter": {
         "regex": "[- ]",
         "match": false
    }
}

If you're willing to change your code writing convention instead of your tooling configuration, you could also simply write the class expression differently:

classNames(
  foo == bar && 'py-2 pl-8 pr-4 cursor-pointer',
  baz > 0 ? 'rounded' : 'rounded-xl'
)