Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support flat config #330

Merged
merged 9 commits into from
May 22, 2024

Conversation

kazupon
Copy link
Contributor

@kazupon kazupon commented Mar 27, 2024

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

Copy link
Contributor Author

@kazupon kazupon Mar 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -9,6 +9,7 @@ const rules = require('./rules');

module.exports = [
{
name: 'tailwindcss:base',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

about name, see the here

We can check flat config with eslint config inspector
image

@henrikvtcodes
Copy link

henrikvtcodes commented Apr 25, 2024

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 francoismassart self-assigned this May 10, 2024
@francoismassart
Copy link
Owner

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
Copy link
Contributor Author

kazupon commented May 18, 2024

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

{
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
Copy link
Contributor Author

kazupon commented May 18, 2024

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
Copy link
Owner

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
Copy link
Contributor Author

kazupon commented May 21, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] Support eslint's new config file (flat) for recommended rules
4 participants