Merge branch 'feat/classnames-sort' into chore/infrastructure-upgrade2

web/eslint.config.mjs

@@ -2,22 +2,12 @@ import {
   GLOB_TESTS, combine, javascript, node,
   stylistic, typescript, unicorn,
 } from '@antfu/eslint-config'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import js from '@eslint/js'
-import { FlatCompat } from '@eslint/eslintrc'
 import globals from 'globals'
 import storybook from 'eslint-plugin-storybook'
-import { fixupConfigRules } from '@eslint/compat'
+// import { fixupConfigRules } from '@eslint/compat'
 import tailwind from 'eslint-plugin-tailwindcss'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-})
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
 
 export default combine(
   stylistic({
@@ -73,10 +63,10 @@ export default combine(
   node(),
   // use nextjs config will break @eslint/config-inspector
   // use `ESLINT_CONFIG_INSPECTOR=true pnpx @eslint/config-inspector` to check the config
-  ...process.env.ESLINT_CONFIG_INSPECTOR
-    ? []
-    // TODO: remove this when upgrade to nextjs 15
-    : fixupConfigRules(compat.extends('next')),
+  // ...process.env.ESLINT_CONFIG_INSPECTOR
+  //   ? []
+  // TODO: remove this when upgrade to nextjs 15
+  // : fixupConfigRules(compat.extends('next')),
   {
     rules: {
       // performance issue, and not used.
@@ -86,7 +76,6 @@ export default combine(
   {
     ignores: [
       '**/node_modules/*',
-      '**/node_modules/',
       '**/dist/',
       '**/build/',
       '**/out/',
@@ -141,6 +130,13 @@ export default combine(
     },
   },
   storybook.configs['flat/recommended'],
+  reactRefresh.configs.recommended,
+  {
+    rules: reactHooks.configs.recommended.rules,
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+  },
   // need futher research
   {
     rules: {
@@ -169,15 +165,40 @@ export default combine(
   },
   tailwind.configs['flat/recommended'],
   {
+    settings: {
+      tailwindcss: {
+        // These are the default values but feel free to customize
+        callees: ['classnames', 'clsx', 'ctl', 'cn'],
+        config: 'tailwind.config.js', // returned from `loadConfig()` utility if not provided
+        cssFiles: [
+          '**/*.css',
+          '!**/node_modules',
+          '!**/.*',
+          '!**/dist',
+          '!**/build',
+          '!**/.storybook',
+          '!**/.next',
+          '!**/.public',
+        ],
+        cssFilesRefreshRate: 5_000,
+        removeDuplicates: true,
+        skipClassAttribute: false,
+        whitelist: [],
+        tags: [], // can be set to e.g. ['tw'] for use in tw`bg-blue`
+        classRegex: '^class(Name)?$', // can be modified to support custom attributes. E.g. "^tw$" for `twin.macro`
+      },
+    },
     rules: {
       // due to 1k lines of tailwind config, these rule have performance issue
       'tailwindcss/no-contradicting-classname': 'off',
-      'tailwindcss/no-unnecessary-arbitrary-value': 'off',
       'tailwindcss/enforces-shorthand': 'off',
       'tailwindcss/no-custom-classname': 'off',
+      'tailwindcss/no-unnecessary-arbitrary-value': 'off',
 
-      // in the future
-      'tailwindcss/classnames-order': 'off',
+      'tailwindcss/classnames-order': 'warn',
+      'tailwindcss/enforces-negative-arbitrary-values': 'warn',
+      'tailwindcss/no-arbitrary-value': 'warn',
+      'tailwindcss/migration-from-tailwind-2': 'warn',
     },
   },
 )

web/package.json

@@ -130,11 +130,11 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.8.0",
+    "@antfu/eslint-config": "^4.1.1",
+    "@eslint/js": "^9.20.0",
     "@chromatic-com/storybook": "^3.1.0",
     "@eslint-react/eslint-plugin": "^1.15.0",
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.13.0",
     "@faker-js/faker": "^9.0.3",
     "@next/eslint-plugin-next": "15.2.3",
     "@rgrove/parse-xml": "^4.1.0",
@@ -172,12 +172,12 @@
     "bing-translate-api": "^4.0.2",
     "code-inspector-plugin": "^0.18.1",
     "cross-env": "^7.0.3",
-    "eslint": "^9.13.0",
-    "eslint-config-next": "15.2.3",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.13",
-    "eslint-plugin-storybook": "^0.10.1",
-    "eslint-plugin-tailwindcss": "^3.17.5",
+    "eslint": "^9.20.1",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-tailwindcss": "^3.18.0",
+    "eslint-config-next": "^15.0.0",
     "husky": "^9.1.6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -189,6 +189,7 @@
     "tailwindcss": "^3.4.14",
     "ts-node": "^10.9.2",
     "typescript": "4.9.5",
+    "typescript-eslint": "^8.23.0",
     "uglify-js": "^3.19.3"
   },
   "resolutions": {