P2.x - Group HTML classes by prefix instead of forcing onto one line

Unfortunately we cannot upgrade to 2.x until the change mentioned here: https://prettier.io/blog/2020/03/21/2.0.0.html#format-value-of-html-class-attribute-7555httpsgithubcomprettierprettierpull7555-by-fiskerhttpsgithubcomfisker

… is parameterized and made optional. This would seriously affect the readability and maintainability of our templates.

The reasoning behind the change given here: https://github.com/prettier/prettier/issues/5482 is:

An example of such an attribute is class, where class=" a b c " should be semantically equivalent to class="a b c". However, note that if the user is parsing element.className directly, this change is not safe. 

We do not parse className directly; we do, however, make extensive use of long BEM class names and of bootstrap.

Here’s a typical example:

<div class="ProviderMeasuresContainer__heading-row
            d-flex
            flex-column flex-lg-row
            justify-content-start justify-content-lg-between
            align-items-start align-items-lg-center"
...

vs.

<div class="ProviderMeasuresContainer__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"

You can see this greatly reduces the readability of the element. This leads to longer development and debugging cycles as information in some arbitrary position to the right of the viewing screen is the missing piece on why XYZ is styled incorrectly.

[thorn0]

Because, in general, Prettier never does that. I don’t feel strongly about that, would be good to hear other people’s thoughts.

E.g. look at this example: https://github.com/prettier/prettier/issues/7863#issuecomment-620914539

Looks like it’s important for the author that the lg:border-... classes are placed directly after border-....

[pburkindine]

@thorn0 just checking on this one