perf(#10923): CSS Modules のクラス名をインライン化する (#10930)

* 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>

1 files changed, 33 insertions, 13 deletions

diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
index b9ce6de697..bb5c6c7aab 100644
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@@ -1,10 +1,30 @@
 <template>
 <Transition
 	:name="transitionName"
-	:enterActiveClass="$style['transition_' + transitionName + '_enterActive']"
-	:leaveActiveClass="$style['transition_' + transitionName + '_leaveActive']"
-	:enterFromClass="$style['transition_' + transitionName + '_enterFrom']"
-	:leaveToClass="$style['transition_' + transitionName + '_leaveTo']"
+	:enterActiveClass="normalizeClass({
+		[$style.transition_modalDrawer_enterActive]: transitionName === 'modal-drawer',
+		[$style.transition_modalPopup_enterActive]: transitionName === 'modal-popup',
+		[$style.transition_modal_enterActive]: transitionName === 'modal',
+		[$style.transition_send_enterActive]: transitionName === 'send',
+	})"
+	:leaveActiveClass="normalizeClass({
+		[$style.transition_modalDrawer_leaveActive]: transitionName === 'modal-drawer',
+		[$style.transition_modalPopup_leaveActive]: transitionName === 'modal-popup',
+		[$style.transition_modal_leaveActive]: transitionName === 'modal',
+		[$style.transition_send_leaveActive]: transitionName === 'send',
+	})"
+	:enterFromClass="normalizeClass({
+		[$style.transition_modalDrawer_enterFrom]: transitionName === 'modal-drawer',
+		[$style.transition_modalPopup_enterFrom]: transitionName === 'modal-popup',
+		[$style.transition_modal_enterFrom]: transitionName === 'modal',
+		[$style.transition_send_enterFrom]: transitionName === 'send',
+	})"
+	:leaveToClass="normalizeClass({
+		[$style.transition_modalDrawer_leaveTo]: transitionName === 'modal-drawer',
+		[$style.transition_modalPopup_leaveTo]: transitionName === 'modal-popup',
+		[$style.transition_modal_leaveTo]: transitionName === 'modal',
+		[$style.transition_send_leaveTo]: transitionName === 'send',
+	})"
 	:duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened"
 >
 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
@@ -17,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, watch, provide, onUnmounted } from 'vue';
+import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch } from 'vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { defaultStore } from '@/store';
@@ -345,8 +365,8 @@ defineExpose({
 	}
 }
 
-.transition_modal-popup_enterActive,
-.transition_modal-popup_leaveActive {
+.transition_modalPopup_enterActive,
+.transition_modalPopup_leaveActive {
 	> .bg {
 		transition: opacity 0.1s !important;
 	}
@@ -356,8 +376,8 @@ defineExpose({
 		transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1), transform 0.1s cubic-bezier(0, 0, 0.2, 1) !important;
 	}
 }
-.transition_modal-popup_enterFrom,
-.transition_modal-popup_leaveTo {
+.transition_modalPopup_enterFrom,
+.transition_modalPopup_leaveTo {
 	> .bg {
 		opacity: 0;
 	}
@@ -370,7 +390,7 @@ defineExpose({
 	}
 }
 
-.transition_modal-drawer_enterActive {
+.transition_modalDrawer_enterActive {
 	> .bg {
 		transition: opacity 0.2s !important;
 	}
@@ -379,7 +399,7 @@ defineExpose({
 		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
 	}
 }
-.transition_modal-drawer_leaveActive {
+.transition_modalDrawer_leaveActive {
 	> .bg {
 		transition: opacity 0.2s !important;
 	}
@@ -388,8 +408,8 @@ defineExpose({
 		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
 	}
 }
-.transition_modal-drawer_enterFrom,
-.transition_modal-drawer_leaveTo {
+.transition_modalDrawer_enterFrom,
+.transition_modalDrawer_leaveTo {
 	> .bg {
 		opacity: 0;
 	}