[Feature Request] Option to truncate classes after specified length

[AndrewBogdanovTSS]

Describe the bug It's not a bug but a feature request

How it should work

• Plugin should truncate classes. There should be 2 options:
  1. Always
  2. After specified length.
• Classes should expand when user click inside on them
• Classes sould appear as tooltip when user hover over truncated state

Why it's needed? Reduces mental complexity in the heavily styled large files

Examples:

Before:

class=":uno: absolute h-12 w-12 flex center rounded-full bg-black <md:(left-1/2) -translate-x-1/2"

After: option 1:

class="..."

option 2:

class=":uno: absolute h-12 w-12 ..."

[re-ovo]

Code folding is already supported

[AndrewBogdanovTSS]

interesting. Could you explain how it can be enabled?

[re-ovo]

interesting. Could you explain how it can be enabled?

It uses the folding shortcut provided by Intellij, which you can view in the Code > Folding menu

[AndrewBogdanovTSS]

Can you specify which exact option? I use Webstorm and I don't see anything specific to class names

[re-ovo]

I mean this, or use shortcut Ctrl+Numpad-

[AndrewBogdanovTSS]

If I understand correctly these settings only allow to manually toggle specific portions, what I'm looking for is a default behavior. When I enter a file I would like classes to be folded by default and expanded only on click. Is there a way to fold them by default in Webstorm?

[re-ovo]

I guess there is no such aggressive folding behavior in Intellij, even if the default folding is set to true, it still requires you to manually fold after editing, or reopen the file. Is that enough?

[AndrewBogdanovTSS]

Essentially, I want the same behavior for classes as for inline styles. When I open a file I see styles truncated like this

[re-ovo]

Sure

[re-ovo]

Will be fixed in 1.4.2, and supports some customization of folding behavior (placeholders, minimum length, default folding)

[AndrewBogdanovTSS]

Great, thanks a lot

[AndrewBogdanovTSS]

@re-ovo I tested the latest update and it looks awesome, thanks a lot for such a quick implementation and release. If I may add a couple of suggestions for improvement, it would be great if:

• clicking on the folded version would unfold only this specific item and not all in the file
• it could be a shortcut to toggle folding
• truncated text would hide classes partially, e.g. "flex pl-3 [UnoCSS]" instead of "[UnoCSS]" (don't know if this is even possible withing Intellej products) thanks again 👍🏻

[re-ovo]

@re-ovo I tested the latest update and it looks awesome, thanks a lot for such a quick implementation and release. If I may add a couple of suggestions for improvement, it would be great if:

• clicking on the folded version would unfold only this specific item and not all in the file
• it could be a shortcut to toggle folding
• truncated text would hide classes partially, e.g. "flex pl-3 [UnoCSS]" instead of "[UnoCSS]" (don't know if this is even possible withing Intellej products) thanks again 👍🏻

• Collapse by group is the expected behavior, imagine that when you need to read all the code completely, you can easily expand all Unocss
• The shortcut keys are provided by Intellij. Please read the relevant documentation. On Windows, it should be Control + - （When the editing cursor is on the Unocss class)
• This can be done, but I don't think it's useful