refactor(ui): sort windicss classes

components/graphql/Field.vue

@@ -24,21 +24,21 @@
     </div>
     <div
       v-if="gqlField.description"
-      class="py-2 text-xs text-secondaryLight field-desc"
+      class="text-xs text-secondaryLight py-2 field-desc"
     >
       {{ gqlField.description }}
     </div>
     <div
       v-if="gqlField.isDeprecated"
       class="
-        inline-block
-        px-2
-        py-1
-        my-1
-        text-xs text-black
-        bg-yellow-200
         rounded
         font-semibold
+        bg-yellow-200
+        my-1
+        text-xs text-black
+        py-1
+        px-2
+        inline-block
         field-deprecated
       "
     >
@@ -46,7 +46,7 @@
     </div>
     <div v-if="fieldArgs.length > 0">
       <h5 class="my-2 text-xs">Arguments:</h5>
-      <div class="pl-4 border-l-2 border-divider">
+      <div class="border-divider border-l-2 pl-4">
         <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
           <span class="font-semibold text-xs">
             {{ field.name }}:
@@ -57,7 +57,7 @@
           </span>
           <div
             v-if="field.description"
-            class="py-2 text-xs text-secondaryLight field-desc"
+            class="text-xs text-secondaryLight py-2 field-desc"
           >
             {{ field.description }}
           </div>

components/graphql/Type.vue

@@ -11,7 +11,7 @@
     </div>
     <div
       v-if="gqlType.description"
-      class="py-2 text-xs text-secondaryLight type-desc"
+      class="text-xs text-secondaryLight py-2 type-desc"
     >
       {{ gqlType.description }}
     </div>
@@ -24,7 +24,7 @@
         <GraphqlTypeLink
           :gql-type="gqlInterface"
           :jump-type-callback="jumpTypeCallback"
-          class="pl-4 border-l-2 border-divider"
+          class="border-divider border-l-2 pl-4"
         />
       </div>
     </div>
@@ -35,7 +35,7 @@
         :key="`child-${index}`"
         :gql-type="child"
         :jump-type-callback="jumpTypeCallback"
-        class="pl-4 border-l-2 border-divider"
+        class="border-divider border-l-2 pl-4"
       />
     </div>
     <div v-if="gqlType.getFields">
@@ -43,7 +43,7 @@
       <GraphqlField
         v-for="(field, index) in gqlType.getFields()"
         :key="`field-${index}`"
-        class="pl-4 border-l-2 border-divider"
+        class="border-divider border-l-2 pl-4"
         :gql-field="field"
         :is-highlighted="isFieldHighlighted({ field })"
         :jump-type-callback="jumpTypeCallback"
@@ -54,7 +54,7 @@
       <div
         v-for="(value, index) in gqlType.getValues()"
         :key="`value-${index}`"
-        class="pl-4 border-l-2 border-divider"
+        class="border-divider border-l-2 pl-4"
         v-text="value.name"
       ></div>
     </div>