Format and sort UnoCSS at-directives and rules.

Features

• Spacing and sorting: See here
• Variant group merging: See here
• Sorts HTML classes: See here
• Line wrapping: See here
• Sorts --at-apply, --uno-apply, --uno, and @apply
• Works on css, scss and less

Spacing and sorting

body {
    @apply p-1        gap-1 mx-2;
}

body {
    @apply mx-2 gap-1 p-1;
}

Variant group merging

body > #app {
    @apply hover:(font-medium bg-gray-400) hover:font-light;
}

body > #app {
    @apply hover:(bg-gray-400 font-light font-medium);
}

Line wrapping

div {
    > div {
        > div {
            @apply align-middle
            font-extralight
            opacity-0
            invisible
            text-sm
            italic
            transition-all
            cursor-pointer;
        }
    }
}

div {
    > div {
        > div {
            @apply invisible cursor-pointer align-middle text-sm font-extralight
                italic opacity-0 transition-all;
        }
    }
}

Also works with variant groups

body > #app {
    @apply align-middle font-extralight opacity-0 invisible text-sm italic transition-all cursor-pointer hover:(align-middle font-extralight opacity-0 invisible text-sm italic transition-all cursor-pointer) align-middle font-extralight opacity-0 invisible text-sm italic transition-all cursor-pointer;
}

body > #app {
    @apply invisible invisible cursor-pointer cursor-pointer align-middle
        align-middle text-sm text-sm font-extralight font-extralight italic
        italic opacity-0 opacity-0 transition-all transition-all
        hover:(
            invisible cursor-pointer align-middle text-sm font-extralight italic
            opacity-0 transition-all
        );
}

HTML class sorting

<div
    class="align-middle font-extralight opacity-0 invisible text-sm italic transition-all cursor-pointer hover:(align-middle font-extralight opacity-0 invisible text-sm italic transition-all cursor-pointer) align-middle font-extralight opacity-0 invisible text-sm italic transition-all cursor-pointer"
></div>

<div
    class="
            invisible invisible cursor-pointer cursor-pointer align-middle
            align-middle text-sm text-sm font-extralight font-extralight italic
            italic opacity-0 opacity-0 transition-all transition-all
            hover:(
                invisible cursor-pointer align-middle text-sm font-extralight
                italic opacity-0 transition-all
            )
        "
></div>

[!important] Sorting attributes is currently not supported