From b40832a7ebf4835c4a1051a4862092cf2b4c2d62 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sat, 24 Dec 2022 00:19:17 +0100
Subject: [PATCH] fix: font-size ssr

---
 components/nav/SelectFontSize.vue |  8 +++++---
 composables/featureFlags.ts       |  4 +++-
 composables/fontSize.ts           | 30 +++++++++++++++++++++++++-----
 composables/setups.ts             |  7 -------
 styles/global.css                 |  2 +-
 styles/vars.css                   |  2 --
 6 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/components/nav/SelectFontSize.vue b/components/nav/SelectFontSize.vue
index f26509b6..5518b918 100644
--- a/components/nav/SelectFontSize.vue
+++ b/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>
diff --git a/composables/featureFlags.ts b/composables/featureFlags.ts
index d5903bfe..0a3b8b3b 100644
--- a/composables/featureFlags.ts
+++ b/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
diff --git a/composables/fontSize.ts b/composables/fontSize.ts
index dc9a0df3..aa85d71f 100644
--- a/composables/fontSize.ts
+++ b/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']}; }`,
+        },
+      ],
+    })
+  }
 }
diff --git a/composables/setups.ts b/composables/setups.ts
index b524eae7..4c2a9304 100644
--- a/composables/setups.ts
+++ b/composables/setups.ts
@@ -66,10 +66,3 @@ export async function setupI18n() {
     })
   })
 }
-
-export async function setupFontSize() {
-  if (!process.server) {
-    setFontSizeCSSVar()
-    watch(fontSize, setFontSizeCSSVar)
-  }
-}
diff --git a/styles/global.css b/styles/global.css
index 6f9e34d2..1151434d 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,5 +1,5 @@
 html {
-  font-size: var(--font-size);
+  font-size: var(--font-size, 15px);
 }
 
 @font-face {
diff --git a/styles/vars.css b/styles/vars.css
index cf69b850..2fbbd9ab 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -1,6 +1,4 @@
 :root {
-  --font-size: 15px;
-  
   --c-primary: #EA9E44;
   --c-primary-active: #C16929;
   --c-primary-light: #EA9E4466;