From 0491c333fc00116f7a1eb88345d6f257155390c9 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Fri, 22 Apr 2022 16:43:12 -0400
Subject: [PATCH] Avoid hiding all non-storybook body children (#346)

Fixes https://github.com/storybookjs/builder-vite/issues/343

This replaces the blunt hammer of

```css
body > * {
  display: none !important;
}
```

with something a bit more nuanced, taken from the storybook default head styles.

This is only necessary until https://github.com/vitejs/vite/pull/7786 is released, then we can remove the workaround and ask users to update vite in order to avoid this flash.
---
 packages/builder-vite/plugins/no-fouc.ts | 25 ++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/builder-vite/plugins/no-fouc.ts b/packages/builder-vite/plugins/no-fouc.ts
index 6d1e0608..f4e81160 100644
--- a/packages/builder-vite/plugins/no-fouc.ts
+++ b/packages/builder-vite/plugins/no-fouc.ts
@@ -21,22 +21,27 @@ export function noFouc(): Plugin {
   };
 }
 
+/**
+ * Insert default styles to hide storybook elements as the page loads until JS can
+ * add the official storybook default head styles and scripts.  These lines are mostly
+ * taken from https://github.com/storybookjs/storybook/blob/next/lib/core-common/templates/base-preview-head.html#L6-L20
+ */
 function insertHeadStyles(html: string) {
   return html.replace(
     '</head>',
     `
   <style>
-    /* Fix for elements flashing */
-    body > * {
-      display: none !important;
+    .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
+      display: none;
+    }
+    .sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
+      display: none;
     }
-    .sb-show-preparing-story > .sb-preparing-story,
-    .sb-show-preparing-docs > .sb-preparing-docs,
-    .sb-show-nopreview > .sb-nopreview,
-    .sb-show-errordisplay > .sb-errordisplay,
-    .sb-show-main > #root,
-    .sb-show-main > #docs-root {
-      display: block !important;
+    :not(.sb-show-preparing-story) > .sb-preparing-story,
+    :not(.sb-show-preparing-docs) > .sb-preparing-docs,
+    :not(.sb-show-nopreview) > .sb-nopreview,
+    :not(.sb-show-errordisplay) > .sb-errordisplay {
+      display: none;
     }
     #root[hidden],
     #docs-root[hidden] {