[Bug] readable-tailwind/multiline weird autofix behavior

[ivan-palatov]

Hi, I am using this plugin in a project with typescript and react, using legacy eslint config. There is a weird issue with the readable-tailwind/multiline rule in one particular situation which is repeated across different components in the project.

Component sample code:

function Foo() {
  return (
    <GroupRow
      folderBottomIcon={
        <WorkTwoToneIcon className="text-primary absolute bottom-1 right-0.5 !h-4 !w-4" />
      }
    />
  );
}

.eslintrc.json

"env": {
    "browser": true
  },
"plugins": [
    "@typescript-eslint",
    "prettier",
    "import",
    "react",
    "react-hooks",
    "readable-tailwind"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "prettier",
    "plugin:tailwindcss/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:readable-tailwind/warning"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest"
  },
  "settings": {
    "import/resolver": {
      "typescript": true,
      "node": true
    },
    "react": {
      "componentWrapperFunctions": ["observer"],
      "formComponents": ["FormDialog", "Form"],
      "linkComponents": [
        {
          "linkAttribute": "to",
          "name": "Link"
        }
      ],
      "version": "detect"
    }
  },

The problem

The auto fix first suggests the following change with the message Incorrect line wrapping: "text-primary absolute bottom-1 right-0.5 !h-4 !w-4":

function Foo() {
  return (
    <GroupRow
      folderBottomIcon={
        <WorkTwoToneIcon
          className={`
          text-primary absolute bottom-1 right-0.5 !h-4 !w-4
        `}
      }
    />
  );
}

But then it suggests reverting it back to the first code snippet with the message : Unnecessary line wrapping: "\n text-primary absolute bottom-1 right-0.5 !h-4 !w-4\n "

Also, I do believe this is the reason for heap out of memory crit when running eslint on this project:

Final comments

Also, I believe I should mention that the project in question is a part of nx monorepo with 12 other projects, all of which run and apply autofix no problem. I think there is an issue with the exact number for line wrapping not being handled correctly, although the number of symbols for the string in question is 90 with left spaces and 82 without.

[schoero]

Hi, thank you for the detailed error report. I am currently on vacation. I will be able to look into it in 3 weeks.

[schoero]

I tried to look into this today, but I'm having trouble to reproduce the error. Are you using the latest version of the plugin? I remember having this issue in older versions.

Can you post the output of npm ls eslint-plugin-readable-tailwind

[ivan-palatov]

@schoero sorry for the long wait, was working on a complex feature.

I am definitely using the latest version of the plugin. I could create a reproduction repo later in the week.

[schoero]

I published a new version. It does not fix the issue, but it provides better warnings and displays the before and after of the tailwind class string.

Maybe this can give us enough insights before you try to create a reproduction.

[schoero]

I ran into a similar issue today and published a fix for it in v1.8.2.

If this issue still persists after upgrading to v1.8.2, feel free to reopen.