[all]: Migrate duplicated CSS classes with the * modifier

This took advantage of the new feature in Tailwind v3.4.
ThrRip · Dec 21, 2023 · 80efc95 · 80efc95
1 parent 5993d66
commit 80efc95
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 93 deletions.
diff --git a/packages/admin/app.vue b/packages/admin/app.vue
@@ -55,37 +55,16 @@
         >
           <transition-group
             tag="span"
-            class="aspect-square grid grid-areas-stack place-items-center pl-0.5 h-14"
+            class="aspect-square grid grid-areas-stack place-items-center pl-0.5 h-14 max-lg:landscape:*:!h-5 *:!h-6"
             enter-from-class="opacity-0"
             enter-active-class="transition-opacity duration-200"
             leave-active-class="transition-opacity duration-200"
             leave-to-class="opacity-0"
           >
-            <font-awesome-icon
-              v-if="backendAuthState === ''"
-              key="idle"
-              :icon="['fas', 'right-from-bracket']"
-              class="max-lg:landscape:!h-5 !h-6"
-            />
-            <font-awesome-icon
-              v-if="backendAuthState === 'processing'"
-              key="processing"
-              :icon="['fas', 'circle-notch']"
-              spin
-              class="max-lg:landscape:!h-5 !h-6"
-            />
-            <font-awesome-icon
-              v-if="backendAuthState === 'succeeded'"
-              key="succeeded"
-              :icon="['fas', 'check']"
-              class="max-lg:landscape:!h-5 !h-6"
-            />
-            <font-awesome-icon
-              v-if="backendAuthState === 'failed'"
-              key="failed"
-              :icon="['fas', 'circle-exclamation']"
-              class="max-lg:landscape:!h-5 !h-6"
-            />
+            <font-awesome-icon v-if="backendAuthState === ''" key="idle" :icon="['fas', 'right-from-bracket']" />
+            <font-awesome-icon v-if="backendAuthState === 'processing'" key="processing" :icon="['fas', 'circle-notch']" spin />
+            <font-awesome-icon v-if="backendAuthState === 'succeeded'" key="succeeded" :icon="['fas', 'check']" />
+            <font-awesome-icon v-if="backendAuthState === 'failed'" key="failed" :icon="['fas', 'circle-exclamation']" />
           </transition-group>
           <transition-group
             tag="span"

diff --git a/packages/admin/components/PlaylistList.vue b/packages/admin/components/PlaylistList.vue
@@ -154,38 +154,29 @@
         <span v-if="props.type === 'changes'">
           共 {{ props.countTotal }} 首歌有改动
         </span>
-        <span v-if="props.type === 'main'" class="flex flex-row gap-x-1 h-full">
-          <button
-            class="aspect-square flex flex-row justify-center items-center h-full rounded-lg hover:bg-gray
-            transition active:scale-95 duration-200"
-            title="添加歌曲"
-            @click="create"
-          >
+        <span
+          v-if="props.type === 'main'"
+          class="flex flex-row gap-x-1 h-full
+          *:aspect-square *:flex *:flex-row *:justify-center *:items-center *:h-full *:rounded-lg hover:*:bg-gray
+          *:transition active:*:scale-95 *:duration-200"
+        >
+          <button title="添加歌曲" @click="create">
             <font-awesome-icon :icon="['fas', 'plus']" />
           </button>
-          <button
-            class="aspect-square flex flex-row justify-center items-center h-full rounded-lg hover:bg-gray
-            transition active:scale-95 duration-200"
-            title="删除歌曲"
-            @click="selectedIds.forEach(id => { emit('stageChanges', { $id: id }); selectedIds.delete(id) })"
-          >
+          <button title="删除歌曲" @click="selectedIds.forEach(id => { emit('stageChanges', { $id: id }); selectedIds.delete(id) })">
             <font-awesome-icon :icon="['fas', 'minus']" />
           </button>
         </span>
-        <span v-if="props.type === 'changes'" class="flex flex-row gap-x-1 h-full">
-          <button
-            class="aspect-square flex flex-row justify-center items-center h-full rounded-lg hover:bg-gray
-            transition active:scale-95 duration-200"
-            title="撤销改动"
-            @click="emit('undoChanges', selectedIds); selectedIds.clear()"
-          >
+        <span
+          v-if="props.type === 'changes'"
+          class="flex flex-row gap-x-1 h-full
+          *:aspect-square *:flex *:flex-row *:justify-center *:items-center *:h-full *:rounded-lg hover:*:bg-gray
+          *:transition active:*:scale-95 *:duration-200"
+        >
+          <button title="撤销改动" @click="emit('undoChanges', selectedIds); selectedIds.clear()">
             <font-awesome-icon :icon="['fas', 'rotate-left']" />
           </button>
-          <button
-            class="aspect-square flex flex-row justify-center items-center h-full rounded-lg hover:bg-gray
-            transition active:scale-95 duration-200"
-            title="发布改动"
-          >
+          <button title="发布改动">
             <font-awesome-icon :icon="['fas', 'cloud-arrow-up']" />
           </button>
         </span>

