-
Notifications
You must be signed in to change notification settings - Fork 109
/
no-fouc.ts
54 lines (51 loc) · 1.52 KB
/
no-fouc.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import type { Plugin } from 'vite';
/**
* This plugin is a workaround to inject some styles into the `<head>` of the iframe to
* prevent the "no story" text from appearing breifly while the page loads in.
*
* It can be removed, and these styles placed back into the head,
* when https://github.com/vitejs/vite/issues/6737 is closed.
*/
export function noFouc(): Plugin {
return {
name: 'no-fouc',
enforce: 'post',
async transformIndexHtml(html, ctx) {
if (ctx.path !== '/iframe.html') {
return;
}
return insertHeadStyles(html);
},
};
}
/**
* 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>
.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;
}
: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] {
display: none !important;
}
</style>
</head>
`.trim()
);
}