refactor(client): use css modules

packages/frontend/src/components/MkFormDialog.vue

@@ -15,7 +15,7 @@
 	</template>
 
 	<MkSpacer :margin-min="20" :margin-max="32">
-		<div class="xkpnjxcv _gaps_m">
+		<div class="_gaps_m">
 			<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
 				<MkInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1">
 					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
@@ -119,9 +119,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style lang="scss" scoped>
-.xkpnjxcv {
-
-}
-</style>

packages/frontend/src/components/MkGoogle.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="mk-google">
+<div :class="$style.root">
-	<input v-model="query" type="search" :placeholder="q">
+	<input v-model="query" :class="$style.input" type="search" :placeholder="q">
-	<button @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
+	<button :class="$style.button" @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
 </div>
 </template>
 
@@ -19,33 +19,33 @@ const search = () => {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.mk-google {
+.root {
 	display: flex;
 	margin: 8px 0;
+}
 
-	> input {
+.input {
-		flex-shrink: 1;
+	flex-shrink: 1;
-		padding: 10px;
+	padding: 10px;
-		width: 100%;
+	width: 100%;
-		height: 40px;
+	height: 40px;
-		font-size: 16px;
+	font-size: 16px;
-		border: solid 1px var(--divider);
+	border: solid 1px var(--divider);
-		border-radius: 4px 0 0 4px;
+	border-radius: 4px 0 0 4px;
-		-webkit-appearance: textfield;
+	-webkit-appearance: textfield;
-	}
+}
 
-	> button {
+.button {
-		flex-shrink: 0;
+	flex-shrink: 0;
-		margin: 0;
+	margin: 0;
-		padding: 0 16px;
+	padding: 0 16px;
-		border: solid 1px var(--divider);
+	border: solid 1px var(--divider);
-		border-left: none;
+	border-left: none;
-		border-radius: 0 4px 4px 0;
+	border-radius: 0 4px 4px 0;
 
-		&:active {
+	&:active {
-			box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
+		box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
-		}
 	}
 }
 </style>

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="xubzgfgb" :class="{ cover }" :title="title">
+<div :class="[$style.root, { [$style.cover]: cover }]" :title="title">
-	<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
+	<canvas v-if="!loaded" ref="canvas" :class="$style.canvas" :width="size" :height="size" :title="title"/>
-	<img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/>
+	<img v-if="src" :class="$style.img" :src="src" :title="title" :alt="alt" @load="onLoad"/>
 </div>
 </template>
 
@@ -45,32 +45,32 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.xubzgfgb {
+.root {
 	position: relative;
 	width: 100%;
 	height: 100%;
 
-	> canvas,
-	> img {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-
-	> canvas {
-		position: absolute;
-		object-fit: cover;
-	}
-
-	> img {
-		object-fit: contain;
-	}
-
 	&.cover {
-		> img {
+		> .img {
 			object-fit: cover;
 		}
 	}
 }
+
+.canvas,
+.img {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.canvas {
+	position: absolute;
+	object-fit: cover;
+}
+
+.img {
+	object-fit: contain;
+}
 </style>

packages/frontend/src/components/MkLaunchPad.vue

@@ -3,12 +3,12 @@
 	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
 		<div class="main">
 			<template v-for="item in items">
-				<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
+				<button v-if="item.action" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
 					<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 				</button>
-				<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
+				<MkA v-else v-click-anime :to="item.to" class="item" @click.passive="close()">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
 					<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
@@ -82,11 +82,11 @@ function close() {
 		text-align: center;
 	}
 
-	> .main, > .sub {
+	> .main {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 
-		> * {
+		> .item {
 			position: relative;
 			display: flex;
 			flex-direction: column;
@@ -128,11 +128,5 @@ function close() {
 			}
 		}
 	}
-
-	> .sub {
-		margin-top: 8px;
-		padding-top: 8px;
-		border-top: solid 0.5px var(--divider);
-	}
 }
 </style>

packages/frontend/src/components/MkMention.vue

@@ -1,17 +1,11 @@
 <template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }">
+<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }">
-	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
+	<img :class="$style.icon" :src="`/avatar/@${username}@${host}`" alt="">
-	<span class="main">
+	<span>
-		<span class="username">@{{ username }}</span>
+		<span :class="$style.username">@{{ username }}</span>
-		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
+		<span v-if="(host != localHost) || $store.state.showFullAcct" :class="$style.host">@{{ toUnicode(host) }}</span>
 	</span>
 </MkA>
-<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
-	<span class="main">
-		<span class="username">@{{ username }}</span>
-		<span class="host">@{{ toUnicode(host) }}</span>
-	</span>
-</a>
 </template>
 
 <script lang="ts" setup>
@@ -39,8 +33,8 @@ bg.setAlpha(0.1);
 const bgCss = bg.toRgbString();
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.akbvjaqn {
+.root {
 	display: inline-block;
 	padding: 4px 8px 4px 4px;
 	border-radius: 999px;
@@ -49,18 +43,18 @@ const bgCss = bg.toRgbString();
 	&.isMe {
 		color: var(--mentionMe);
 	}
+}
 
-	> .icon {
+.icon {
-		width: 1.5em;
+	width: 1.5em;
-		height: 1.5em;
+	height: 1.5em;
-		object-fit: cover;
+	object-fit: cover;
-		margin: 0 0.2em 0 0;
+	margin: 0 0.2em 0 0;
-		vertical-align: bottom;
+	vertical-align: bottom;
-		border-radius: 100%;
+	border-radius: 100%;
-	}
+}
 
-	> .main > .host {
+.host {
-		opacity: 0.5;
+	opacity: 0.5;
-	}
 }
 </style>