no-custom-classname plugin support

[francoismassart]

Plugin support for no-custom-classname rule

Description

This PR changes the strategy used to determine if each classname belong or does not belong to Tailwind CSS.

This new strategy allow to detect classnames generated by plugins.

Fixes:

• [BUG] tailwind plugin prose not supported #97
• Custom colors are not recognized when they are declared as functions #124
• [Feature request] Don't ignore removeDuplicates option when using officialSorting #127 (by mpsijm 🙏)
• [BUG] Using no-custom-classname with DaisyUI #129
• [BUG] Using arbitrary values like *-[color]/alpha in the class name causes an error in the "tailwindcss/no-custom-classname" rule #130
• [BUG] tailwindcss/classnames-order, className={relative w-full overflow-hidden ${(className)}} not working. #131
• [BUG] Adding nested color in tailwind.config triggers tailwindcss/no-custom-classname warning #145
• [BUG] classnames-order: Mismatch with prettier-plugin-tailwindcss with officialSorting enabled #142
• [BUG] border-spacing- class is not recognized #148

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Tested via unit tests visible in this PR

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[francoismassart]

This is a draft because the classnames generated by plugins are not always present in groups.js, they would not get sorted as expected.

I have to find a way to determine if a classname is generated by a plugin and which one...

UPDATE: there are also the additional cases where the plugin introduces a new modifier.
e.g. the typography plugin creates a bunch of prose-h1:, prose-a:, etc.

[francoismassart]

Maybe the officialSorting should default to true with the next release... and maybe custom order based on the groups.js file should be removed because the custom ordering logic is based on the latest part of each classname (containing the targeted property).

WDYT ?

[francoismassart]

If you are testing eslint-plugin-tailwindcss@3.6.0-beta.0

Take a moment to inspect the latest changelog:
https://github.com/francoismassart/eslint-plugin-tailwindcss/tree/fix/no-custom-classname-plugin-support#readme

[francoismassart]

Tested on my main project with no issue but a lot of re-ordering 😅

[charkour]

I didn't formally create a GH issue, but this release solved some of the issues with classnames generated from plugins (#97)! Thanks for the work updating this! Updated to v3.6.0 in my team's project and it works well.

Cheers! 🎉