From 02f81a6fd52ef15df72c7fee3818c015ee89d149 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 23 Sep 2022 19:59:05 +0300
Subject: [PATCH] render global styles and font family together

---
 apps/designer/app/canvas/canvas.tsx |  4 ++--
 packages/react-sdk/src/tree/root.ts | 31 +++++++++++++++--------------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/apps/designer/app/canvas/canvas.tsx b/apps/designer/app/canvas/canvas.tsx
index f6d551514f..52b7ebb6a8 100644
--- a/apps/designer/app/canvas/canvas.tsx
+++ b/apps/designer/app/canvas/canvas.tsx
@@ -3,7 +3,7 @@ import store from "immerhin";
 import type { Build } from "@webstudio-is/project";
 import {
   createElementsTree,
-  globalStyles,
+  useGlobalStyles,
   type OnChangeChildren,
   type Tree,
   useAllUserProps,
@@ -117,7 +117,7 @@ export const Canvas = ({ data }: CanvasProps): JSX.Element | null => {
   }
   const isDesignerReady = useSubscribeDesignerReady();
   useInitializeBreakpoints(data.breakpoints);
-  globalStyles();
+  useGlobalStyles({ assets: data.assets })();
   useAllUserProps(data.props);
   usePopulateRootInstance(data.tree);
   // e.g. toggling preview is still needed in both modes
diff --git a/packages/react-sdk/src/tree/root.ts b/packages/react-sdk/src/tree/root.ts
index f761e69a2c..1b2dbd6c20 100644
--- a/packages/react-sdk/src/tree/root.ts
+++ b/packages/react-sdk/src/tree/root.ts
@@ -9,7 +9,7 @@ import {
 } from "./wrapper-component";
 import { FONT_FORMATS, getFontFaces } from "@webstudio-is/fonts";
 import type { Asset, FontAsset } from "@webstudio-is/asset-uploader";
-import { useMemo } from "react";
+import { useCallback } from "react";
 
 export type Data = {
   tree: Tree | null;
@@ -18,11 +18,20 @@ export type Data = {
   assets: Array<Asset>;
 };
 
-export const globalStyles = globalCss({
-  html: {
-    height: "100%",
-  },
-});
+export const useGlobalStyles = ({ assets }: { assets: Array<Asset> }) => {
+  return useCallback(() => {
+    const fontAssets = assets.filter(
+      (asset) => asset.format in FONT_FORMATS
+    ) as Array<FontAsset>;
+
+    return globalCss({
+      "@font-face": getFontFaces(fontAssets),
+      html: {
+        height: "100%",
+      },
+    })();
+  }, [assets]);
+};
 
 type RootProps = {
   data: Data;
@@ -37,15 +46,7 @@ export const InstanceRoot = ({
     throw new Error("Tree is null");
   }
   setBreakpoints(data.breakpoints);
-  globalStyles();
-  const assets = useMemo(() => {
-    return data.assets.filter(
-      (asset) => asset.format in FONT_FORMATS
-    ) as Array<FontAsset>;
-  }, [data.assets]);
-  globalCss({
-    "@font-face": getFontFaces(assets),
-  })();
+  useGlobalStyles({ assets: data.assets })();
   useAllUserProps(data.props);
   return createElementsTree({
     instance: data.tree.root,