From 7413483266a4d41111e34300d963a4f611d8047f Mon Sep 17 00:00:00 2001
From: Daniel Lautzenheiser <lautzd@gmail.com>
Date: Tue, 4 Apr 2023 21:50:00 -0400
Subject: [PATCH] Only include default preview frame styles if no preview
 styles are provided

---
 BREAKING_CHANGES.md                           |  4 +++
 .../editor-preview-pane/EditorPreviewPane.tsx | 26 ++++++++++---------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
index 0a9a8c22..652f915b 100644
--- a/BREAKING_CHANGES.md
+++ b/BREAKING_CHANGES.md
@@ -9,6 +9,10 @@ BREAKING_CHANGES
 - media path changed from `string | string[]` to `{ path: string | string[], alt?: string }`
 - Nested collections, meta config moved into nested config.
 
+CHANGES
+
+- Default styles are now provided in the preview frame. If you provide your own via `registerPreviewStyle`, then these default styles will not be included.
+
 ADDED
 - `forSingleList` - Allows for changing styles for single list items
 
diff --git a/packages/core/src/components/entry-editor/editor-preview-pane/EditorPreviewPane.tsx b/packages/core/src/components/entry-editor/editor-preview-pane/EditorPreviewPane.tsx
index 248dc92e..ede5b65f 100644
--- a/packages/core/src/components/entry-editor/editor-preview-pane/EditorPreviewPane.tsx
+++ b/packages/core/src/components/entry-editor/editor-preview-pane/EditorPreviewPane.tsx
@@ -112,18 +112,20 @@ const PreviewPane = (props: TranslatedProps<EditorPreviewPaneProps>) => {
 
   const { widgetFor, widgetsFor } = useWidgetsFor(config, collection, fields, entry);
 
-  const previewStyles = useMemo(
-    () => [
-      ...getPreviewStyles().map((style, i) => {
-        if (style.raw) {
-          return <style key={i}>{style.value}</style>;
-        }
-        return <link key={i} href={style.value} type="text/css" rel="stylesheet" />;
-      }),
-      <style key="global">{FrameGlobalStyles}</style>,
-    ],
-    [],
-  );
+  const previewStyles = useMemo(() => {
+    const styles = getPreviewStyles().map((style, i) => {
+      if (style.raw) {
+        return <style key={i}>{style.value}</style>;
+      }
+      return <link key={i} href={style.value} type="text/css" rel="stylesheet" />;
+    });
+
+    if (styles.length === 0) {
+      return <style key="global">{FrameGlobalStyles}</style>;
+    }
+
+    return styles;
+  }, []);
 
   const previewComponent = useMemo(
     () => getPreviewTemplate(selectTemplateName(collection, entry.slug)) ?? EditorPreview,