francoismassart / eslint-plugin-tailwindcss

ESLint plugin for Tailwind CSS usage
https://www.npmjs.com/package/eslint-plugin-tailwindcss
MIT License
1.47k stars 70 forks source link

[BUG] no-custom-classname whitelist doesn't work with separators. #284

Open sphinxrave opened 11 months ago

sphinxrave commented 11 months ago

Version encountered: 3.13.0

I'd like to reopen issue #237. Essentially, if you have a iconify icon such as i-heroicons:chevron-up-solid, this is not no-custom-classname whitelist-able due to whitelists only matching after separators or something.

Here's the test case from a branch on this repo:

      code: `<div className="flex skin-summer custom-2 i-heroicons:chevron-up-solid">whitelisted</div>`,
      options: [
        {
          whitelist: ["skin\\-(summer|xmas)", "custom\\-[1-3]", "i-heroicons:chevron-up-solid"],

The issue was already resolved using a 3.11.1-beta.0 beta branch, commit 19423d8e2f8cca5729da717321cd08146a5b96bf, but the branch fix/237-whitelist-with-separator never was merged into the main branch, afaik, and the test case in that branch also never made it to main.

Using that older beta release is not satisfying fix as other bigger errors pop up.

I think part of the reason why it didn't make it in was because everything with separators was only analyzed using the whitelist, which was too brute force?