📦 refactor: no FlatCompat

jannajs · Oct 13, 2024 · 4ec3894 · 4ec3894
1 parent 608b359
commit 4ec3894
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 69 deletions.
diff --git a/demos/with-nextjs/src/components/Nav/index.tsx b/demos/with-nextjs/src/components/Nav/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-html-link-for-pages */
 import Link from 'next/link'
 import React from 'react'
 

diff --git a/package.json b/package.json
@@ -26,14 +26,14 @@
     "@eslint-react/eslint-plugin": "catalog:",
     "@jannajs/lint": "workspace:*",
     "@jannajs/tsconfig": "workspace:*",
-    "@next/eslint-plugin-next": "15.0.0-canary.187",
+    "@next/eslint-plugin-next": "catalog:",
     "@prettier/plugin-xml": "catalog:",
     "@types/node": "^20.14.11",
     "eslint": "catalog:",
     "eslint-plugin-format": "catalog:",
     "eslint-plugin-react-hooks": "catalog:",
     "eslint-plugin-react-refresh": "catalog:",
-    "eslint-plugin-tailwindcss": "^3.17.5",
+    "eslint-plugin-tailwindcss": "catalog:",
     "husky": "catalog:",
     "lint-staged": "catalog:",
     "turbo": "^2.1.3",

diff --git a/packages/lint/package.json b/packages/lint/package.json
@@ -64,9 +64,10 @@
   },
   "devDependencies": {
     "@jannajs/tsconfig": "workspace:*",
+    "@next/eslint-plugin-next": "catalog:",
     "@types/eslint": "^9.6.1",
-    "@types/eslint__eslintrc": "^2.1.2",
     "@types/node": "^20.14.2",
+    "eslint-plugin-tailwindcss": "catalog:",
     "rimraf": "^6.0.1",
     "tsx": "^4.19.1",
     "typescript": "catalog:",

diff --git a/packages/lint/src/eslint/rules/next.ts b/packages/lint/src/eslint/rules/next.ts
@@ -2,13 +2,10 @@ import path from 'node:path'
 import process from 'node:process'
 
 import { GLOB_SRC } from '@antfu/eslint-config'
-import { FlatCompat } from '@eslint/eslintrc'
 import { glob } from 'zx'
 
 import type { Linter } from 'eslint'
 
-const compat = new FlatCompat()
-
 /**
  * ref: https://github.com/vercel/next.js/blob/fe7322650b407a44a1900ef1ef09d19ca4c56e99/packages/eslint-plugin-next/src/utils/get-root-dirs.ts#L7
  */
@@ -45,7 +42,7 @@ export interface GetNextFlatConfigsOptions {
   }
 }
 
