[Feature request] Linting in regular string with variable name regex

[dante-sparras]

Is your feature request related to a problem? Please describe. I would like to get linting working in regular strings depending on the variable name. For example, I'm using variables with the suffix 'Styles'.

const divStyles = 'flex h-10 w-10 items-center';

Describe the solution you'd like An option in the eslint file to a lint a string assigned to a variable of matching regex.

settings: {
    tailwindcss: {
       variableRegex: ".*Styles*"
    },
  },

[francoismassart]

Hi @dante-sparras,

This kind of behavior already exists in the plugin, you can use a callee which is a registered function that will trigger the plugin:

e.g.

import ctl from "@netlify/classnames-template-literals";
...
const divStyles = ctl('flex h-10 w-10 items-center');

or you can use a tagged template literal expression like:

const divStyles = tw`flex h-10 w-10 items-center`;

if you set the tags setting https://github.com/francoismassart/eslint-plugin-tailwindcss#more-settings

...
tags: ['tw'],
...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Because there are already these 2 ways of doing it, I won't implement a third way.

If you need more help on this, share a demo repository and I'll help you out.

[DigitalNaut]

I'd argue that providing this functionality is actually important part of DX since it's a very natural way of writing repeating Tailwind classes for components without introducing clutter and redundancy. Not to mention the time spent searching for this solution.

I guess an alternative would be to provide this in the documentation so that new users like me who come expecting this feature from the base Tailwind plugin don't spend too much time scouring the issues to find it.