refactor: tailwind class sorting

.prettierrc.json

@@ -7,5 +7,5 @@
   "singleQuote": true,
   "trailingComma": "none",
   "useTabs": false,
-  "plugins": ["prettier-plugin-svelte"]
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
 }

package.json

@@ -100,6 +100,7 @@
     "postcss-preset-env": "^9.3.0",
     "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.9",
     "rimraf": "^5.0.5",
     "schema-dts": "^1.1.2",
     "svelte": "^4.2.2",

src/lib/components/announcements/AnnouncementHeader.svelte

@@ -19,7 +19,7 @@
     message="Failed to load announcements: {$announcements.error.message}"
     importance={AnnouncementImportance.Warning} />
 {:else if $announcements && $announcements.data && $announcements.data.getAnnouncements}
-  <div class="max-h-96 overflow-y-auto flex flex-col gap-2 mr-3 mt-3 ml-3 xl:ml-0 mb-3 xl:mb-0">
+  <div class="mb-3 ml-3 mr-3 mt-3 flex max-h-96 flex-col gap-2 overflow-y-auto xl:mb-0 xl:ml-0">
     {#each $announcements?.data?.getAnnouncements as announcement}
       <AnnouncementRow message={announcement.message} importance={announcement.importance} />
     {/each}

src/lib/components/announcements/AnnouncementRow.svelte

@@ -24,10 +24,10 @@
 </script>
 
 <div class="{backgroundColors[importance]} max-h-64 overflow-hidden rounded-sm">
-  <div class="p-1 striped text-black">
-    <span class="material-icons text-2xl align-middle">{iconNames[importance]}</span>
+  <div class="striped p-1 text-black">
+    <span class="material-icons align-middle text-2xl">{iconNames[importance]}</span>
     <div
-      class="align-middle text-l inline-block break-words max-w-full"
+      class="text-l inline-block max-w-full break-words align-middle"
       class:font-mono={isMonospace}
       class:whitespace-pre={isMonospace}>
       <b>{importance}: </b>{finalMessage}

src/lib/components/general/Doggo.svelte

@@ -56,7 +56,7 @@
 
 {#if $dogVisible}
   <img
-    class={'h-full doggo-flipper' + (isLookingRight ? '-R' : '-L')}
+    class={'doggo-flipper h-full' + (isLookingRight ? '-R' : '-L')}
     src={sprite}
     alt="Doggo!"
     title="Click to pat doggo!"

src/lib/components/general/FicsitCard.svelte

@@ -37,7 +37,7 @@
 </script>
 
 <div
-  class="card h-full overflow-hidden relative"
+  class="card relative h-full overflow-hidden"
   on:mouseover={onOver}
   on:mouseout={onOut}
   on:focus={onOver}
@@ -46,24 +46,24 @@
   <div
     class:text-gray-500={fake}
     class:font-flow={fake}
-    class="grid grid-max-auto sm:grid-cols-2 grid-cols-1 justify-items-center">
-    <div class="cursor-pointer card-image-container">
+    class="grid-max-auto grid grid-cols-1 justify-items-center sm:grid-cols-2">
+    <div class="card-image-container cursor-pointer">
       <a href={link} on:keypress={() => goto(link)} tabindex="0">
         {#if fake}
-          <div class="bg-gray-500 logo min-w-full min-h-full max-w-full max-h-full" />
+          <div class="logo max-h-full min-h-full min-w-full max-w-full bg-gray-500" />
         {:else}
-          <img src={renderedLogo} alt="{renderedName} Logo" class="logo max-w-full max-h-full min-w-full min-h-full" />
+          <img src={renderedLogo} alt="{renderedName} Logo" class="logo max-h-full min-h-full min-w-full max-w-full" />
         {/if}
       </a>
     </div>
-    <div class="w-full flex flex-col justify-between relative">
+    <div class="relative flex w-full flex-col justify-between">
       <div class="flex flex-col px-3 py-2 pb-0">
         <div class="mb-1.5">
           <a href={link} class="text-white">
-            <span class="text-xl break-words">{renderedName}</span>
+            <span class="break-words text-xl">{renderedName}</span>
           </a>
 
-          <h5 class="text-sm m-0">
+          <h5 class="m-0 text-sm">
             <slot name="stats">
               {#if fake}
                 <span class="font-flow">Card stats</span>
@@ -87,12 +87,12 @@
       </div>
 
       <div
-        class="self-end py-2 px-2 flex flex-row items-center text-lg gap-1 absolute bottom-0 right-0"
+        class="absolute bottom-0 right-0 flex flex-row items-center gap-1 self-end px-2 py-2 text-lg"
         bind:this={actionButtons}>
         {#if !fake}
           <a
             href={link}
-            class="btn btn-sm variant-soft-surface"
+            class="variant-soft-surface btn btn-sm"
             aria-label="View {renderedName}"
             title="View {renderedName}">
             <span class="material-icons">info</span>

src/lib/components/general/Page404.svelte

@@ -1,4 +1,4 @@
-<div class="w-full h-full flex justify-center items-center pt-16">
+<div class="flex h-full w-full items-center justify-center pt-16">
   <div class="flex flex-col items-center gap-4">
     <h1 class="h1">404</h1>
     <h4 class="h4">there probably should be something here</h4>

src/lib/components/general/Sidebar.svelte

@@ -100,8 +100,8 @@
   const drawerStore = getDrawerStore();
 </script>
 
-<div class="p-4 overflow-y-auto flex flex-col justify-between h-full max-w-xl">
-  <div class="flex flex-col h-full max-w-xl gap-4">
+<div class="flex h-full max-w-xl flex-col justify-between overflow-y-auto p-4">
+  <div class="flex h-full max-w-xl flex-col gap-4">
     <nav class="list-nav xl:hidden">
       <ul>
         {#if $user === null}
@@ -131,8 +131,8 @@
               <span>Admin</span>
             </button>
           {/if}
-          <button class="grid grid-flow-col w-full" on:click={() => goto(base + '/user/' + $user.id)}>
-            <div class="rounded-full bg-cover w-7 h-7" style={`background-image: url("${$user.avatar}")`} />
+          <button class="grid w-full grid-flow-col" on:click={() => goto(base + '/user/' + $user.id)}>
+            <div class="h-7 w-7 rounded-full bg-cover" style={`background-image: url("${$user.avatar}")`} />
             <div>{$user.username}</div>
           </button>
 

src/lib/components/general/TopBar.svelte

@@ -32,7 +32,7 @@
 
 <AppBar variant="static">
   <svelte:fragment slot="lead">
-    <button class="material-icons xl:hidden btn-sm" on:click={openSidebar}>menu</button>
+    <button class="material-icons btn-sm xl:hidden" on:click={openSidebar}>menu</button>
     <span class="text-lg">{$t('top-bar.title')}</span>
   </svelte:fragment>
 
@@ -41,20 +41,20 @@
       <TranslationDropdown />
 
       {#if $hasLauncher}
-        <button class="btn btn-sm variant-ghost-primary" on:click={pingLauncher}>
+        <button class="variant-ghost-primary btn btn-sm" on:click={pingLauncher}>
           <span>Open Mod Manager</span>
           <span class="material-icons">launch</span>
         </button>
       {:else}
-        <a class="btn btn-sm variant-ghost-primary" target="_blank" rel="noopener" href="https://smm.ficsit.app">
+        <a class="variant-ghost-primary btn btn-sm" target="_blank" rel="noopener" href="https://smm.ficsit.app">
           <span>Download the Mod Manager</span>
           <span class="material-icons">file_download</span>
         </a>
       {/if}
 
       {#if $user === null}
         <button
-          class="btn btn-sm variant-ghost-primary"
+          class="variant-ghost-primary btn btn-sm"
           on:click={() =>
             modalStore.trigger({
               type: 'component',
@@ -67,19 +67,19 @@
         </button>
       {:else}
         {#if isAdmin}
-          <button class="btn btn-sm variant-ghost-primary" on:click={() => goto(base + '/admin')}>
+          <button class="variant-ghost-primary btn btn-sm" on:click={() => goto(base + '/admin')}>
             <span>Admin</span>
             <span class="material-icons">admin_panel_settings</span>
           </button>
         {/if}
 
         <div>
-          <button class="grid grid-flow-col btn btn-sm variant-ghost-primary" use:popup={userMenuBox}>
+          <button class="variant-ghost-primary btn btn-sm grid grid-flow-col" use:popup={userMenuBox}>
             <div>{$user.username}</div>
-            <div class="rounded-full bg-cover w-7 h-7" style={`background-image: url("${$user.avatar}")`} />
+            <div class="h-7 w-7 rounded-full bg-cover" style={`background-image: url("${$user.avatar}")`} />
           </button>
 
-          <div class="card w-48 shadow-xl py-2" data-popup="userMenuBox">
+          <div class="card w-48 py-2 shadow-xl" data-popup="userMenuBox">
             <nav class="list-nav">
               <ul>
                 <li>
@@ -99,7 +99,7 @@
                 </li>
               </ul>
             </nav>
-            <div class="arrow bg-surface-100-800-token" />
+            <div class="bg-surface-100-800-token arrow" />
           </div>
         </div>
       {/if}

src/lib/components/general/TranslationDropdown.svelte

@@ -67,12 +67,12 @@
   };
 </script>
 
-<button class="grid grid-flow-col btn btn-sm variant-ghost-primary" use:popup={languageMenuBox}>
+<button class="variant-ghost-primary btn btn-sm grid grid-flow-col" use:popup={languageMenuBox}>
   <span>{languages[$lang].name}</span>
   <span class="text-xl">{languages[$lang].flag}</span>
 </button>
 
-<div class="card w-48 shadow-xl py-2" data-popup="languageMenuBox">
+<div class="card w-48 py-2 shadow-xl" data-popup="languageMenuBox">
   <nav class="list-nav">
     <ul>
       {#each Object.entries(languages) as [k, v]}
@@ -85,5 +85,5 @@
       {/each}
     </ul>
   </nav>
-  <div class="arrow bg-surface-100-800-token" />
+  <div class="bg-surface-100-800-token arrow" />
 </div>

src/lib/components/guides/GuideAuthor.svelte

@@ -11,11 +11,11 @@
 <div class="card p-4">
   <section>
     <div class="grid grid-flow-row gap-y-2">
-      <h3 class="text-2xl my-4 font-bold">{$t('author')}</h3>
+      <h3 class="my-4 text-2xl font-bold">{$t('author')}</h3>
 
-      <div class="grid auto-rows-min text-lg gap-y-4">
-        <div class="grid grid-flow-col auto-cols-min gap-x-4">
-          <div class="rounded-full bg-cover w-14 h-14" style={`background-image: url("${author.avatar}")`} />
+      <div class="grid auto-rows-min gap-y-4 text-lg">
+        <div class="grid auto-cols-min grid-flow-col gap-x-4">
+          <div class="h-14 w-14 rounded-full bg-cover" style={`background-image: url("${author.avatar}")`} />
           <div class="grid grid-flow-row">
             <a href="{base}/user/{author.id}/" class="text-yellow-500 underline">{author.username}</a>
             <div>{$t('role.writer')}</div>

src/lib/components/guides/GuideForm.svelte

@@ -50,8 +50,8 @@
       </ValidationMessage>
     </div>
 
-    <div class="grid gap-6 split">
-      <div class="grid grid-flow-row gap-2 auto-rows-max">
+    <div class="split grid gap-6">
+      <div class="grid grid-flow-row auto-rows-max gap-2">
         <label class="label">
           <span>{$t('guide')} *</span>
           <textarea class="vertical-textarea textarea p-2" bind:value={$data.guide} required rows={10} />
@@ -60,7 +60,7 @@
           <span class="validation-message">{message || ''}</span>
         </ValidationMessage>
       </div>
-      <div class="grid grid-flow-row gap-2 auto-rows-max">
+      <div class="grid grid-flow-row auto-rows-max gap-2">
         <span>{$t('preview')}:</span>
         {#await markdown(preview) then previewRendered}
           <!-- eslint-disable -->
@@ -70,7 +70,7 @@
     </div>
 
     <div>
-      <button class="btn variant-ghost-primary" type="submit">
+      <button class="variant-ghost-primary btn" type="submit">
         <span class="material-icons pr-2">{submitIcon}</span>
         {submitText}</button>
     </div>

src/lib/components/guides/GuideGrid.svelte

@@ -41,7 +41,7 @@
 
 <div class="mb-5 ml-auto flex justify-between">
   {#if newGuide && $user !== null}
-    <a class="btn variant-ghost-primary" href="{base}/new-guide">{$t('guides.new')}</a>
+    <a class="variant-ghost-primary btn" href="{base}/new-guide">{$t('guides.new')}</a>
   {/if}
 
   <div>
@@ -71,7 +71,7 @@
   </div>
 {/if}
 
-<div class="mt-5 ml-auto flex justify-end">
+<div class="ml-auto mt-5 flex justify-end">
   <div>
     <Paginator
       bind:settings={paginationSettings}

src/lib/components/guides/GuideInfo.svelte

@@ -11,7 +11,7 @@
 <div class="card p-4">
   <section>
     <div class="text-lg">
-      <h3 class="text-2xl my-4 font-bold">{$t('entry.info')}</h3>
+      <h3 class="my-4 text-2xl font-bold">{$t('entry.info')}</h3>
       <span><strong>{$t('entry.created-at')}:</strong> {prettyDate(guide.created_at)}</span><br />
     </div>
   </section>

src/lib/components/mods/ModAuthor.svelte

@@ -22,9 +22,9 @@
 {:else if $user.error}
   <p class="mr-2">{$t('error.oh-no')}... {$user.error.message}</p>
 {:else if $user.data.getUser}
-  <div class="grid grid-flow-col auto-cols-max gap-x-2 mr-2">
+  <div class="mr-2 grid auto-cols-max grid-flow-col gap-x-2">
     <div
-      class="rounded-full bg-cover w-7 h-7"
+      class="h-7 w-7 rounded-full bg-cover"
       style={`background-image: url("${$user.data.getUser.avatar || assets + '/images/no_image.webp'}")`} />
     <div class="grid grid-flow-row">
       <span class="text-yellow-500">{$user.data.getUser.username}</span>

src/lib/components/mods/ModAuthors.svelte

@@ -15,13 +15,13 @@
 <div class="card p-4">
   <section>
     <div class="grid grid-flow-row gap-y-2">
-      <h3 class="text-2xl my-4 font-bold">{$t('authors')}</h3>
+      <h3 class="my-4 text-2xl font-bold">{$t('authors')}</h3>
 
-      <div class="grid auto-rows-min text-lg gap-y-4">
+      <div class="grid auto-rows-min gap-y-4 text-lg">
         {#each authors as author}
-          <div class="grid grid-flow-col auto-cols-max gap-x-4">
+          <div class="grid auto-cols-max grid-flow-col gap-x-4">
             <div
-              class="rounded-full bg-cover w-14 h-14"
+              class="h-14 w-14 rounded-full bg-cover"
               style={`background-image: url("${author.user.avatar || assets + '/images/no_image.webp'}")`} />
             <div class="grid grid-flow-row">
               <a href="{base}/user/{author.user.id}/" class="text-yellow-500 underline">{author.user.username}</a>

src/lib/components/mods/ModCard.svelte

@@ -29,16 +29,16 @@
   logo={mod.logo}
   description={mod.short_description}>
   <div slot="stats" class="flex flex-row items-center gap-2">
-    <span><span class="material-icons align-middle text-sm mr-1">visibility</span>{prettyNumber(mod.views)}</span>
-    <span><span class="material-icons align-middle text-sm mr-1">download</span>{prettyNumber(mod.downloads)}</span>
+    <span><span class="material-icons mr-1 align-middle text-sm">visibility</span>{prettyNumber(mod.views)}</span>
+    <span><span class="material-icons mr-1 align-middle text-sm">download</span>{prettyNumber(mod.downloads)}</span>
     <CompatibilityButton compatibility={mod.compatibility} />
   </div>
   <div slot="tags">
     <TagList tags={mod.tags} />
   </div>
   <svelte:fragment slot="actions">
     {#if installable}
-      <button class="btn btn-sm variant-soft-surface" title="Install" on:click={() => installMod(mod.mod_reference)}>
+      <button class="variant-soft-surface btn btn-sm" title="Install" on:click={() => installMod(mod.mod_reference)}>
         <span class="material-icons">download</span>
       </button>
     {/if}

src/lib/components/mods/ModDescription.svelte

@@ -16,7 +16,7 @@
         message="This mod is hidden, which means it won't display in searches, and the Mod Manager will not display any view/download count or logo for it. A developer could chose to hide their mod for any number of reasons. Perhaps the mod is a library mod and not intended to be viewed directly, or maybe the developer doesn't want to develop the mod any more. Check the mod page for more information." />
     </div>
   {/if}
-  <div class="h-fit card p-4">
+  <div class="card h-fit p-4">
     <section>
       <div class="markdown-content break-words">
         {#await description then descriptionRendered}

src/lib/components/mods/ModForm.svelte

@@ -115,8 +115,8 @@
       </ValidationMessage>
     </div>
 
-    <div class="grid gap-6 split">
-      <div class="grid grid-flow-row gap-2 auto-rows-max">
+    <div class="split grid gap-6">
+      <div class="grid grid-flow-row auto-rows-max gap-2">
         <label class="label">
           <span>{$t('entry.full-description')} *</span>
           <textarea class="vertical-textarea textarea p-2" bind:value={$data.full_description} required rows={10} />
@@ -125,7 +125,7 @@
           <span class="validation-message">{message || ''}</span>
         </ValidationMessage>
       </div>
-      <div class="grid grid-flow-row gap-2 auto-rows-max">
+      <div class="grid grid-flow-row auto-rows-max gap-2">
         <span>{$t('preview')}:</span>
         {#await markdown(preview) then previewRendered}
           <!-- eslint-disable -->
@@ -189,7 +189,7 @@
       <div class="grid grid-flow-row gap-2">
         <div class="flex items-center">
           <h4 class="mr-4">{$t('authors')}</h4>
-          <button class="btn variant-ghost-primary" type="button" on:click={addAuthor}>
+          <button class="variant-ghost-primary btn" type="button" on:click={addAuthor}>
             <span>{$t('add')}</span>
           </button>
         </div>
@@ -210,7 +210,7 @@
                 disabled={author.role === 'creator'} />
             </label>
             {#if author.role !== 'creator'}
-              <button class="btn variant-ghost-primary" type="button" on:click={() => removeAuthor(i)}>
+              <button class="variant-ghost-primary btn" type="button" on:click={() => removeAuthor(i)}>
                 <span>{$t('remove')}</span>
               </button>
             {/if}
@@ -220,7 +220,7 @@
     {/if}
 
     <div>
-      <button class="btn variant-ghost-primary" type="submit">{submitText}</button>
+      <button class="variant-ghost-primary btn" type="submit">{submitText}</button>
     </div>
   </div>
 </form>