NazmusSayad / tailwind-variant-group

tailwind-group
https://www.npmjs.com/package/tailwind-variant-group
5 stars 0 forks source link

[FR] Any way this will work with `eslint-plugin-tailwindcss` package? #2

Open hoangnhan2ka3 opened 7 months ago

hoangnhan2ka3 commented 7 months ago

First of all, thank you for creating this package. I have been researching and tinkering with Tailwind's variant-grouping issue for quite a while, wondering why this is so difficult.

And there are a few members of TailwindLabs who have come up with a few different workarounds, but most of them are cumbersome and don't work with the Tailwind CSS IntelliSense extension (which is an extension without which programmers wouldn't use Tailwind too).

And somehow Google suggested to me this package of yours, why is it so underrated? This is truly a great DX.

All other solutions I found have trouble with PostCSS, I think you understand this so perhaps no further explanation is needed. And the way you do it is to use Tailwind's content.transform, it really works, it's clever.

But what makes me not use this package is that it does not work with the famous eslint package eslint-plugin-tailwindcss (it will simply identify two duplicate classes and invalid classes).

eg:

image

I think this problem is not as simple as editing your package, but it may be related to the eslint-plugin-tailwindcss package as well.

But I just want to ask is there really any solution to this problem?

hoangnhan2ka3 commented 7 months ago

The problem of invalid class names can probably be partly solved by editing the regex to recognize the type like this:

"before:( relative flex w-full )",

Now, only before:( and ) are invalid class names, but perhaps this will be easier to resolve?

I'm not a pro, so I hope you can find a way to develop this package further!