[BUG] tailwindcss/classnames-order, className={relative w-full overflow-hidden ${(className)}} not working.

[demonguyj]

className={relative w-full overflow-hidden ${(className)}}

is not linting.

Expected behavior
className={overflow-hidden relative w-full ${className}}

Environment (please complete the following information):

OS: windows10
Softwares + version used:
VSCode 1.65.1
eslint-plugin-tailwindcss 3.5.0
tailwindcss 3.0.23
npm 7.23.0
node v14.17.6

[francoismassart]

@demonguyj are you expecting that this input:

className={`overflow-hidden relative w-full ${(className)}`}

becomes

className={`overflow-hidden relative w-full ${className}`}

after linting ?

I made an isolated test (without the parentheses) like so:

https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/132/files#diff-57cc0aaec7751e5830fd721783391b306e25da9e6f57e56d2cd6d17bcd4d024fR257

    {
      code: `
      <div className={\`overflow-hidden relative w-full ${"className"}\`}>Issue #131</div>
      `,
    },

and it passes.

Can you give me more infos about your issue ?

[demonguyj]

Hello 👋

I hope sorting classes.

Input:

1. className={relative w-full overflow-hidden ${className}}
2. className={test ${(open === false) ? relative invisible overflow-hidden : ``}}

Now(same like Input):

1. className={relative w-full overflow-hidden ${className}}
2. className={test ${(open === false) ? relative invisible overflow-hidden : ``}}

Expect:

1. className={overflow-hidden relative w-full ${className}}
2. className={test ${(open === false) ? invisible relative overflow-hidden : ``}}

[francoismassart]

I just published a beta version with the fixes listed on #132
https://github.com/francoismassart/eslint-plugin-tailwindcss/tree/fix/no-custom-classname-plugin-support#readme

npm i eslint-plugin-tailwindcss@3.6.0-beta.0

Please give it a try and provide feedback and or issues 👍
Thank you

[demonguyj]

Thanks for your feedback. :)
I tested 3.6.0-beta.0.
But not yet fixed... :(
I explained test case.
It will be help for your works.
Thx!

1. Input case1
   
   -> Expected result.

2. Input case2
   
   -> Not showing warning.

2-1) Expected

-> w-full, h-full position is switched.

[francoismassart]

The issue is caused by the fact that the plugin only support litteral value for now but I made a patch for this, it will be available in the next beta

[francoismassart]

@demonguyj please try using this beta version:

npm i eslint-plugin-tailwindcss@3.6.0-beta.1

It should work for you

[demonguyj]

@francoismassart It's works well :)
Thanks!

[francoismassart]

Should be fixed in the latest release 3.6.0

Make sure to:

1. Update the eslint-plugin-tailwindcss package
2. Restart your editor
3. Report any issue on this repo