Variable Declarations & Callee Behavior

[jd-carroll]

Parse Variable Declarations

Description

This PR fixes a hole in the current evaluation.

Currently, the following code misses the incorrect class name:

const myStyles = 'bg-wrong-name';

const classNames = [
  {
    base: 'text-wrong-text',
    other: 'flex-no-layout'
  }
];

export function Item() {
  return <div className={clsx('bg-current')} />;
}

This update will identify the wrong class names in all variable declarations with string, object, or array values.
(It will also identify duplicate class names)

[jd-carroll]

[UPDATE:] Expanded PR to include all TW-v3 rules AND expand callee behavior

I've been working on multiple changes for the plugin, the first of which were variable declarations. However, it got too entangled keeping them separate so I'm updating everything here.

The new callee behavior

The current callee behavior will treat things like clsx and cva as the same, when the are quite distinct. In the case of clsx we want the following to fail:

clsx({
  'bg-wrong-class': 'w-full'
})

In the case of cva we want the following to fail:

cva(['w-full'], {
  variants: {
    good: 'w-auto',
    bad: 'w-random-value'
  }
})

To achieve this, the callees option has been updated to accept an object in addition to the current array. The object should take the form:

type CalleeType = {
  [<callee-name>: string]: 'key' | 'value'
}

The default values are:

{ classnames: 'key', clsx: 'key', ctl: 'value', cva: 'value', tv: 'value' }

Additionally, any existing array that is passed in will be converted to the new form. If the callee existing in the defaults, it will use the 'key'|'value' value from the defaults, otherwise it will default to 'value'.

This is a big update! Please provide any kind of feedback. We are actively using these changes in our projects by temporarily updating our eslint-plugin-tailwind dependencies to:

    "eslint-plugin-tailwindcss": "https://github.com/jd-carroll/eslint-plugin-tailwindcss#variable-declarations",

If you want to see these changes land, please help by contributing documentation and/or test cases. I have arguably spent too much time on creating these updates so I need to re-focus on other items. Either leave a message here or create a PR against my fork.

(❤️ for all the effort that went into this plugin already)

[jd-carroll]

@francoismassart What can I do to make this PR more understandable?

It would be great to get this evaluated / merged at some point. I think these changes will really help people.

[kachkaev]

Just bumped into code where duplicate class names were not detected:

cva(['w-full', 'w-full'], {
  variants: {
    good: 'w-auto',
    bad: 'w-random-value'
  }
})

Having two strings in the first argument is useful when they are long and we want to render them on separate lines.

Example (imagine this inside cva):

It’d be great to see this PR reviewed @francoismassart 🙏