From de97d8fbdc4e7968be44096a30df055b5fb5f448 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Tue, 15 Nov 2022 22:25:41 +0100
Subject: [PATCH] remove ssr stylesheet from the page once we loaded a dynamic
 one on canvas

---
 apps/designer/app/canvas/shared/styles.ts | 11 +++++++++++
 apps/designer/app/routes/$.tsx            |  8 +++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/apps/designer/app/canvas/shared/styles.ts b/apps/designer/app/canvas/shared/styles.ts
index 4e12c31cce..32706d46e4 100644
--- a/apps/designer/app/canvas/shared/styles.ts
+++ b/apps/designer/app/canvas/shared/styles.ts
@@ -9,6 +9,7 @@ import {
   toVarNamespace,
 } from "@webstudio-is/react-sdk";
 import { globalCss } from "@webstudio-is/design-system";
+import { useEffect } from "react";
 
 const setCssVar = (id: string, property: string, value?: StyleValue) => {
   const customProperty = `--${toVarNamespace(id, property)}`;
@@ -47,6 +48,15 @@ const usePreviewStyle = () => {
   });
 };
 
+// Once we rendered the tree in editing mode, we have rendered all styles in a <style> tag.
+// We keep the SSR styles just for the page on canvas to show up like it does in preview.
+const useRemoveSsrStyles = () => {
+  useEffect(() => {
+    const link = document.head.querySelector('[data-webstudio="ssr"]');
+    link?.parentElement?.removeChild(link);
+  }, []);
+};
+
 const voidElements =
   "area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr";
 
@@ -81,4 +91,5 @@ export const useManageStyles = () => {
   wrapperComponentGlobalStyles();
   useUpdateStyle();
   usePreviewStyle();
+  useRemoveSsrStyles();
 };
diff --git a/apps/designer/app/routes/$.tsx b/apps/designer/app/routes/$.tsx
index 69a2cefbb8..e49895a4dd 100644
--- a/apps/designer/app/routes/$.tsx
+++ b/apps/designer/app/routes/$.tsx
@@ -29,7 +29,13 @@ export const dynamicLinks: DynamicLinksFunction<CanvasData> = ({
 }) => {
   const searchParams = new URLSearchParams(location.search);
   searchParams.set("pageId", data.page.id);
-  return [{ rel: "stylesheet", href: `/s/css/?${searchParams}` }];
+  return [
+    {
+      rel: "stylesheet",
+      href: `/s/css/?${searchParams}`,
+      "data-webstudio": "ssr",
+    },
+  ];
 };
 
 export const meta: MetaFunction = ({ data }: { data: Data }) => {