feature: hide/show class attributes

[mtbaqer]

This is a Draft PR, the purpose of it is to work as a starting point, the code here is nowhere near being production-ready

Given the progress that was made in the area by vscode-inline-fold and vscode-explicit-folding, I wanted to make this Draft PR to provide an approach of implementing hiding and showing class attributes in the tailwind extension. This hopefully works as a starting point for the feature as well as to reopen the discussion on the topic.

Hoping to reopen issue #313 to work as a place for the conceptual discussion while keeping it here only for implementation details.

Disclaimer: Many elements of this PR were taken from the extensions above with heavy modifications to make them work with the rest of the extension.

Issues

• Fixes Feature request: toggle show/hide classnames #313
• Could potentially fix Recolour class text tailwindcss#6897 with minor tweaks

Demo

Demo.mov

Features

• Inline fold of class attributes (design inspired by Add the option to hide class attribute in vscode plugin tailwindcss#7922)

• Multiline fold using VSCode native folding.

• Toggle command (allowing for a keyboard shortcut) to enable/disable hiding class attributes.
• Auto show class content when cursor is within range or on selection.
• Multi-cursor support.
• Support current tailwindCSS.classAttributes extension setting.
• New tailwindCSS.experimental.foldClassAttributes settings value to disable the feature.

TODO

• Support tailwindCSS.includeLanguages setting.
• Allow an option to disable the auto unfolding, to make classes stay folded until toggled back.
• Fix known bugs:
  • When user manually unfolds a multiline class attribute, the first line stays inline folded
  • When user disables folding, multiline class attributes folded in documents beside the current one become "normally" folded by VSCode instead of unfolding.
• Reorganize current code (didn't know where to put the logic, so put everything in one file and added the calls at the very bottom of extension.ts).

[kossnocorp]

I just started working on a similar thing. I'm glad @adamwathan pointed me to it. It's such a fantastic idea, I can't wait for you guys to build it!

[surjithctly]

@mtbaqer Possible to make sure to see the ="" part all the time? Currently, it feels weird. So it would look like this:

<!-- ⛁ = tailwindcss logo ;) -->

<div class="⛁">
...

<!-- or maybe we could also show the number of classes as well? -->
<!-- [] = nice gray background -->

<div class="[⛁7]">
...

[bradlc]

Hey @mtbaqer, great work on this, the little Tailwind logo is a nice touch! 👏 I think that HTML attribute folding is a really cool idea, and one that a lot of Tailwind users would appreciate for those long class attributes!

I think there's a couple of reasons that we wouldn't want to add this to Tailwind CSS IntelliSense though:

1. I still don't think it's possible to build an inline folding extension that we would feel comfortable publishing. In particular existing implementations don't work well when word wrap is enabled. Maybe one day it will be possible (maybe it is now? I would love to be proven wrong), or we'll get first-party support for inline code folding 🤞
2. Implementation issues aside, this doesn't feel like a feature that belongs in Tailwind CSS IntelliSense. Attribute folding (even class attribute folding specifically) is not a Tailwind-specific feature, so it feels weird to me to include it in a Tailwind-specific extension. I think a standalone extension makes more sense, like vscode-inline-fold.

For those reasons I'm going to close this, I hope that's understandable 🙏

[mlntr]

this doesn't feel like a feature that belongs in Tailwind CSS IntelliSense. Attribute folding (even class attribute folding specifically) is not a Tailwind-specific feature, so it feels weird to me to include it in a Tailwind-specific extension. I think a standalone extension makes more sense, like vscode-inline-fold.

While it may not be Tailwind-only, it's an issue especially common to Tailwind to the point I think it would justify being included as an option. And there are Tailwind-specific aspects, for example, it could possibly be implemented in a way to only hide Tailwind attributes)

Unfortunately vscode-inline-fold's maintainer now declared it dead moalamri/vscode-inline-fold@e61fbfe moalamri/vscode-inline-fold#132 so would be great if this could be reconsidered