refactor(client): use css modules

packages/frontend/src/components/MkAnalogClock.vue

@@ -1,5 +1,5 @@
 <template>
-<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
+<svg :class="$style.root" viewBox="0 0 10 10" preserveAspectRatio="none">
 	<template v-if="props.graduations === 'dots'">
 		<circle
 			v-for="(angle, i) in graduationsMajor"
@@ -39,8 +39,7 @@
 	-->
 
 	<line
-		class="s"
-		:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
+		:class="[$style.s, { [$style.animate]: !disableSAnimate && sAnimation !== 'none', [$style.elastic]: sAnimation === 'elastic', [$style.easeOut]: sAnimation === 'easeOut' }]"
 		:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
 		:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
 		:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
@@ -205,21 +204,21 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.mbcofsoe {
+<style lang="scss" module>
+.root {
 	display: block;
+}
 
-	> .s {
-		will-change: transform;
-		transform-origin: 50% 50%;
+.s {
+	will-change: transform;
+	transform-origin: 50% 50%;
 
-		&.animate.elastic {
-			transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
-		}
+	&.animate.elastic {
+		transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
+	}
 
-		&.animate.easeOut {
-			transition: transform .7s cubic-bezier(0,.7,.3,1);
-		}
+	&.animate.easeOut {
+		transition: transform .7s cubic-bezier(0,.7,.3,1);
 	}
 }
 </style>

packages/frontend/src/components/MkCwButton.vue

@@ -1,7 +1,7 @@
 <template>
-<button class="nrvgflfu _button" @click="toggle">
+<button class="_button" :class="$style.root" @click="toggle">
 	<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
-	<span v-if="!modelValue">{{ label }}</span>
+	<span v-if="!modelValue" :class="$style.label">{{ label }}</span>
 </button>
 </template>
 
@@ -34,8 +34,8 @@ const toggle = () => {
 };
 </script>
 
-<style lang="scss" scoped>
-.nrvgflfu {
+<style lang="scss" module>
+.root {
 	display: inline-block;
 	padding: 4px 8px;
 	font-size: 0.7em;
@@ -46,17 +46,17 @@ const toggle = () => {
 	&:hover {
 		background: var(--cwHoverBg);
 	}
+}
 
-	> span {
-		margin-left: 4px;
+.label {
+	margin-left: 4px;
 
-		&:before {
-			content: '(';
-		}
+	&:before {
+		content: '(';
+	}
 
-		&:after {
-			content: ')';
-		}
+	&:after {
+		content: ')';
 	}
 }
 </style>

packages/frontend/src/components/MkUpdated.vue

@@ -1,10 +1,10 @@
 <template>
 <MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
-	<div class="ewlycnyt">
-		<div class="title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
-		<div class="version">✨{{ version }}🚀</div>
+	<div :class="$style.root">
+		<div :class="$style.title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
+		<div :class="$style.version">✨{{ version }}🚀</div>
 		<MkButton full @click="whatIsNew">{{ i18n.ts.whatIsNew }}</MkButton>
-		<MkButton class="gotIt" primary full @click="$refs.modal.close()">{{ i18n.ts.gotIt }}</MkButton>
+		<MkButton :class="$style.gotIt" primary full @click="$refs.modal.close()">{{ i18n.ts.gotIt }}</MkButton>
 	</div>
 </MkModal>
 </template>
@@ -32,8 +32,8 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.ewlycnyt {
+<style lang="scss" module>
+.root {
 	position: relative;
 	padding: 32px;
 	min-width: 320px;
@@ -42,17 +42,17 @@ onMounted(() => {
 	text-align: center;
 	background: var(--panel);
 	border-radius: var(--radius);
+}
 
-	> .title {
-		font-weight: bold;
-	}
+.title {
+	font-weight: bold;
+}
 
-	> .version {
-		margin: 1em 0;
-	}
+.version {
+	margin: 1em 0;
+}
 
-	> .gotIt {
-		margin: 8px 0 0 0;
-	}
+.gotIt {
+	margin: 8px 0 0 0;
 }
 </style>

packages/frontend/src/components/MkUsersTooltip.vue

@@ -1,11 +1,11 @@
 <template>
 <MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
-	<div class="beaffaef">
-		<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.root">
+		<div v-for="u in users" :key="u.id" :class="$style.user">
+			<MkAvatar :class="$style.avatar" :user="u"/>
+			<MkUserName :class="$style.name" :user="u" :nowrap="true"/>
 		</div>
-		<div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div>
+		<div v-if="users.length < count" :class="$style.omitted">+{{ count - users.length }}</div>
 	</div>
 </MkTooltip>
 </template>
@@ -26,26 +26,34 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.beaffaef {
+<style lang="scss" module>
+.root {
 	font-size: 0.9em;
 	text-align: left;
+}
 
-	> .user {
-		line-height: 24px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+.user {
+	line-height: 24px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 
-		&:not(:last-child) {
-			margin-bottom: 3px;
-		}
-
-		> .avatar {
-			width: 24px;
-			height: 24px;
-			margin-right: 3px;
-		}
+	&:not(:last-child) {
+		margin-bottom: 3px;
 	}
 }
+
+.name {
+
+}
+
+.omitted {
+	
+}
+
+.avatar {
+	width: 24px;
+	height: 24px;
+	margin-right: 3px;
+}
 </style>