sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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 5c7ef366ec.

* 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>
This commit is contained in:
Acid Chicken (硫酸鶏)
2023-06-01 17:19:46 +09:00
committed by GitHub
parent 146e89edd0
commit 337dd97b49
53 changed files with 2295 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/frontend/src/ui/_common_/common.vue
View File

@@ -10,7 +10,15 @@
<XUpload v-if="uploads.length > 0"/>
<TransitionGroup
tag="div" :class="[$style.notifications, $style[`notificationsPosition-${defaultStore.state.notificationPosition}`], $style[`notificationsStackAxis-${defaultStore.state.notificationStackAxis}`]]"
tag="div"
:class="[$style.notifications, {
[$style.notificationsPosition_leftTop]: defaultStore.state.notificationPosition === 'leftTop',
[$style.notificationsPosition_leftBottom]: defaultStore.state.notificationPosition === 'leftBottom',
[$style.notificationsPosition_rightTop]: defaultStore.state.notificationPosition === 'rightTop',
[$style.notificationsPosition_rightBottom]: defaultStore.state.notificationPosition === 'rightBottom',
[$style.notificationsStackAxis_vertical]: defaultStore.state.notificationStackAxis === 'vertical',
[$style.notificationsStackAxis_horizontal]: defaultStore.state.notificationStackAxis === 'horizontal',
}]"
:moveClass="defaultStore.state.animation ? $style.transition_notification_move : ''"
:enterActiveClass="defaultStore.state.animation ? $style.transition_notification_enterActive : ''"
:leaveActiveClass="defaultStore.state.animation ? $style.transition_notification_leaveActive : ''"
@@ -103,31 +111,31 @@ if ($i) {
pointer-events: none;
display: flex;
&.notificationsPosition-leftTop {
&.notificationsPosition_leftTop {
top: var(--margin);
left: 0;
}
&.notificationsPosition-rightTop {
&.notificationsPosition_rightTop {
top: var(--margin);
right: 0;
}
&.notificationsPosition-leftBottom {
&.notificationsPosition_leftBottom {
bottom: calc(var(--minBottomSpacing) + var(--margin));
left: 0;
}
&.notificationsPosition-rightBottom {
&.notificationsPosition_rightBottom {
bottom: calc(var(--minBottomSpacing) + var(--margin));
right: 0;
}
&.notificationsStackAxis-vertical {
&.notificationsStackAxis_vertical {
width: 250px;
&.notificationsPosition-leftTop,
&.notificationsPosition-rightTop {
&.notificationsPosition_leftTop,
&.notificationsPosition_rightTop {
flex-direction: column;
.notification {
@@ -137,8 +145,8 @@ if ($i) {
}
}
&.notificationsPosition-leftBottom,
&.notificationsPosition-rightBottom {
&.notificationsPosition_leftBottom,
&.notificationsPosition_rightBottom {
flex-direction: column-reverse;
.notification {
@@ -149,11 +157,11 @@ if ($i) {
}
}
&.notificationsStackAxis-horizontal {
&.notificationsStackAxis_horizontal {
width: 100%;
&.notificationsPosition-leftTop,
&.notificationsPosition-leftBottom {
&.notificationsPosition_leftTop,
&.notificationsPosition_leftBottom {
flex-direction: row;
.notification {
@@ -163,8 +171,8 @@ if ($i) {
}
}
&.notificationsPosition-rightTop,
&.notificationsPosition-rightBottom {
&.notificationsPosition_rightTop,
&.notificationsPosition_rightBottom {
flex-direction: row-reverse;
.notification {