Make the <style> tag collapsible

[UltraCakeBakery]

Is your feature request related to a problem? Please describe.
As you can see in this image the style tag isn't collapsible.

With big CSS heavy components it would be nice to be able to close the entire style tag instead of only each css block individually

Describe the solution you'd like
This, but without the need for extra tabs

Describe alternatives you've considered
Not care. But I care too much.

[jasonlyu123]

I tried to implement it but found this is not a simple task to do. We didn't implement a folding range feature so the folding range seems to be generated by vscode and it seems to base on indentation and matching brackets or tags.

Once the custom folding kicks in the default one would be disabled which means we probably need to implement the folding range in a lot of embed languages, like the pug, sass/scss and typescript/javascript. Or somehow recreate the default folding ranges when we don't know how to fold the embed language. Otherwise, it might be a worse experience for others.

[dummdidumm]

I feared this might be the case. What's worse is that for the script we could not rely on the TS language service results (if if has such a method) because it would give us folding ranges for the translated JSX which is wrong.

[UltraCakeBakery]

Not to be that guy, but how do other plugins solve this issue? Vetur for example can do both. Where do they get their folding ranges from?

[dummdidumm]

Luckily there's a "folding" property which we can use in the language-configuration.json which will do the trick.