[Prettier Plugin] flex-1 injected between flex and flex-col?

[josefrichter]

Suppose you have this

<div class="flex-1 flex flex-col>...</div>

Running Prettier reorders it to

<div class="flex flex-1 flex-col>...</div>

It doesn't seem to make sense to me:

flex-1 specifies behavior of this div within its parent (that is flex).
flex flex-col specifies properties of this div, that becomes another flex.

It seems to me that behavior within parent should take precedence over other properties. Also flex flex-col are so closely related that they should probably always appear together. And flex-1 in this case is completely unrelated. So why would it be injected in between?

Also if you specify other properties like gap-4, it is actually placed before initiating flex flex-col, which also doesn't make much logical sense.

What am I missing here, please?

[Inventoris]

Hi @josefrichter!

Here are the basic rules for how classes are sorted.

Regarding your example. It seems to me that this order is logical. flex is the main class that includes flexbox on the element, and flex-1 and so on are already settings for flex itself, so they come next.

I also checked if gap-4 is placed before flex and flex-col, it is not so for me, and gap-4 is placed at the end, which is logical.