[Feature request] Only validate callees

[zslabs]

Describe the solution you'd like
Having the callees option is great; where we can consolidate classes into variables and still have this plugin parse the contents; ctl('flex flex-col').

During conversions of large projects, it's typical that a normal React component will have lots of other, non-Tailwind classes in the default className prop. I'd love to see an option where ONLY the callees are parsed and not the default className. So className="my-other-class" won't be parsed, but className={ctl('flex flex-col')} would be.

Describe alternatives you've considered
I'm not sure there's a workaround for this at the moment.

Additional context
Nope! But thanks for creating this tool!

[francoismassart]

Hi @zslabs,
Because this feature is easy to implement, I'll add a new setting called skipClassAttribute which is false by default.

Setting it as true would ignore the value of the class and/or className attribute(s).

But a className attribute containing a template literal which hosts an expression with one the callee would still be linted.

e.g. for the no-custom-classname rule

className={`custom my-other-class ${ctl('yolo')}`}

would warn you about yolo being a custom class.

WDYT?

[francoismassart]

@zslabs
You can try this out with
npm i -D eslint-plugin-tailwindcss@3.8.0-beta.0

[zslabs]

👋 @francoismassart That works beautifully! Thank you so much for taking a look at this feature request and the implementation.

[francoismassart]

released in v3.8.0