Skip to content

Commit

Permalink
Merge pull request #27110 from storybookjs/valentin/fix-does-not-exis…
Browse files Browse the repository at this point in the history 
…t-at-build-time

Vite: Externalize sb-common-assets font in manager and all builders to remove asset warning
  • Loading branch information
@valentinpalkovic
valentinpalkovic authored May 22, 2024
2 parents fb8b18f + 5e67491 commit 59bf7a2
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 82 deletions.
48 changes: 33 additions & 15 deletions code/builders/builder-manager/templates/template.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,39 @@
<% } else if (favicon.endsWith('.ico')) { %>
<link rel="icon" type="image/x-icon" href="./<%= favicon %>" />
<% } %>
<link
rel="prefetch"
href="./sb-common-assets/nunito-sans-regular.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="prefetch"
href="./sb-common-assets/nunito-sans-bold.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link rel="stylesheet" href="./sb-common-assets/fonts.css" />
<style>
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
}
</style>

<link href="./sb-manager/runtime.js" rel="modulepreload" />

Expand Down
62 changes: 33 additions & 29 deletions code/builders/builder-vite/input/iframe.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,39 @@
<title>Storybook</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link
rel="prefetch"
href="./sb-common-assets/nunito-sans-regular.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="prefetch"
href="./sb-common-assets/nunito-sans-italic.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="prefetch"
href="./sb-common-assets/nunito-sans-bold.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="prefetch"
href="./sb-common-assets/nunito-sans-bold-italic.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link rel="stylesheet" href="./sb-common-assets/fonts.css" />
<style>
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
}

@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
}

@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
}

@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
}
</style>

<script>
window.CONFIG_TYPE = '[CONFIG_TYPE HERE]';
Expand Down
7 changes: 5 additions & 2 deletions code/builders/builder-vite/src/build.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,11 @@ export async function build(options: Options) {
outDir: options.outputDir,
emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there!
rollupOptions: {
// Do not try to bundle the storybook runtime, it is copied into the output dir after the build.
external: ['./sb-preview/runtime.js'],
external: [
// Do not try to bundle the Storybook runtime, it is copied into the output dir after the build.
'./sb-preview/runtime.js',
/\.\/sb-common-assets\/.*\.woff2/,
],
},
...(options.test
? {
Expand Down
38 changes: 33 additions & 5 deletions code/builders/builder-webpack5/templates/preview.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,39 @@

<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="prefetch" href="./sb-common-assets/nunito-sans-regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="prefetch" href="./sb-common-assets/nunito-sans-italic.woff2" as="font" type="font/woff2" crossorigin />
<link rel="prefetch" href="./sb-common-assets/nunito-sans-bold.woff2" as="font" type="font/woff2" crossorigin />
<link rel="prefetch" href="./sb-common-assets/nunito-sans-bold-italic.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="./sb-common-assets/fonts.css" />
<style>
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
}
</style>

<% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
htmlWebpackPlugin.files.css.forEach(file => { %>
Expand Down
31 changes: 0 additions & 31 deletions code/ui/manager/static/fonts.css
View file

This file was deleted.

0 comments on commit 59bf7a2

Please sign in to comment.