Is it possible to apply alphabetical order to at-rules

[dmorda]

Is it possible to order at-rules alphabetically?

This is what I have...

.myClass {
  @apply w-6;
  @apply block;
  @apply absolute;
  @apply left-0;
  padding: 3px;
  height: 100%;
}

This is what I want when alphabetized...

.myClass {
  @apply absolute;
  @apply block;
  @apply left-0;
  @apply w-6;
  height: 100%;
  padding: 3px;
}

[hudochenkov]

There is no easy way. However you could make config using extended at-rule objects. It's some manual work, but you would get some alphabetical order.

E. g.:

{
    order: [
        { type: 'at-rule', name: 'apply', parameter: /^a/ },
        { type: 'at-rule', name: 'apply', parameter: /^b/ },
        { type: 'at-rule', name: 'apply', parameter: /^c/ },
        { type: 'at-rule', name: 'apply', parameter: /^d/ },
        { type: 'at-rule', name: 'apply', parameter: /^e/ },
        { type: 'at-rule', name: 'apply', parameter: /^f/ },
        { type: 'at-rule', name: 'apply', parameter: /^g/ },
        { type: 'at-rule', name: 'apply', parameter: /^h/ },
        { type: 'at-rule', name: 'apply', parameter: /^i/ },
        { type: 'at-rule', name: 'apply', parameter: /^j/ },
        { type: 'at-rule', name: 'apply', parameter: /^k/ },
        { type: 'at-rule', name: 'apply', parameter: /^l/ },
        { type: 'at-rule', name: 'apply', parameter: /^m/ },
        { type: 'at-rule', name: 'apply', parameter: /^n/ },
        { type: 'at-rule', name: 'apply', parameter: /^o/ },
        { type: 'at-rule', name: 'apply', parameter: /^p/ },
        { type: 'at-rule', name: 'apply', parameter: /^q/ },
        { type: 'at-rule', name: 'apply', parameter: /^r/ },
        { type: 'at-rule', name: 'apply', parameter: /^s/ },
        { type: 'at-rule', name: 'apply', parameter: /^t/ },
        { type: 'at-rule', name: 'apply', parameter: /^u/ },
        { type: 'at-rule', name: 'apply', parameter: /^v/ },
        { type: 'at-rule', name: 'apply', parameter: /^w/ },
        { type: 'at-rule', name: 'apply', parameter: /^x/ },
        { type: 'at-rule', name: 'apply', parameter: /^y/ },
        { type: 'at-rule', name: 'apply', parameter: /^z/ },
        // ...
    ]
}

[dmorda]

Ah, I didn't think of that approach. Thanks @hudochenkov. I'll close this one out.