fix: font-size ssr

composables/featureFlags.ts

@@ -17,7 +17,9 @@ export function getDefaultFeatureFlags(): FeatureFlags {
   }
 }
 
-export const currentUserFeatureFlags = process.server ? computed(getDefaultFeatureFlags) : useUserLocalStorage(STORAGE_KEY_FEATURE_FLAGS, getDefaultFeatureFlags)
+export const currentUserFeatureFlags = process.server
+  ? computed(getDefaultFeatureFlags)
+  : useUserLocalStorage(STORAGE_KEY_FEATURE_FLAGS, getDefaultFeatureFlags)
 
 export function useFeatureFlags() {
   const featureFlags = currentUserFeatureFlags.value

composables/fontSize.ts

@@ -1,11 +1,15 @@
+import type { InjectionKey, Ref } from 'vue'
 import { STORAGE_KEY_FONT_SIZE } from '~/constants'
 
 export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-export const fontSize = useLocalStorage<FontSize>(STORAGE_KEY_FONT_SIZE, 'md')
+export const InjectionKeyFontSize = Symbol('fontSize') as InjectionKey<Ref<FontSize>>
 
 export function setFontSize(size: FontSize) {
-  fontSize.value = size
+  inject(InjectionKeyFontSize)!.value = size
+}
+
+export function getFontSize() {
+  return inject(InjectionKeyFontSize)!
 }
 
 export const fontSizeMap = {
@@ -16,6 +20,22 @@ export const fontSizeMap = {
   xl: '17px',
 }
 
-export function setFontSizeCSSVar() {
-  document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value])
+export async function setupFontSize() {
+  const fontSize = useCookie<FontSize>(STORAGE_KEY_FONT_SIZE, { default: () => 'md' })
+  getCurrentInstance()?.appContext.app.provide(InjectionKeyFontSize, fontSize)
+
+  if (!process.server) {
+    watchEffect(() => {
+      document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value || 'md'])
+    })
+  }
+  else {
+    useHead({
+      style: [
+        {
+          innerHTML: `:root { --font-size: ${fontSizeMap[fontSize.value || 'md']}; }`,
+        },
+      ],
+    })
+  }
 }

composables/setups.ts

@@ -66,10 +66,3 @@ export async function setupI18n() {
     })
   })
 }
-
-export async function setupFontSize() {
-  if (!process.server) {
-    setFontSizeCSSVar()
-    watch(fontSize, setFontSizeCSSVar)
-  }
-}