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

[soren121]

What:

Adds support for ESLint 9 to @emotion/eslint-plugin.

Closes #3211
Closes #3251

Why:

ESLint 9 contains breaking changes for plugins. We need to apply those changes, so that end-users may smoothly upgrade their projects to ESLint 9.

How:

I followed the upgrade guides for ESLint and TypeScript ESLint.

The plugin exports a plugin object for ESLint 9; the existing rules export is also maintained. The plugin doesn't export configurations, so no changes were needed for flat config support.

Some context methods were deprecated/removed in ESLint 9. The plugin uses the new methods when available, and falls back to the old methods when an older version of ESLint is in use.

I had to migrate the base project's ESLint setup to v9, because Yarn was unhappy with two different ESLint versions in the monorepo.

The Node version in CI was bumped from 16.x to 20.x, to meet ESLint's minimum Node version requirement (it's 18.18.0+, but might as well use 20.x.)

Checklist:

• Documentation N/A
• Tests
• Code complete
• Changeset

[changeset-bot]

🦋 Changeset detected

Latest commit: e70b975

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@emotion/eslint-plugin	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[soren121]

With TypeScript-ESLint 8's RuleTester, this causes an error due to overlapping fixes for cssPropWithPragma and templateLiterals. The new RuleTester tries to apply fixes for all errors, not just the first encountered.

To fix this, I split it into two tests, one for each fix.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

Attention: Patch coverage is 92.00000% with 2 lines in your changes missing coverage. Please review.

Project coverage is 94.81%. Comparing base (ad630e3) to head (940ed5d).
Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/eslint-plugin/src/rules/jsx-import.ts	88.23%	2 Missing ⚠️

Additional details and impacted files

Files with missing lines	Coverage Δ
...kages/eslint-plugin/src/rules/syntax-preference.ts	91.96% <100.00%> (+0.14%)	⬆️
packages/eslint-plugin/src/utils.ts	100.00% <100.00%> (ø)
packages/eslint-plugin/test/test-utils.ts	100.00% <100.00%> (ø)
packages/eslint-plugin/src/rules/jsx-import.ts	97.29% <88.23%> (-0.73%)	⬇️

[shunxing]

Hi @soren121, do you have any update on this PR ?

[soren121]

@shunxing Still waiting on the maintainers to take a look.

[yunseyeong]

💯

[yunseyeong]

yesterday, Node LTS Version is updated to 22, is it ok?
https://nodejs.org/en/about/previous-releases

[rodrigocfd]

@soren121 @yunseyeong Any updates on this PR?

[soren121]

@Andarist @emmatown Would it be possible for someone to take a look at this PR? The lack of support for ESLint 9 is holding end-users back from upgrading in their own projects, and there's plenty of community interest in getting this resolved.

I understand there's a few different semi-related things going on in this PR; if you'd like me to break it up into smaller PR's, I'm happy to do that.

[connebs]

Bump @Andarist

[mwkho]

Any news on this?

[eugenet8k]

Please, @Copilot please finish the job!

[sarahquigley]

any possibility of this being finalised? my team is blocked on upgrading eslint due to this issue.

[eugenet8k]

@sarahquigley there is a simple workaround, we moved to eslint v9 no problem, just add in your package.json

  "overrides": {
    "@emotion/eslint-plugin": {
      "eslint": ">=9.0.0"
    },

and eslint.confg.js roughly should have it as

import * as emotion from '@emotion/eslint-plugin'
import {fixupPluginRules} from '@eslint/compat'

export default defineConfig([
   ...

  {
    plugins: {
      '@emotion': fixupPluginRules(emotion),

    rules: {
       // your rules overrides
       '@emotion/import-from-emotion': 'error',
      '@emotion/no-vanilla': 'error',
      '@emotion/styled-import': 'error',