From 337dd97b490fb6bcfc351566a4fd80c35a9cda14 Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Thu, 1 Jun 2023 17:19:46 +0900
Subject: perf(#10923): CSS Modules のクラス名をインライン化する (#10930)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf(#10923): unwind css module class name

* perf(#10923): support multiple components

* refactor: clean up

* refactor(#10923): avoid `useCssModule()`

* fix(#10923): allow direct literal class name

* fix(#10923): avoid computed class name

* fix(#10923): allow literal keys

* fix(#10923): typo

* fix(#10923): invalid class names

* chore: test

* revert: test

This reverts commit 5c7ef366eceebe8ba260efa4d5d675f6c1775c45.

* fix(#10923): hidden tale

* perf(#10923): also unwind scoped css contained components

* perf(#10923): `normalizeClass` AOT compilation

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/frontend/src/components/MkNotification.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

(limited to 'packages/frontend/src/components/MkNotification.vue')

diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index b4c424e79e..d25332b10f 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -5,7 +5,19 @@
 		<MkAvatar v-else-if="notification.type === 'achievementEarned'" :class="$style.icon" :user="$i" link preview/>
 		<MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user" link preview/>
 		<img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/>
-		<div :class="[$style.subIcon, $style['t_' + notification.type]]">
+		<div
+			:class="[$style.subIcon, {
+				[$style.t_follow]: notification.type === 'follow',
+				[$style.t_followRequestAccepted]: notification.type === 'followRequestAccepted',
+				[$style.t_receiveFollowRequest]: notification.type === 'receiveFollowRequest',
+				[$style.t_renote]: notification.type === 'renote',
+				[$style.t_reply]: notification.type === 'reply',
+				[$style.t_mention]: notification.type === 'mention',
+				[$style.t_quote]: notification.type === 'quote',
+				[$style.t_pollEnded]: notification.type === 'pollEnded',
+				[$style.t_achievementEarned]: notification.type === 'achievementEarned',
+			}]"
+		>
 			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
 			<i v-else-if="notification.type === 'receiveFollowRequest'" class="ti ti-clock"></i>
 			<i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i>
@@ -34,7 +46,7 @@
 			<span v-else>{{ notification.header }}</span>
 			<MkTime v-if="withTime" :time="notification.createdAt" :class="$style.headerTime"/>
 		</header>
-		<div :class="$style.content">
+		<div>
 			<MkA v-if="notification.type === 'reaction'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
 				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
@@ -243,9 +255,6 @@ useTooltip(reactionRef, (showing) => {
 	font-size: 0.9em;
 }
 
-.content {
-}
-
 .text {
 	display: flex;
 	width: 100%;
-- 
cgit v1.2.3-freya