feat: allow linting specified variables

[RafalFilipek]

Lint variables

Description

In some cases, the developer might want to validate additional variables against proper class names. Let's say we want to create variants for our component.

const varianst = {
  primary: 'text-red-400 font-bold'
  secondary: 'text-blue-400'
}

The problem is that we can't be sure if provided classes are correct. My idea is simple. User can enable this plugin against any variable by adding special comment:

// eslint-enable-next-line tailwindcss/no-custom-classname

For example:

// eslint-enable-next-line tailwindcss/no-custom-classname
const styles = "p-2 text-blue-500";

// eslint-enable-next-line tailwindcss/no-custom-classname
const styles = ["p-2",  "text-blue-500"];

// eslint-enable-next-line tailwindcss/no-custom-classname
const variants = {
  primary: "p-5", 
  secondary: ["p-2",  "text-blue-500"],
  fancy: clsx(["px-10", "py-2"])
}

Type of change

New feature (non-breaking change which adds functionality)

How Has This Been Tested?

I've introduced new tests in tests\lib\rules\no-custom-classname.js

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[francoismassart]

Hi @RafalFilipek 👋
I think this PR is not necessary because you can easily apply a workaround for your needs.

Quick example

When we use a library some classnames are passed via a props which are not class or className:

...
<Transition
  show={!isAuthenticated}
  enter={ctl('transition duration-100 ease-out')}
  enterFrom={ctl('opacity-0 transform scale-50')}
  enterTo={ctl('opacity-100 transform scale-100')}
  leave={ctl('transition duration-75 ease-in')}
  leaveFrom={ctl('opacity-100 transform scale-100')}
  leaveTo={ctl('opacity-0 transform scale-50')}
>
  <Icon iconName={'UserIcon'} className={'h-24 text-blue-900 dark:text-white'} ariaHidden={true} />
</Transition>
...

eslint-plugin-tailwindcss cannot guess that enter, enterFrom, enterTo, leave (...) props contains classnames to be linted. This can be done easily by using a function configured in the callee option. You can use ctl and/or others, see in documentation.

Not using classnames, clsx or ctl ?

If you don't to use such a library you can also use a dummy callee like:

// your src file
const lintThisValue = (val) => val;
...
const styles = {
  primary: lintThisValue('p-4 my-custom'),
  secondary: lintThisValue(['p-2', 'm-2']),
}

// eslintrc in eslint-plugin-tailwindcss settings section
...
  "callees": ["lintThisValue"],
...

Let me know if you need more help and if it meets your needs.