From a45fabad7589c353dd5c1770177eb12a9f255b8e Mon Sep 17 00:00:00 2001 From: Steve Sewell Date: Fri, 26 Jul 2024 13:24:57 -0700 Subject: [PATCH] add support for emotion this is unusable if you use emotion as you get a huge diff of the emotion SSR style tags and can't find what you actually are looking for this strips those out for the diff so you can actually see what changed as desired --- packages/lib/src/Overlay.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/Overlay.tsx b/packages/lib/src/Overlay.tsx index d04785f..65ae6dd 100644 --- a/packages/lib/src/Overlay.tsx +++ b/packages/lib/src/Overlay.tsx @@ -5,6 +5,14 @@ import { createPortal } from "react-dom"; import React, { useEffect, useState } from "react"; import ReactDiffViewer, { DiffMethod } from "react-diff-viewer"; +// Remove emotion-inserted style tags from the HTML string from the server +// as they get removed before hydration, so they shouldn't show in the diff +// (pollutes the diff and makes it unusable) +function removeEmotionStyleTags(htmlString = "") { + const regex = /])*>[\s\S]*?<\/style>/g; + return htmlString.replace(regex, ""); +} + const DiffViewer: typeof ReactDiffViewer = (ReactDiffViewer as any).default ? (ReactDiffViewer as any).default : ReactDiffViewer; @@ -23,7 +31,9 @@ export function Overlay() { ); return; } - const ssrHtml = window.BUILDER_HYDRATION_OVERLAY.SSR_HTML; + const ssrHtml = removeEmotionStyleTags( + window.BUILDER_HYDRATION_OVERLAY.SSR_HTML + ); const newCSRHtml = window.BUILDER_HYDRATION_OVERLAY.CSR_HTML; if (!ssrHtml || !newCSRHtml) return;