Updated eslint config for TailwindCSS #23739
Conversation
peterzimon
changed the title
WalkthroughThe ESLint configuration files for the Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
apps/stats/.eslintrc.cjsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "/apps/stats".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in "apps/stats/.eslintrc.cjs". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. apps/posts/.eslintrc.cjsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "/apps/posts".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in "apps/posts/.eslintrc.cjs". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. apps/admin-x-settings/.eslintrc.cjsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react-hooks". (The package "eslint-plugin-react-hooks" was not found when loaded as a Node module from the directory "/apps/admin-x-settings".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react-hooks" was referenced from the config file in "apps/admin-x-settings/.eslintrc.cjs". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (3)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/posts/.eslintrc.cjs (1)
51-54: Use a DRY approach for repeatedpath.joincalls
Consider cachingpath.join(__dirname, 'tailwind.config.cjs')in a variable to reduce repetition across rule configs:+ const tailwindConfigPath = path.join(__dirname, 'tailwind.config.cjs'); ... - 'tailwindcss/classnames-order': ['error', {config: path.join(__dirname, 'tailwind.config.cjs')}], - 'tailwindcss/enforces-negative-arbitrary-values': ['warn', {config: path.join(__dirname, 'tailwind.config.cjs')}], - 'tailwindcss/enforces-shorthand': ['warn', {config: path.join(__dirname, 'tailwind.config.cjs')}], - 'tailwindcss/migration-from-tailwind-2': ['warn', {config: path.join(__dirname, 'tailwind.config.cjs')}], - 'tailwindcss/no-contradicting-classname': ['error', {config: path.join(__dirname, 'tailwind.config.cjs')}] + 'tailwindcss/classnames-order': ['error', {config: tailwindConfigPath}], + 'tailwindcss/enforces-negative-arbitrary-values': ['warn', {config: tailwindConfigPath}], + 'tailwindcss/enforces-shorthand': ['warn', {config: tailwindConfigPath}], + 'tailwindcss/migration-from-tailwind-2': ['warn', {config: tailwindConfigPath}], + 'tailwindcss/no-contradicting-classname': ['error', {config: tailwindConfigPath}]Also applies to: 57-57
apps/stats/.eslintrc.cjs (1)
51-54: Consolidate repeated config paths into a single variable
To make future updates easier and keep the file DRY, extract the commonpath.joincall into a constant:+ const tailwindConfigPath = path.join(__dirname, 'tailwind.config.cjs'); ... - 'tailwindcss/classnames-order': ['error', {config: path.join(__dirname, 'tailwind.config.cjs')}], - 'tailwindcss/enforces-negative-arbitrary-values': ['warn', {config: path.join(__dirname, 'tailwind.config.cjs')}], - 'tailwindcss/enforces-shorthand': ['warn', {config: path.join(__dirname, 'tailwind.config.cjs')}], - 'tailwindcss/migration-from-tailwind-2': ['warn', {config: path.join(__dirname, 'tailwind.config.cjs')}], - 'tailwindcss/no-contradicting-classname': ['error', {config: path.join(__dirname, 'tailwind.config.cjs')}] + 'tailwindcss/classnames-order': ['error', {config: tailwindConfigPath}], + 'tailwindcss/enforces-negative-arbitrary-values': ['warn', {config: tailwindConfigPath}], + 'tailwindcss/enforces-shorthand': ['warn', {config: tailwindConfigPath}], + 'tailwindcss/migration-from-tailwind-2': ['warn', {config: tailwindConfigPath}], + 'tailwindcss/no-contradicting-classname': ['error', {config: tailwindConfigPath}]Also applies to: 57-57
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/posts/.eslintrc.cjs(2 hunks)apps/stats/.eslintrc.cjs(2 hunks)
🔇 Additional comments (2)
apps/posts/.eslintrc.cjs (1)
2-3: Importing Node 'path' for absolute Tailwind config resolution
Thepathmodule is correctly required with a disable comment for the var-requires rule.apps/stats/.eslintrc.cjs (1)
2-3: Importing Node 'path' for absolute Tailwind config resolution
Thepathmodule import is correct and appropriately silenced for var-requires.
Problem: classname ordering is getting messed up in monorepos using eslint-plugin-tailwindcss. This is especially a problem when you want to update classname ordering automatically on save because the wrong order would be saved which fails tests on CI. According to this issue (francoismassart/eslint-plugin-tailwindcss#241) using absolute URL for the tailwind config file could help with the issue.
peterzimon
force-pushed
the
test-tailwind-eslint
branch
from
b6d0260 to
97b620d
Compare
Problem: classname ordering is getting messed up in monorepos using eslint-plugin-tailwindcss. This is especially a problem when you want to update classname ordering automatically on save because the wrong order would be saved which fails tests on CI.
According to this issue (francoismassart/eslint-plugin-tailwindcss#241) using absolute URL for the tailwind config file could help with the issue.