refactor(client): use css modules

packages/frontend/src/components/global/MkAvatar.vue

@@ -52,7 +52,7 @@ watch(() => props.user.avatarBlurhash, () => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 @keyframes earwiggleleft {
 	from { transform: rotate(37.6deg) skew(30deg); }
 	25% { transform: rotate(10deg) skew(30deg); }
@@ -68,9 +68,7 @@ watch(() => props.user.avatarBlurhash, () => {
 	75% { transform: rotate(0deg) skew(-30deg); }
 	to { transform: rotate(-37.6deg) skew(-30deg); }
 }
-</style>
 
-<style lang="scss" module>
 .root {
 	position: relative;
 	display: inline-block;

packages/frontend/src/ui/classic.vue

@@ -7,7 +7,7 @@
 			<XSidebar/>
 		</div>
 		<div v-else ref="widgetsLeft" class="widgets left">
-			<XWidgets place="left" :classic="true" @mounted="attachSticky(widgetsLeft)"/>
+			<XWidgets place="left" :margin-top="'var(--margin)'" @mounted="attachSticky(widgetsLeft)"/>
 		</div>
 
 		<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
@@ -17,7 +17,7 @@
 		</main>
 
 		<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
-			<XWidgets :place="showMenuOnTop ? 'right' : null" :classic="true" @mounted="attachSticky(widgetsRight)"/>
+			<XWidgets :place="showMenuOnTop ? 'right' : null" :margin-top="'var(--margin)'" @mounted="attachSticky(widgetsRight)"/>
 		</div>
 	</div>
 
@@ -80,7 +80,7 @@ provide('shouldHeaderThin', showMenuOnTop);
 provide('forceSpacerMin', true);
 
 function attachSticky(el) {
-	const sticky = new StickySidebar(el, defaultStore.state.menuDisplay === 'top' ? 0 : 16, defaultStore.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
+	const sticky = new StickySidebar(el, 0, defaultStore.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
 	window.addEventListener('scroll', () => {
 		sticky.calc(window.scrollY);
 	}, { passive: true });
@@ -248,7 +248,6 @@ onMounted(() => {
 		> .widgets {
 			//--panelBorder: none;
 			width: 300px;
-			margin-top: 16px;
 
 			@media (max-width: $widgets-hide-threshold) {
 				display: none;

packages/frontend/src/ui/universal.vue

@@ -13,7 +13,7 @@
 	</MkStickyContainer>
 
 	<div v-if="isDesktop" ref="widgetsEl" :class="$style.widgets">
-		<XWidgets @mounted="attachSticky"/>
+		<XWidgets :margin-top="'var(--margin)'" @mounted="attachSticky"/>
 	</div>
 
 	<button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
@@ -26,7 +26,12 @@
 		<button :class="$style.navButton" class="_button post" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
 	</div>
 
-	<Transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
+	<Transition
+		:enter-active-class="$store.state.animation ? $style.transition_menuDrawerBg_enterActive : ''"
+		:leave-active-class="$store.state.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
+		:enter-from-class="$store.state.animation ? $style.transition_menuDrawerBg_enterFrom : ''"
+		:leave-to-class="$store.state.animation ? $style.transition_menuDrawerBg_leaveTo : ''"
+	>
 		<div
 			v-if="drawerMenuShowing"
 			:class="$style.menuDrawerBg"
@@ -36,11 +41,21 @@
 		></div>
 	</Transition>
 
-	<Transition :name="$store.state.animation ? 'menuDrawer' : ''">
+	<Transition
+		:enter-active-class="$store.state.animation ? $style.transition_menuDrawer_enterActive : ''"
+		:leave-active-class="$store.state.animation ? $style.transition_menuDrawer_leaveActive : ''"
+		:enter-from-class="$store.state.animation ? $style.transition_menuDrawer_enterFrom : ''"
+		:leave-to-class="$store.state.animation ? $style.transition_menuDrawer_leaveTo : ''"
+	>
 		<XDrawerMenu v-if="drawerMenuShowing" :class="$style.menuDrawer"/>
 	</Transition>
 
-	<Transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
+	<Transition
+		:enter-active-class="$store.state.animation ? $style.transition_widgetsDrawerBg_enterActive : ''"
+		:leave-active-class="$store.state.animation ? $style.transition_widgetsDrawerBg_leaveActive : ''"
+		:enter-from-class="$store.state.animation ? $style.transition_widgetsDrawerBg_enterFrom : ''"
+		:leave-to-class="$store.state.animation ? $style.transition_widgetsDrawerBg_leaveTo : ''"
+	>
 		<div
 			v-if="widgetsShowing"
 			:class="$style.widgetsDrawerBg"
@@ -50,8 +65,15 @@
 		></div>
 	</Transition>
 
-	<Transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
+	<Transition
-		<XWidgets v-if="widgetsShowing" :class="$style.widgetsDrawer"/>
+		:enter-active-class="$store.state.animation ? $style.transition_widgetsDrawer_enterActive : ''"
+		:leave-active-class="$store.state.animation ? $style.transition_widgetsDrawer_leaveActive : ''"
+		:enter-from-class="$store.state.animation ? $style.transition_widgetsDrawer_enterFrom : ''"
+		:leave-to-class="$store.state.animation ? $style.transition_widgetsDrawer_leaveTo : ''"
+	>
+		<div v-if="widgetsShowing" :class="$style.widgetsDrawer">
+			<XWidgets/>
+		</div>
 	</Transition>
 
 	<XCommon/>
@@ -176,55 +198,53 @@ function top() {
 const wallpaper = miLocalStorage.getItem('wallpaper') != null;
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.widgetsDrawer-enter-active,
+$ui-font-size: 1em; // TODO: どこかに集約したい
-.widgetsDrawer-leave-active {
+$widgets-hide-threshold: 1090px;
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.widgetsDrawer-enter-from,
-.widgetsDrawer-leave-active {
-	opacity: 0;
-	transform: translateX(240px);
-}
 
-.widgetsDrawer-back-enter-active,
+.transition_menuDrawerBg_enterActive,
-.widgetsDrawer-back-leave-active {
+.transition_menuDrawerBg_leaveActive {
 	opacity: 1;
 	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-.widgetsDrawer-back-enter-from,
+.transition_menuDrawerBg_enterFrom,
-.widgetsDrawer-back-leave-active {
+.transition_menuDrawerBg_leaveTo {
 	opacity: 0;
 }
 
-.menuDrawer-enter-active,
+.transition_menuDrawer_enterActive,
-.menuDrawer-leave-active {
+.transition_menuDrawer_leaveActive {
 	opacity: 1;
 	transform: translateX(0);
 	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-.menuDrawer-enter-from,
+.transition_menuDrawer_enterFrom,
-.menuDrawer-leave-active {
+.transition_menuDrawer_leaveTo {
 	opacity: 0;
 	transform: translateX(-240px);
 }
 
-.menuDrawer-back-enter-active,
+.transition_widgetsDrawerBg_enterActive,
-.menuDrawer-back-leave-active {
+.transition_widgetsDrawerBg_leaveActive {
 	opacity: 1;
 	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-.menuDrawer-back-enter-from,
+.transition_widgetsDrawerBg_enterFrom,
-.menuDrawer-back-leave-active {
+.transition_widgetsDrawerBg_leaveTo {
 	opacity: 0;
 }
-</style>
 
-<style lang="scss" module>
+.transition_widgetsDrawer_enterActive,
-$ui-font-size: 1em; // TODO: どこかに集約したい
+.transition_widgetsDrawer_leaveActive {
-$widgets-hide-threshold: 1090px;
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.transition_widgetsDrawer_enterFrom,
+.transition_widgetsDrawer_leaveTo {
+	opacity: 0;
+	transform: translateX(240px);
+}
 
 .root {
 	min-height: 100dvh;

packages/frontend/src/ui/universal.widgets.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="efzpzdvf" :class="{ universal: !classic, classic }">
+<div :class="$style.root" :style="{ paddingTop: marginTop }">
-	<XWidgets :edit="editMode" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+	<XWidgets :class="$style.widgets" :edit="editMode" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 
 	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
 	<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
@@ -21,10 +21,10 @@ const props = withDefaults(defineProps<{
 	// left = place: leftだけを表示
 	// right = rightとnullを表示
 	place?: 'left' | null | 'right';
-	classic?: boolean;
+	marginTop?: string;
 }>(), {
 	place: null,
-	classic: false,
+	marginTop: '0',
 });
 
 const emit = defineEmits<{
@@ -81,31 +81,15 @@ function updateWidgets(thisWidgets) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.efzpzdvf {
+.root {
 	position: sticky;
 	height: min-content;
 	min-height: 100vh;
 	box-sizing: border-box;
+}
 
-	&.universal {
+.widgets {
-		padding-top: var(--margin);
+	width: 300px;
-
-		> * {
-			margin: var(--margin) 0;
-		}
-	}
-
-	> * {
-		width: 300px;
-
-		&:first-child {
-			margin-top: 0;
-		}
-	}
-
-	> .add {
-		margin: 0 auto;
-	}
 }
 </style>

packages/frontend/vite.config.ts

@@ -59,7 +59,11 @@ export default defineConfig(({ command, mode }) => {
 		css: {
 			modules: {
 				generateScopedName: (name, filename, css) => {
-					return 'x' + toBase62(hash(`${filename} ${name}`)).substring(0, 4);
+					if (process.env.NODE_ENV === 'production') {
+						return 'x' + toBase62(hash(`${filename} ${name}`)).substring(0, 4);
+					} else {
+						return 'x' + toBase62(hash(`${filename} ${name}`)).substring(0, 4) + '-' + name;
+					}
 				},
 			},
 		},