FlatCompat not working anymore with eslint v9

[codeflorist]

I was using this solution to import the tailwindcss-plugin into the flat-config: https://github.com/antfu/eslint-config/issues/315#issuecomment-1799052876

this was working with eslint v8, but with v9 it is not working anymore. The tailwindcss-rules don't seem to get applied.

[nzakas]

It's very difficult to respond because you didn't provide any information.

Please create a StackBlitz that reproduces the error you are seeing. Then we can investigate.

[codeflorist]

@nzakas

Sure, no problem!

Here is a stackblitz project with eslint v8.57.0: https://stackblitz.com/edit/nuxt-starter-jhkmqy?file=app.vue

It correctly displays the following warnings from eslint-plugin-tailwindcss:

/home/projects/nuxt-starter-jhkmqy/app.vue
  2:8  warning  Invalid Tailwind CSS classnames order  tailwindcss/classnames-order

Here is the same project with eslint v9.1.1: https://stackblitz.com/edit/nuxt-starter-ncst5t?file=app.vue

It does not display the warnings.

(I don't know why the v9 stackblitz project is throwing all those peer dependency warnings on npm install. I doesn't happen in my real-world projects.)

The stackblitz examples use antfu/eslint-config with Nuxt 3. Using nuxt/eslint has the same problem.

Many thanks for taking a look at it and your general work on eslint!

[nzakas]

I don't think this has anything to do with the @eslint/eslintrc package. That is the same in both of your test cases. It's more likely this is a problem with ESLint itself, so moving to that repo.

Interestingly, it appears the configuration is correctly calculated in both cases. If you run this in both cases, you get the same result:

npx eslint --print-config app.vue

And if I run npx eslint app.vue --debug, it appears that the file is actually linted successfully.

My hunch: I think ESLint v9.0.0 might actually be generating a warning message but just not displaying it on the CLI.

Unfortunately, I'm offline for the next few days, but maybe someone else on @eslint/eslint-team can take a look.

[mdjermanovic]

It seems that the cause of the problem is that eslint-plugin-tailwindcss doesn't support ESLint v9 yet.

In particular, the plugin is still using context.parserServices property:

https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/lib/util/parser.js

This property has been removed in ESLint v9:

https://eslint.org/docs/latest/use/migrate-to-9.0.0#-removed-multiple-context-methods

https://eslint.org/blog/2023/09/preparing-custom-rules-eslint-v9/

When I replace context.parserServices with context.sourceCode.parserServices locally in the lib/util/parser.js file inside node_modules/eslint-plugin-tailwindcss, I'm getting the expected tailwindcss/classnames-order rule warning with ESLint v9.

Can you submit an issue to the plugin's repo?

https://github.com/francoismassart/eslint-plugin-tailwindcss

[codeflorist]

@mdjermanovic I've updated the corresponding issue with your info.

Many thanks for taking a look at it and for your detailed solution!