diff --git a/packages/home/app.vue b/packages/home/app.vue
@@ -14,35 +14,29 @@
         <h1 class="max-xl:landscape:text-4xl portrait:text-6xl text-7xl font-light text-white-alt">
           洺知-故犯
         </h1>
-        <div class="flex flex-col max-xl:landscape:gap-y-1 gap-y-4">
+        <div
+          class="flex flex-col max-xl:landscape:gap-y-1 gap-y-4
+          *:flex *:flex-row *:gap-x-2 *:justify-between *:items-center
+          max-xl:landscape:*:px-1.5 *:px-2.5 *:w-54 max-xl:landscape:*:h-10 *:h-12
+          *:text-white *:bg-blue hover:*:bg-blue-a focus:*:outline *:outline-2 *:outline-offset-3 *:outline-blue-a *:rounded-xl
+          *:transition active:*:scale-95"
+        >
           <NuxtLink
             to="https://space.bilibili.com/32159860"
             target="_blank"
-            class="flex flex-row gap-x-2 justify-between items-center
-            max-xl:landscape:px-1.5 px-2.5 w-54 max-xl:landscape:h-10 h-12
-            text-white bg-blue hover:bg-blue-a focus:outline outline-2 outline-offset-3 outline-blue-a rounded-xl
-            transition active:scale-95"
+            class="*:aspect-square *:flex *:flex-row *:justify-center *:items-center *:h-8"
           >
-            <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <font-awesome-icon :icon="['fab', 'bilibili']" />
-            </span>
+            <span><font-awesome-icon :icon="['fab', 'bilibili']" /></span>
             哔哩哔哩主页
-            <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
-            </span>
+            <span><font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" /></span>
           </NuxtLink>
           <NuxtLink
             to="https://live.bilibili.com/1267105"
             target="_blank"
-            class="flex flex-row gap-x-2 justify-between items-center
-            max-xl:landscape:px-1.5 px-2.5 w-54 max-xl:landscape:h-10 h-12
-            text-white bg-blue hover:bg-blue-a focus:outline outline-2 outline-offset-3 outline-blue-a rounded-xl
-            transition active:scale-95"
+            class="*:aspect-square *:flex *:flex-row *:justify-center *:items-center *:h-8"
           >
-            <span v-if="!biliApiLiveStatus" class="aspect-square flex flex-row justify-center items-center h-8">
-              <font-awesome-icon :icon="['fas', 'podcast']" class="!h-5" />
-            </span>
-            <span v-if="biliApiLiveStatus" class="aspect-square flex flex-col justify-center items-center h-8">
+            <span v-if="!biliApiLiveStatus"><font-awesome-icon :icon="['fas', 'podcast']" class="!h-5" /></span>
+            <span v-if="biliApiLiveStatus">
               <span class="overflow-hidden min-h-[1.2rem] max-h-[1.2rem]">
                 <font-awesome-icon :icon="['fas', 'podcast']" class="!h-[1.125rem]" />
               </span>
@@ -51,40 +45,24 @@
               </span>
             </span>
             直播间
-            <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
-            </span>
+            <span><font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" /></span>
           </NuxtLink>
           <NuxtLink
             to="https://space.bilibili.com/391500490"
             target="_blank"
-            class="flex flex-row gap-x-2 justify-between items-center
-            max-xl:landscape:px-1.5 px-2.5 w-54 max-xl:landscape:h-10 h-12
-            text-white bg-blue hover:bg-blue-a focus:outline outline-2 outline-offset-3 outline-blue-a rounded-xl
-            transition active:scale-95"
+            class="*:aspect-square *:flex *:flex-row *:justify-center *:items-center *:h-8"
           >
-            <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <font-awesome-icon :icon="['fas', 'video']" />
-            </span>
+            <span><font-awesome-icon :icon="['fas', 'video']" /></span>
             录播组
-            <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
-            </span>
+            <span><font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" /></span>
           </NuxtLink>
           <button
-            class="landscape:hidden flex flex-row gap-x-2 justify-between items-center
-            max-xl:landscape:px-1.5 px-2.5 w-54 max-xl:landscape:h-10 h-12
-            text-white bg-blue hover:bg-blue-a focus:outline outline-2 outline-offset-3 outline-blue-a rounded-xl
-            transition active:scale-95"
+            class="landscape:hidden *:aspect-square *:flex *:flex-row *:justify-center *:items-center *:h-8"
             @click="scrollToPlaylist"
           >
-            <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <font-awesome-icon :icon="['fas', 'list']" />
-            </span>
+            <span><font-awesome-icon :icon="['fas', 'list']" /></span>
             歌单
-            <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <font-awesome-icon :icon="['fas', 'arrow-down']" />
-            </span>
+            <span><font-awesome-icon :icon="['fas', 'arrow-down']" /></span>
           </button>
         </div>
       </section>