vscode extension feature request: being able to collapse the class attribute value

[ghost]

Hello

// A very long class attribute
<div class="w-full sm:w-auto flex-none bg-gray-900 hover:bg-gray-700 text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200"></div>

// solution
<div class="..."></div>

Explanation

• The cursor became a pointer when hovering over the "class" (just if it has some value).
• Hover on the "class" and you'll see the values(the classes) inside a little popup. (Avoid long animations to show and fade).
• Press the ctrl key and hover over the "class" and do left-click, to open the collapse. and click again on the "class" to collapse it.
• A configuration needed
  -- disabling animations entirely

Why

I sawed a lot of people using the @apply rule to avoid long classes In their template.

Please upvote. We, developers, deserve full-featured tools.

[fehmi]

This can be super cool!

Show first 2 or 3 and hide others with "..." example:

<button class="bg-red-500 text-white font-bold ...">
    Read More
</button>

[fehmi]

[h22-hub]

Hello
I created an extension that does this,
Check it out
GitHub