feat: support flat config

[kazupon]

support flat config

Description

Fixes #280

This PR supports flat config.
It is also compatible with existing configs.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

• Integration Test for flat config (tests/integrations/flat-config)
• Integration Test for legacy config (tests/integrations/legacy-config)

Test Configuration:

• OS + version: macOS Ventura 13.2.1
• NPM version: v10.2.5
• Node version: v18.19.1

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[kazupon]

for flat config, ecmaFeatures option is not added. Because the parser options should be specified by the user. especially, jsx: true should be supported by plugins like eslint-plugin-react, as mentioned in the eslint documentation.
https://eslint.org/docs/latest/use/configure/language-options#specifying-parser-options

BTW, ecmaFeatures for flat config built-in on the plugin side will cause eslint to output an error as shown below, so we cannot set them built-in:

Error: Key "languageOptions": Unexpected key "ecmaFeatures" found.
    at ObjectSchema.validate (/path/to/oss/tailwind/eslint-plugin-tailwindcss/tests/integrations/flat-config/node_modules/@humanwhocodes/object-schema/src/object-schema.js:287:23)
    at /path/to/oss/tailwind/eslint-plugin-tailwindcss/tests/integrations/flat-config/node_modules/@humanwhocodes/object-schema/src/object-schema.js:239:18
    at Array.reduce (<anonymous>)
    at ObjectSchema.merge (/path/to/oss/tailwind/eslint-plugin-tailwindcss/tests/integrations/flat-config/node_modules/@humanwhocodes/object-schema/src/object-schema.js:237:24)
    at /path/to/oss/tailwind/eslint-plugin-tailwindcss/tests/integrations/flat-config/node_modules/@humanwhocodes/config-array/api.js:935:42
    at Array.reduce (<anonymous>)
    at FlatConfigArray.getConfig (/path/to/oss/tailwind/eslint-plugin-tailwindcss/tests/integrations/flat-config/node_modules/@humanwhocodes/config-array/api.js:934:39)
    at FlatConfigArray.isFileIgnored (/path/to/oss/tailwind/eslint-plugin-tailwindcss/tests/integrations/flat-config/node_modules/@humanwhocodes/config-array/api.js:962:15)
    at /path/to/oss/tailwind/eslint-plugin-tailwindcss/tests/integrations/flat-config/node_modules/eslint/lib/eslint/eslint-helpers.js:504:38
    at Array.forEach (<anonymous>)

[yuheiy]

Aren’t ecmaFeatures supported in languageOptions.parserOptions?

  {
+   languageOptions: {
+     parserOptions: {
+       ecmaFeatures: {
+         jsx: true,
+       },
+     },
+   },
    plugins: {
      get tailwindcss() {
        return require('../index');
      },
    },
  },

ref: https://eslint.org/docs/latest/use/configure/configuration-files-new#configuration-objects

[kazupon]

Thanks!
oh, I've apparently mis-read the config docs, and I found that it is possible with flat config.

[kazupon]

about name, see the here

We can check flat config with eslint config inspector

[henrikvtcodes]

Is this close to being merged in and part of a new release? If there is any work that still needs to be done, I'd be willing to jump on it. I'm transitioning my projects to eslint v9 and I'll gladly help if that means this plugin can support v9 sooner.

[francoismassart]

Hi @kazupon,
thank you for contributing, I pulled your changes in a dedicated branch feat/flat-config-beta on this repo.

I also published a new beta release which includes your changes:
npm i eslint-plugin-tailwindcss@3.16.0-beta.0 -D

Do you understand why the tests are failing in the CICD ?

I get an error, also on my local machine:

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

[kazupon]

@francoismassart
I found out this test case was blocked in unit tests.

eslint-plugin-tailwindcss/tests/lib/rules/no-custom-classname.js

Lines 436 to 446 in 4d04a96

	{
	code: `
	<div class="some base white-listed classnames">
	from css file
	</div>`,
	options: [
	{
	cssFiles: ["./tests/**/*.css"],
	},
	],
	},

I'll check to see if my changes broke any cssFiles.

[kazupon]

Hi! @francoismassart
I've just fixed blocking issue.
I believe the CI/CD issue has also been resolved.

And ESLints were outputting API compatibility warnings.
So I have made compatible fixes in this commit.

[francoismassart]

Great, thank you @kazupon, I published a new beta version: npm i eslint-plugin-tailwindcss@3.16.0-beta.1, I'll share it and wait for feedbacks then we'll be good to go

[kazupon]

@francoismassart
Thank you for your publishing!
I've just tested at my day job project!
That's works!