refactor(client): use css modules

packages/frontend/src/components/MkNotifications.vue

@@ -8,7 +8,7 @@
 	</template>
 
 	<template #default="{ items: notifications }">
-		<MkDateSeparatedList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
+		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :no-gap="true">
 			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
 			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
 		</MkDateSeparatedList>
@@ -97,8 +97,8 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.elsfgstc {
+<style lang="scss" module>
+.list {
 	background: var(--panel);
 }
 </style>

packages/frontend/src/components/MkPageWindow.vue

@@ -17,7 +17,7 @@
 		</template>
 	</template>
 
-	<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }" style="container-type: inline-size;">
+	<div :class="$style.root" :style="{ background: pageMetadata?.value?.bg }" style="container-type: inline-size;">
 		<RouterView :router="router"/>
 	</div>
 </MkWindow>
@@ -133,8 +133,8 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-.yrolvcoq {
+<style lang="scss" module>
+.root {
 	min-height: 100%;
 	background: var(--bg);
 

packages/frontend/src/components/MkReactionEffect.vue

@@ -1,6 +1,6 @@
 <template>
 <div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
-	<span class="text" :class="{ up }">
+	<span :class="[$style.text, { [$style.up]: up }]">
 		<MkReactionIcon class="icon" :reaction="reaction"/>
 	</span>
 </div>
@@ -43,9 +43,9 @@ onMounted(() => {
 	position: fixed;
 	width: 128px;
 	height: 128px;
+}
 
-	&:global {
-		> .text {
+.text {
 	display: block;
 	height: 1em;
 	text-align: center;
@@ -66,7 +66,5 @@ onMounted(() => {
 		opacity: 0;
 		transform: translateY(-50px) rotateZ(v-bind(angle));
 	}
-		}
-	}
 }
 </style>

packages/frontend/src/components/MkReactionTooltip.vue

@@ -1,8 +1,8 @@
 <template>
 <MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
-	<div class="beeadbfb">
-		<MkReactionIcon :reaction="reaction" class="icon" :no-style="true"/>
-		<div class="name">{{ reaction.replace('@.', '') }}</div>
+	<div :class="$style.root">
+		<MkReactionIcon :reaction="reaction" :class="$style.icon" :no-style="true"/>
+		<div :class="$style.name">{{ reaction.replace('@.', '') }}</div>
 	</div>
 </MkTooltip>
 </template>
@@ -23,20 +23,20 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.beeadbfb {
+<style lang="scss" module>
+.root {
 	text-align: center;
+}
 
-	> .icon {
+.icon {
 	display: block;
 	width: 60px;
 	font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
 	margin: 0 auto;
 	object-fit: contain;
-	}
+}
 
-	> .name {
+.name {
 	font-size: 0.9em;
-	}
 }
 </style>

packages/frontend/src/components/MkReactionsViewer.details.vue

@@ -1,16 +1,16 @@
 <template>
 <MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
-	<div class="bqxuuuey">
-		<div class="reaction">
-			<MkReactionIcon :reaction="reaction" class="icon" :no-style="true"/>
-			<div class="name">{{ getReactionName(reaction) }}</div>
+	<div :class="$style.root">
+		<div :class="$style.reaction">
+			<MkReactionIcon :reaction="reaction" :class="$style.reactionIcon" :no-style="true"/>
+			<div :class="$style.reactionName">{{ getReactionName(reaction) }}</div>
 		</div>
-		<div class="users">
-			<div v-for="u in users" :key="u.id" class="user">
-				<MkAvatar class="avatar" :user="u"/>
-				<MkUserName class="name" :user="u" :nowrap="true"/>
+		<div :class="$style.users">
+			<div v-for="u in users" :key="u.id" :class="$style.user">
+				<MkAvatar :class="$style.avatar" :user="u"/>
+				<MkUserName :user="u" :nowrap="true"/>
 			</div>
-			<div v-if="users.length > 10" class="omitted">+{{ count - 10 }}</div>
+			<div v-if="users.length > 10">+{{ count - 10 }}</div>
 		</div>
 	</div>
 </MkTooltip>
@@ -43,28 +43,29 @@ function getReactionName(reaction: string): string {
 }
 </script>
 
-<style lang="scss" scoped>
-.bqxuuuey {
+<style lang="scss" module>
+.root {
 	display: flex;
+}
 
-	> .reaction {
+.reaction {
 	max-width: 100px;
 	text-align: center;
+}
 
-		> .icon {
+.reactionIcon {
 	display: block;
 	width: 60px;
 	font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
 	object-fit: contain;
 	margin: 0 auto;
-		}
+}
 
-		> .name {
+.reactionName {
 	font-size: 1em;
-		}
-	}
+}
 
-	> .users {
+.users {
 	flex: 1;
 	min-width: 0;
 	font-size: 0.95em;
@@ -73,8 +74,9 @@ function getReactionName(reaction: string): string {
 	margin-left: 10px;
 	margin-right: 14px;
 	text-align: left;
+}
 
-		> .user {
+.user {
 	line-height: 24px;
 	white-space: nowrap;
 	overflow: hidden;
@@ -83,13 +85,11 @@ function getReactionName(reaction: string): string {
 	&:not(:last-child) {
 		margin-bottom: 3px;
 	}
+}
 
-			> .avatar {
+.avatar {
 	width: 24px;
 	height: 24px;
 	margin-right: 3px;
-			}
-		}
-	}
 }
 </style>

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -2,12 +2,12 @@
 <button
 	ref="buttonEl"
 	v-ripple="canToggle"
-	class="hkzvhatu _button"
-	:class="{ reacted: note.myReaction == reaction, canToggle }"
+	class="_button"
+	:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle }]"
 	@click="toggleReaction()"
 >
-	<MkReactionIcon class="icon" :reaction="reaction"/>
-	<span class="count">{{ count }}</span>
+	<MkReactionIcon :class="$style.icon" :reaction="reaction"/>
+	<span :class="$style.count">{{ count }}</span>
 </button>
 </template>
 
@@ -92,8 +92,8 @@ useTooltip(buttonEl, async (showing) => {
 }, 100);
 </script>
 
-<style lang="scss" scoped>
-.hkzvhatu {
+<style lang="scss" module>
+.root {
 	display: inline-block;
 	height: 32px;
 	margin: 2px;
@@ -127,11 +127,11 @@ useTooltip(buttonEl, async (showing) => {
 			filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
 		}
 	}
+}
 
-	> .count {
+.count {
 	font-size: 0.9em;
 	line-height: 32px;
 	margin: 0 0 0 4px;
-	}
 }
 </style>

packages/frontend/src/components/MkReactionsViewer.vue

@@ -1,5 +1,12 @@
 <template>
-<TransitionGroup :name="$store.state.animation ? 'x' : ''" tag="div" class="tdflqwzn" :class="{ isMe }">
+<TransitionGroup
+	:enter-active-class="$store.state.animation ? $style.transition_x_enterActive : ''"
+	:leave-active-class="$store.state.animation ? $style.transition_x_leaveActive : ''"
+	:enter-from-class="$store.state.animation ? $style.transition_x_enterFrom : ''"
+	:leave-to-class="$store.state.animation ? $style.transition_x_leaveTo : ''"
+	:move-class="$store.state.animation ? $style.transition_x_move : ''"
+	tag="div" :class="$style.root"
+>
 	<XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
 </TransitionGroup>
 </template>
@@ -19,29 +26,26 @@ const initialReactions = new Set(Object.keys(props.note.reactions));
 const isMe = computed(() => $i && $i.id === props.note.userId);
 </script>
 
-<style lang="scss" scoped>
-.x-move, .x-enter-active, .x-leave-active {
+<style lang="scss" module>
+.transition_x_move,
+.transition_x_enterActive,
+.transition_x_leaveActive {
 	transition: opacity 0.2s cubic-bezier(0,.5,.5,1), transform 0.2s cubic-bezier(0,.5,.5,1) !important;
 }
-.x-enter-from, .x-leave-to {
+.transition_x_enterFrom,
+.transition_x_leaveTo {
 	opacity: 0;
 	transform: scale(0.7);
 }
-.x-leave-active {
+.transition_x_leaveActive {
 	position: absolute;
 }
 
-.tdflqwzn {
+.root {
 	margin: 4px -2px 0 -2px;
 
 	&:empty {
 		display: none;
 	}
-
-	&.isMe {
-		> span {
-			cursor: default !important;
-		}
-	}
 }
 </style>

packages/frontend/src/components/MkRemoteCaution.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="jmgmzlwq"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
+<div :class="$style.root"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a :class="$style.link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
 </template>
 
 <script lang="ts" setup>
@@ -10,18 +10,18 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.jmgmzlwq {
+<style lang="scss" module>
+.root {
 	font-size: 0.8em;
 	padding: 16px;
 	background: var(--infoWarnBg);
 	color: var(--infoWarnFg);
 	border-radius: var(--radius);
 	overflow: clip;
+}
 
-	> .link {
+.link {
 	margin-left: 4px;
 	color: var(--accent);
-	}
 }
 </style>

packages/frontend/src/components/MkSparkle.vue

@@ -1,6 +1,6 @@
 <template>
-<span class="mk-sparkle">
-	<span ref="el">
+<span :class="$style.root">
+	<span ref="el" style="display: inline-block;">
 		<slot></slot>
 	</span>
 	<!-- なぜか path に対する key が機能しないため
@@ -32,7 +32,7 @@
 		</path>
 	</svg>
 	-->
-	<svg v-for="particle in particles" :key="particle.id" :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
+	<svg v-for="particle in particles" :key="particle.id" :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: -32px; left: -32px;">
 		<path
 			style="transform-origin: center; transform-box: fill-box;"
 			:transform="`translate(${particle.x} ${particle.y})`"
@@ -111,20 +111,10 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.mk-sparkle {
+<style lang="scss" module>
+.root {
 	position: relative;
 	display: inline-block;
-
-	> span {
-		display: inline-block;
-	}
-
-	> svg {
-		position: absolute;
-		top: -32px;
-		left: -32px;
 	pointer-events: none;
-	}
 }
 </style>

packages/frontend/src/components/MkUserOnlineIndicator.vue

@@ -1,5 +1,5 @@
 <template>
-<div v-tooltip="text" class="fzgwjkgc" :class="user.onlineStatus"></div>
+<div v-tooltip="text" :class="[$style.root, $style['status_' + user.onlineStatus]]"></div>
 </template>
 
 <script lang="ts" setup>
@@ -21,24 +21,24 @@ const text = $computed(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.fzgwjkgc {
+<style lang="scss" module>
+.root {
 	box-shadow: 0 0 0 3px var(--panel);
 	border-radius: 120%; // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
 
-	&.online {
+	&.status_online {
 		background: #58d4c9;
 	}
 
-	&.active {
+	&.status_active {
 		background: #e4bc48;
 	}
 
-	&.offline {
+	&.status_offline {
 		background: #ea5353;
 	}
 
-	&.unknown {
+	&.status_unknown {
 		background: #888;
 	}
 }