-export function getNextFlatConfigs(
+export async function getNextFlatConfigs(
   options: GetNextFlatConfigsOptions = {},
 ) {
   const { next } = options
@@ -73,38 +70,26 @@ export function getNextFlatConfigs(
     const nextRootDir = rootDirs.map((item) => {
       return path.join(mergedCwd, item)
     })
-    const nextPagesDir = nextRootDir.map((item) => {
-      return [
-        path.join(item, 'pages'),
-        path.join(item, 'src', 'pages'),
-      ]
-    }).flat()
 
-    rules.push(...compat.config({
-      extends: ['plugin:@next/next/core-web-vitals'],
-      rules: {
-        '@next/next/no-html-link-for-pages': [
-          'error',
-          // ref: https://github.com/vercel/next.js/issues/68752
-          nextPagesDir,
-        ],
+    const eslintPluginNext = await import('@next/eslint-plugin-next')
+    rules.push({
+      ...eslintPluginNext.configs.recommended,
+      plugins: {
+        '@next/next': eslintPluginNext,
       },
-    }).map((item) => {
-      return {
-        ...item,
-        settings: {
-          next: {
-            rootDir: nextRootDir,
-          },
+      name: 'janna/next',
+      settings: {
+        next: {
+          rootDir: nextRootDir,
         },
-        files: rootDirs.map((dirItem) => {
-          if (dirItem === '.') {
-            return GLOB_SRC
-          }
-          return `${dirItem}/${GLOB_SRC}`
-        }),
-      } satisfies Linter.Config
-    }))
+      },
+      files: rootDirs.map((dirItem) => {
+        if (dirItem === '.') {
+          return GLOB_SRC
+        }
+        return `${dirItem}/${GLOB_SRC}`
+      }),
+    })
     return rules
   }
 

diff --git a/packages/lint/src/eslint/rules/tailwind.ts b/packages/lint/src/eslint/rules/tailwind.ts
@@ -1,10 +1,7 @@
 import { GLOB_SRC } from '@antfu/eslint-config'
-import { FlatCompat } from '@eslint/eslintrc'
 
 import type { Linter } from 'eslint'
 
-const compat = new FlatCompat()
-
 export interface GetTailwindFlatConfigsOptions {
   /**
    * Requires installing:
@@ -19,7 +16,7 @@ export interface GetTailwindFlatConfigsOptions {
   }
 }
 
-export function getTailwindFlatConfigs(
+export async function getTailwindFlatConfigs(
   options: GetTailwindFlatConfigsOptions = {},
 ) {
   const { tailwind } = options
@@ -31,26 +28,29 @@ export function getTailwindFlatConfigs(
   }
 
   if (typeof tailwind === 'object') {
-    rules.push(...compat.config({
-      // eslint-plugin-tailwindcss
-      extends: ['plugin:tailwindcss/recommended'],
-      rules: {
-        'tailwindcss/no-custom-classname': 'off',
-        'tailwindcss/migration-from-tailwind-2': 'off',
-      },
-    }).map((item) => {
+    const eslintPluginTailwindCSS = await import('eslint-plugin-tailwindcss')
+    const files = tailwind.dirs.filter(Boolean).map((dirItem) => {
+      if (dirItem === '.') {
+        return GLOB_SRC
+      }
+
+      // html 格式需要等到 @angular-eslint/template-parser 适配
+      return `${dirItem}/${GLOB_SRC}`
+    })
+
+    rules.push(...eslintPluginTailwindCSS.configs['flat/recommended'].map((item) => {
       return {
         ...item,
-        files: tailwind.dirs.filter(Boolean).map((dirItem) => {
-          if (dirItem === '.') {
-            return GLOB_SRC
-          }
-
-          // html 格式需要等到 @angular-eslint/template-parser 适配
-          return `${dirItem}/${GLOB_SRC}`
-        }),
-      } satisfies Linter.Config
+        files,
+      }
     }))
+    rules.push({
+      name: 'janna/tailwind',
+      files,
+      rules: {
+        'tailwindcss/no-custom-classname': 'off',
+      },
+    })
     return rules
   }
 

diff --git a/packages/lint/src/shims.d.ts b/packages/lint/src/shims.d.ts
@@ -0,0 +1,25 @@
+declare module 'eslint-plugin-tailwindcss' {
+  import type { ESLint, Linter } from 'eslint'
+
+  declare const eslintPluginTailwindCSS: ESLint.Plugin & {
+    configs: {
+      'flat/recommended': Linter.Config[]
+      'recommended': Linter.LegacyConfig
+    }
+  }
+
+  export = eslintPluginTailwindCSS
+}
+
+declare module '@next/eslint-plugin-next' {
+  import type { ESLint, Linter } from 'eslint'
+
+  declare const eslintPluginNext: ESLint.Plugin & {
+    configs: {
+      'recommended': Linter.Config
+      'core-web-vitals': Linter.Config
+    }
+  }
+
+  export = eslintPluginNext
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -17,3 +17,5 @@ catalog:
   husky: ^9.1.6
   lint-staged: ^15.2.10
   typescript: ^5.5.4
+  eslint-plugin-tailwindcss: ^3.17.5
+  '@next/eslint-plugin-next': 15.0.0-canary.187