fix: basic font-size (#701)

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)

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);

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);
 

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(),