From 7bebe7daf4eeaef1da3f67206025560e7fdb4f16 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Wed, 27 Sep 2023 12:32:11 +0700
Subject: [PATCH] Fixed theme preview on theme without styles (#18375)

refs https://ghost.slack.com/archives/C0568LN2CGJ/p1695741379821479

- Fixes a bug in the preview renderer where a theme without styles
wouldn't be handled properly as it cannot inject new styles and cause an
empty page to be returned.

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
copilot:summary
---
 .../settings/site/designAndBranding/ThemePreview.tsx      | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreview.tsx b/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreview.tsx
index cd00975df5..f550825e35 100644
--- a/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreview.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreview.tsx
@@ -81,8 +81,12 @@ const ThemePreview: React.FC<ThemePreviewProps> = ({settings,url}) => {
                 const htmlDoc = domParser.parseFromString(data, 'text/html');
 
                 const stylesheet = htmlDoc.querySelector('style') as HTMLStyleElement;
-                const originalCSS = stylesheet.innerHTML;
-                stylesheet.innerHTML = `${originalCSS}\n\n${injectedCss}`;
+                const originalCSS = stylesheet?.innerHTML;
+                if (originalCSS) {
+                    stylesheet.innerHTML = `${originalCSS}\n\n${injectedCss}`;
+                } else {
+                    htmlDoc.head.innerHTML += `<style>${injectedCss}</style>`;
+                }
 
                 // replace the iframe contents with the doctored preview html
                 const doctype = htmlDoc.doctype ? new XMLSerializer().serializeToString(htmlDoc.doctype) : '';