From 5da74897ae5ac439a0f78143e217d5ee4b7747fd Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 14 Jan 2023 12:43:54 +0900 Subject: [PATCH] refactor(client): use css modules --- .../global/MkMisskeyFlavoredMarkdown.vue | 25 +++---------------- packages/frontend/src/components/mfm.ts | 13 ++++++++-- 2 files changed, 14 insertions(+), 24 deletions(-) diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue index 7b2ae03f59..28a0d1c986 100644 --- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue +++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue @@ -1,5 +1,5 @@ <template> -<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" class="havbbuyv" :class="{ nowrap }"/> +<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" :class="[$style.root, { [$style.nowrap]: nowrap }]"/> </template> <script lang="ts" setup> @@ -157,8 +157,8 @@ const props = withDefaults(defineProps<{ } </style> -<style lang="scss" scoped> -.havbbuyv { +<style lang="scss" module> +.root { white-space: pre-wrap; &.nowrap { @@ -167,24 +167,5 @@ const props = withDefaults(defineProps<{ overflow: hidden; text-overflow: ellipsis; } - - ::v-deep(.quote) { - display: block; - margin: 8px; - padding: 6px 0 6px 12px; - color: var(--fg); - border-left: solid 3px var(--fg); - opacity: 0.7; - } - - ::v-deep(pre) { - font-size: 0.8em; - } - - > ::v-deep(code) { - font-size: 0.8em; - word-break: break-all; - padding: 4px 6px; - } } </style> diff --git a/packages/frontend/src/components/mfm.ts b/packages/frontend/src/components/mfm.ts index 2dbb5217be..865ec19531 100644 --- a/packages/frontend/src/components/mfm.ts +++ b/packages/frontend/src/components/mfm.ts @@ -12,6 +12,15 @@ import MkA from '@/components/global/MkA.vue'; import { host } from '@/config'; import { MFM_TAGS } from '@/scripts/mfm-tags'; +const QUOTE_STYLE = ` +display: block; +margin: 8px; +padding: 6px 0 6px 12px; +color: var(--fg); +border-left: solid 3px var(--fg); +opacity: 0.7; +`.split('\n').join(' '); + export default defineComponent({ props: { text: { @@ -276,11 +285,11 @@ export default defineComponent({ case 'quote': { if (!this.nowrap) { return [h('div', { - class: 'quote', + style: QUOTE_STYLE, }, genEl(token.children))]; } else { return [h('span', { - class: 'quote', + style: QUOTE_STYLE, }, genEl(token.children))]; } }