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.

Sign up for GitHub

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

Jump to bottom

[Feature request] Automatic whitespace removal #263

Open
kachkaev opened this issue Jul 21, 2023 · 18 comments · May be fixed by #370
Open

[Feature request] Automatic whitespace removal #263

kachkaev opened this issue Jul 21, 2023 · 18 comments · May be fixed by #370
Labels
enhancement New feature or request

Comments

@kachkaev
Copy link
Contributor

kachkaev commented Jul 21, 2023 •
edited
Loading

Is your feature request related to a problem? Please describe.

When using TailwindCSS, my teammates and I often end up with multiple spaces in the list of classes:

<div className="    flex   w-full space-x-4      items-center ">...</div>

When we apply autofix (tailwindcss/classnames-order), class names are reordered but extra spaces between them are not removed:

<div className="    flex   w-full items-center      space-x-4 ">...</div>

Describe the solution you'd like

I understand that certain teams might want to keep the original spacing, e.g. when someone wants to align class names of different width. However, it’d be great to have an option to auto-remove them:

<div className="flex w-full items-center space-x-4">...</div>

How about a new rule, say, tailwind/whitespace?

Describe alternatives you've considered
I looked around for potential ESLint rules in other plugins but could not find anything that would cover this case. Even if there exists something for className="..." outside eslint-plugin-tailwindcss, that solution would not be ideal. Spaces should be removed from all TailwindCSS-related strings, e.g. inside cn() and other configured functions. So it feels like this rule does belong to this plugin.

Additional context
See #1, which is the original feature request for this behavior. The issue was fixed in 46717c8 but was then discontinued in #126. You can tell this by the removal of a relevant test case.
@kachkaev kachkaev added the enhancement New feature or request label Jul 21, 2023
@kachkaev kachkaev mentioned this issue Jul 21, 2023
Closed
@kachkaev
Copy link
Contributor Author

👋 @francoismassart! Would you be willing to a accept a PR for this?

@AndonMitev
Copy link

Hey please can we have this PR approved looks like common issue to put extra spaces in classNames

@manyuemeiquqi
Copy link

I think it's a good suggestion,i need it.

@stefanofa
Copy link

Any update on this?

@kachkaev
Copy link
Contributor Author

kachkaev commented Nov 27, 2023 •
edited
Loading

Happy to try a PR if it has chances to get released. The latest commit on master was on Jun 27. I just want to make sure that the repo is actively maintained before investing time in a new rule. WDYT @francoismassart?

@kachkaev kachkaev mentioned this issue Dec 19, 2023
Open
@ziyafenn
Copy link

Is there no progress on this? Would be a killer feature as tailwind intellisense extension stopped supporting this too.

@kachkaev
Copy link
Contributor Author

kachkaev commented Jan 18, 2024 •
edited
Loading

👋 @francoismassart, congrats on a new release and thanks for merging #308! Glad that you’re still looking after this plugin.

WDYT of tailwind/whitespace as a new rule? I can try to create a PR if it has chances of getting released. This issue is the top-voted one at the moment:

Screenshot 2024-01-18 at 14 19 39

@thenbe
Copy link

thenbe commented Feb 23, 2024

eslint-plugin-unocss has a similar rule (no-excessive-whitespaces) that can be used for inspiration.

@thenbe thenbe mentioned this issue Feb 23, 2024
Closed
@JacobZyy
Copy link

Is there no progress on this?

@kachkaev
Copy link
Contributor Author

kachkaev commented May 31, 2024 •
edited
Loading

Automatic whitespace removal is supported in prettier-plugin-tailwindcss since v0.6.0:

Hope to see this in eslint-plugin-tailwindcss too! Still happy to try a PR if @francoismassart is open to adding the rule. Waiting for his opinion.

@coderwyd
Copy link

This feature is very useful, it would be really nice to add this rule.

@maltsavkiryl
Copy link

Any update on this? :)

@kachkaev
Copy link
Contributor Author

Waiting for green light from @francoismassart

@mmairs9
Copy link

mmairs9 commented Sep 4, 2024

+1

@rostyslav-nabok
Copy link

I'm really looking forward to this update, I hope it happens soon...

@Ericlm Ericlm linked a pull request Oct 26, 2024 that will close this issue
Open
11 tasks
@Omar-Elmassry
Copy link

is there any update on this ? the official tailwind prettier plugin has this feature now and i was using it until i found out there was some conflicts between prettier-plugin-tailwindcss and this eslint plugin so i removed the prettier one and now stuck with this problem.

@Jevin0
Copy link

Jevin0 commented Dec 6, 2024

+1

@shubhankarval
Copy link

Can we get this feature PR merged, would be really helpful? @francoismassart

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: add no-multiple-whitespace rule Ericlm/eslint-plugin-tailwindcss