no-custom-classname: perf optimization

[XantreDev]

no-custom-classname: perf optimization

Description

Reduced both sync IO time and reduced js performance overhead

Fixes #276

Type of change

Please delete options that are not relevant.

• [x] Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• [x] Runned repository tests

Test Configuration:

• OS + version: Windows 11
• NPM version: 10.5.0
• Node version: 20.12.0

Checklist:

• [ ] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [x] 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

[XantreDev]

Checked in our react-native project 15s -> 2.4s. 6x performance boost

Before:

✖ 13 problems (0 errors, 13 warnings)

Rule                                    | Time (ms) | Relative
:---------------------------------------|----------:|--------:
tailwindcss/no-custom-classname         | 15016.088 |    47.9%
@typescript-eslint/no-misused-promises  |  8721.884 |    27.8%
import/no-duplicates                    |  1842.079 |     5.9%
@typescript-eslint/no-floating-promises |   828.843 |     2.6%
tailwindcss/classnames-order            |   809.069 |     2.6%
tailwindcss/enforces-shorthand          |   765.008 |     2.4%
tailwindcss/no-contradicting-classname  |   655.226 |     2.1%
react/no-unstable-nested-components     |   446.134 |     1.4%
unused-imports/no-unused-imports        |   260.493 |     0.8%
jest/no-disabled-tests                  |   246.434 |     0.8%

After:

✖ 13 problems (0 errors, 13 warnings)

Rule                                    | Time (ms) | Relative
:---------------------------------------|----------:|--------:
@typescript-eslint/no-misused-promises  |  8704.810 |    46.5%
tailwindcss/no-custom-classname         |  2405.613 |    12.9%
import/no-duplicates                    |  1930.955 |    10.3%
@typescript-eslint/no-floating-promises |   880.225 |     4.7%
tailwindcss/enforces-shorthand          |   792.588 |     4.2%
tailwindcss/no-contradicting-classname  |   630.478 |     3.4%
tailwindcss/classnames-order            |   576.570 |     3.1%
react/no-unstable-nested-components     |   467.783 |     2.5%
unused-imports/no-unused-imports        |   253.199 |     1.4%
jest/no-disabled-tests                  |   244.996 |     1.3%

[francoismassart]

Hi @XantreDev, thank you for contributing to the project, I just published [email protected] which contains your fix.

It should be published soon (finally 😅)

npm i [email protected] -D

[XantreDev]

I think I can be improved even further but I need to separate LSP from regular eslint. In case of client we don't need to make fs call ones

[RaenonX]

Hi, sorry if this is not the right place to ask/report, but after this update, my main code repo starts reporting false-negative of tailwindcss/no-custom-classname with the class names defined in the custom css of the section @layer utilies. I can confirm that it worked fine with 3.17.0.

I did try create a reproduction repo, but unfortunately I am unable to reproduce the bug. Since my main repo is quite large, it will be very hard to nail down what the other dependency might be causing the issue :(

The main repo is using next.js, and the repro repo was initialized using yarn create-next-app. The main repo is currently private, but let me know what else might be needed to help investigating.

I took a look in the code of this, which I assume is the only change for 3.17.1 if I am not mistaken, but I couldn't found something suspicious that causes this disconnection between globals.css of the repro repo from yarn create-next-app and this.

[francoismassart]

HI, for now, I'll revert back to 3.17.0 and publish as a new patch version => 3.17.2

[RaenonX]

HI, for now, I'll revert back to 3.17.0 and publish as a new patch version => 3.17.2

Thanks! Appreciate your fast response.

[francoismassart]

@RaenonX & @snyamathi could you try out the latest beta ?

npm i [email protected] -D

Changes made: https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/346

Thank you for your feedbacks

[RaenonX]

@RaenonX & @snyamathi could you try out the latest beta ?

npm i [email protected] -D

Changes made: #346

Thank you for your feedbacks

@francoismassart Just tested, seems fine on my end.

Ran yarn add [email protected] -D then eslint with & without clearing the cache.