Add support for ESLint 9 to @emotion/eslint-plugin

.changeset/four-items-love.md

@@ -0,0 +1,5 @@
+---
+'@emotion/eslint-plugin': minor
+---
+
+Adds support for ESLint 9

.github/actions/ci-setup/action.yml

@@ -1,11 +1,12 @@
 name: 'CI setup'
+description: 'Installs Node.js and package dependencies.'
 runs:
   using: 'composite'
   steps:
-    - name: Setup Node.js 16.x
-      uses: actions/setup-node@v3
+    - name: Setup Node.js 20.x
+      uses: actions/setup-node@v4
       with:
-        node-version: 16.x
+        node-version: '>=20.9.0'
         cache: yarn
 
     - name: Install Dependencies

.github/workflows/main.yml

@@ -78,6 +78,9 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/ci-setup
 
+      - name: Build project
+        run: yarn build
+
       - name: ESLint
         run: yarn lint:check
 

eslint.config.mjs

@@ -0,0 +1,63 @@
+import globals from 'globals'
+import prettierRecommended from 'eslint-plugin-prettier/recommended'
+import emotion from '@emotion/eslint-plugin'
+import react from 'eslint-plugin-react'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  {
+    ignores: [
+      '**/lib/',
+      '**/dist/',
+      '**/coverage/',
+      '**/node_modules/',
+      '**/stylis.min.js',
+      'demo/dist',
+      'site/out'
+    ]
+  },
+  tseslint.configs.eslintRecommended,
+  {
+    plugins: {
+      '@emotion': emotion,
+      react
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+      globals: {
+        ...globals.browser
+      }
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: 0
+    },
+    rules: {
+      camelcase: 0,
+      'no-template-curly-in-string': 0,
+      'prefer-const': 0,
+      'no-unused-vars': 0,
+      'prettier/prettier': [
+        'error',
+        {
+          parser: 'typescript'
+        }
+      ],
+      'react/jsx-curly-brace-presence': 0,
+      'react/jsx-handler-names': 0,
+      'react/no-unused-prop-types': 0,
+      'react/prop-types': 0,
+      'react/react-in-jsx-scope': 0,
+      '@emotion/pkg-renaming': 2
+    }
+  },
+  {
+    files: ['**/*.test.js', '**/__tests__/**'],
+    ignores: ['**/__fixtures__/*'],
+    languageOptions: {
+      globals: {
+        ...globals.jest
+      }
+    }
+  },
+  prettierRecommended
+)

package.json

@@ -43,76 +43,6 @@
     "css",
     "css-in-js"
   ],
-  "eslintConfig": {
-    "extends": [
-      "prettier",
-      "plugin:@typescript-eslint/eslint-recommended"
-    ],
-    "plugins": [
-      "prettier",
-      "@emotion",
-      "react",
-      "@typescript-eslint"
-    ],
-    "parser": "@typescript-eslint/parser",
-    "rules": {
-      "camelcase": 0,
-      "no-template-curly-in-string": 0,
-      "prefer-const": 0,
-      "no-unused-vars": 0,
-      "prettier/prettier": [
-        "error",
-        {
-          "parser": "typescript"
-        }
-      ],
-      "react/jsx-curly-brace-presence": 0,
-      "react/jsx-handler-names": 0,
-      "react/no-unused-prop-types": 0,
-      "react/prop-types": 0,
-      "react/react-in-jsx-scope": 0,
-      "@emotion/pkg-renaming": 2
-    },
-    "env": {
-      "browser": true
-    },
-    "overrides": [
-      {
-        "files": [
-          "*.test.js",
-          "**/__tests__/**"
-        ],
-        "env": {
-          "jest": true
-        }
-      },
-      {
-        "files": [
-          "**/packages/**/*.ts",
-          "**/packages/**/*.tsx"
-        ],
-        "rules": {
-          "prettier/prettier": [
-            "error",
-            {
-              "parser": "typescript"
-            }
-          ]
-        }
-      },
-      {
-        "files": [
-          "**/__fixtures__/*"
-        ],
-        "rules": {
-          "no-unused-vars": 0
-        },
-        "env": {
-          "jest": false
-        }
-      }
-    ]
-  },
   "workspaces": {
     "packages": [
       "packages/*",
@@ -189,8 +119,6 @@
     "@types/jest": "^29.5.12",
     "@types/node": "^12.20.37",
     "@types/react": "18.2.6",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
     "babel-check-duplicated-nodes": "^1.0.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.7.0",
@@ -204,14 +132,14 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "eslint": "^8.57.0",
+    "eslint": "^9.10.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react": "^1.1.7",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^6.4.0",
+    "eslint-plugin-react": "^7.35.2",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "globals": "^15.9.0",
     "html-tag-names": "^1.1.2",
     "husky": "^3.0.9",
     "jest": "^29.7.0",
@@ -240,6 +168,7 @@
     "svg-tag-names": "^1.1.1",
     "through": "^2.3.8",
     "typescript": "^5.4.5",
+    "typescript-eslint": "^8.3.0",
     "unified": "^6.1.6",
     "webpack-bundle-analyzer": "3.3.2"
   },

packages/eslint-plugin/package.json

@@ -29,14 +29,14 @@
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/eslint-plugin",
   "peerDependencies": {
-    "eslint": "6 || 7 || 8"
+    "eslint": "^6 || ^7 || ^8 || ^9"
   },
   "dependencies": {
-    "@typescript-eslint/utils": "^5.25.0"
+    "@typescript-eslint/utils": "^8.5.0"
   },
   "devDependencies": {
-    "@types/eslint": "^7.0.0",
-    "eslint": "^8.57.0",
-    "resolve-from": "^5.0.0"
+    "@typescript-eslint/rule-tester": "^8.5.0",
+    "eslint": "^9.10.0",
+    "espree": "^10.1.0"
   }
 }

packages/eslint-plugin/src/index.ts

@@ -5,6 +5,8 @@ import styledImport from './rules/styled-import'
 import jsxImport from './rules/jsx-import'
 import pkgRenaming from './rules/pkg-renaming'
 
+const { name, version } = require('../package.json')
+
 export const rules = {
   'import-from-emotion': importFromEmotion,
   'no-vanilla': noVanilla,
@@ -13,3 +15,13 @@ export const rules = {
   'jsx-import': jsxImport,
   'pkg-renaming': pkgRenaming
 }
+
+const plugin = {
+  meta: {
+    name,
+    version
+  },
+  rules
+}
+
+export default plugin