feat: support tailwind config in typescript

[quesabe]

Support tailwind config written in typescript as well as other common extensions

Description

• Replace simple require on tailwind config with the loadConfig function from tailwindcss package that supports typescript parsing
• Switch from hardcoded name for default config to resolveDefaultConfigPath function from tailwindcss package that looks for one of ./tailwind.config.{js,cjs,mjs,ts}
• Update tailwindcss to v3.3.x in order to import the new functionality from the package
• Because of update beyond v3.3.0 an additional fixes were made for classnames-order rule tests since tailwindcss changed the ordering function at v3.3.0.

Fixes #228

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

In a any project with tailwindcss and eslint-plugin-tailwindcss that utilises a JS-based config:

• define some custom theme in the config (I used theme: {colors: {blueish: #0000aa}};
• use a class based on the custom theme (text-blueish in my case);
• ensure the rule does not work (no-custom-classname in my case);
• rename config to ts extension;
• add typings so that the file is not parsable by a JS engine;
• check that the rule reports the custom class (evidently because config is not loaded);
• switch the eslint-plugin-tailwindcss in package.json to the local repo checked out from this branch;
• now the custom config shall be loaded correctly and the rule again does not report.

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]

👋 @quesabe
Thank you for contributing, 🙏
I just published your PR in the beta channel

npm i [email protected]

I'll run it against my current project for a last test prior to release.

[francoismassart]

Looking good except that I had to update my project's dependency to:

[email protected]

I'm planning to release it this monday, if some users of the plugin want to try the beta version and provide feedback and it would be appreciated as well.

Cheers

[getinnocuous]

I've tested this out and it works fine for me! Below are all of my tailwind related dependencies

"prettier": "^2.8.1",
"prettier-plugin-tailwindcss": "^0.2.7",
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
"eslint-config-next": "^13.3.0",
"@typescript-eslint/eslint-plugin": "^5.52.0",
"@typescript-eslint/parser": "^5.52.0",
"eslint": "^8.39.0",
"eslint-config-next": "^13.3.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-tailwindcss": "^3.12.0-beta.0",
"eslint-plugin-unicorn": "^47.0.0",
"tailwind-merge": "^1.12.0",
"tailwindcss": "^3.3.1",
"tailwindcss-animate": "^1.0.5",
"tailwindcss-radix": "^2.8.0",
"@tailwindcss/forms": "^0.5.3",

Edit: adding eslint & prettier dependencies too

[pm0u]

Also seems to be working properly for me IDE & CLI, alongside prettier as well.

    "eslint": "8.28.0",
    "eslint-config-next": "13.1.2",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard-with-typescript": "^24.0.0",
    "eslint-mdx": "^2.0.5",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-mdx": "^2.0.5",
    "eslint-plugin-n": "^15.6.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-storybook": "^0.6.8",
    "eslint-plugin-tailwindcss": "3.12.0-beta.0",
    "prettier": "^2.8.1",
    "prettier-plugin-tailwindcss": "^0.2.6",
    "tailwindcss": "^3.3.2",

[itsmingjie]

Thanks, @quesabe!