From 1e6973a34349c56751dd41e98e78cd6f5ff85fc0 Mon Sep 17 00:00:00 2001
From: star knight <64941905+starknt@users.noreply.github.com>
Date: Thu, 2 May 2024 13:43:49 +0800
Subject: [PATCH] fix: basic `font-size` (#701)

---
 src/contentScripts/views/App.vue |  2 +-
 src/styles/main.scss             |  2 +-
 src/styles/variables.scss        |  1 +
 unocss.config.ts                 | 17 +++++++++++++++++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index f7a3da65..0bc486d7 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -113,7 +113,7 @@ onMounted(() => {
     // Force overwrite Bilibili Evolved body tag & html tag background color
     document.body.style.setProperty('background-color', 'unset', 'important')
   }
-  document.documentElement.style.setProperty('font-size', '14px')
+  // document.documentElement.style.setProperty('font-size', '14px')
 
   document.addEventListener('scroll', () => {
     if (window.scrollY > 0)
diff --git a/src/styles/main.scss b/src/styles/main.scss
index b29513df..a11cd812 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -37,7 +37,7 @@ html.bewly-design > ::-webkit-scrollbar-track {
 
 html.bewly-design,
 .bewly-design body {
-  font-size: 14px !important;
+  // font-size: 14px !important;
   min-width: unset !important;
   filter: none !important;
   color: var(--bew-text-1);
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 925dc8fa..bcfbf4a0 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,5 +1,6 @@
 :host,
 :root {
+  --bew-base-font-size: 14px;
   --bew-radius: 12px;
   --bew-radius-half: calc(var(--bew-radius) / 2);
 
diff --git a/unocss.config.ts b/unocss.config.ts
index 78286559..229ca25c 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -1,6 +1,8 @@
 import { defineConfig } from 'unocss/vite'
 import { presetAttributify, presetIcons, presetTypography, presetUno, transformerDirectives } from 'unocss'
 
+const remRE = /(-?[\.\d]+)rem/g
+
 export default defineConfig({
   presets: [
     presetUno(),
@@ -14,6 +16,21 @@ export default defineConfig({
       },
     }),
     presetTypography(),
+
+    {
+      name: 'text-size-transformer',
+      postprocess: (util) => {
+        util.entries.forEach((i) => {
+          const value = i[1]
+
+          if (typeof value === 'string' && remRE.test(value)) {
+            i[1] = value.replace(remRE, (_, num: number) => {
+              return `calc(var(--bew-base-font-size) * ${num})`
+            })
+          }
+        })
+      },
+    },
   ],
   transformers: [
     transformerDirectives(),