XantreDev commented 2 months ago

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 commented 2 months ago

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 commented 1 month ago

Hi @XantreDev, thank you for contributing to the project, I just published eslint-plugin-tailwindcss@3.17.1-beta.0 which contains your fix.

It should be published soon (finally 😅)

npm i eslint-plugin-tailwindcss@3.17.1-beta.0 -D

XantreDev commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

RaenonX commented 1 month ago

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 commented 1 month ago

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

npm i eslint-plugin-tailwindcss@3.17.3-beta.3 -D

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

Thank you for your feedbacks

RaenonX commented 1 month ago

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

npm i eslint-plugin-tailwindcss@3.17.3-beta.3 -D

Changes made: #346

Thank you for your feedbacks

@francoismassart Just tested, seems fine on my end.

Ran yarn add eslint-plugin-tailwindcss@3.17.3-beta.3 -D then eslint with & without clearing the cache.

francoismassart / eslint-plugin-tailwindcss