fix: font-size ssr

components/nav/SelectFontSize.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
-import { FontSize } from 'composables/fontSize'
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
+import type { FontSize } from '~/composables/fontSize'
+
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
+const fontSize = getFontSize()
 </script>
 
 <template>
@@ -12,7 +14,7 @@ const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
         v-for="size in sizes"
         :key="size"
         :checked="size === fontSize"
-        @click="setFontSize(size as FontSize)"
+        @click="fontSize = size"
       >
         {{ size }}
       </CommonDropdownItem>

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

styles/global.css

@@ -1,5 +1,5 @@
 html {
-  font-size: var(--font-size);
+  font-size: var(--font-size, 15px);
 }
 
 @font-face {

styles/vars.css

@@ -1,6 +1,4 @@
 :root {
-  --font-size: 15px;
-  
   --c-primary: #EA9E44;
   --c-primary-active: #C16929;
   --c-primary-light: #EA9E4466;