Skip to content

Commit

Permalink
Storybook: Prevent Vite from inlining SVGs (#1136)
Browse files Browse the repository at this point in the history
## Summary:

Mark noticed that the new @phosphor icons were not showing up in Storybook on Github Pages (`khan.github.com/pereseus`). 

I tracked it down to a feature introduced in Vite 5 (vitejs/vite#15534), but it seems like it has bugs ([#15378](vitejs/vite#15378) and [#15444](vitejs/vite#15444)). 

I don't see how we could "quote" the URL as it's handed of to Wonder Blocks which seems to be handling the import correctly. 

So instead we'll just force Vite to never inline SVGs using Vite's `assetsInlineLimit` (https://vitejs.dev/config/build-options#build-assetsinlinelimit) option. 

Issue: LEMS-1887

## Test plan:

I haven't tested on GH Pages yet, but I did the following and verified that there are now svg files in the build output folder:

```sh
yarn build-storybook
ls storybook-static/assets
```

Author: jeremywiebe

Reviewers: benchristel, jeremywiebe, mark-fitzgerald

Required Reviewers:

Approved By: benchristel

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Extract i18n strings (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1136
  • Loading branch information
jeremywiebe authored Apr 1, 2024
1 parent 7ecc1dc commit 7a6cb07
Showing 1 changed file with 11 additions and 0 deletions.
11 changes: 11 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,17 @@ const config: StorybookConfig = {
viteFinal: async (config, {configType}) => {
return mergeConfig(config, {
...viteConfig,
build: {
// Vite 5 has a bug with how it builds `url(data: )` urls when
// it inlines SVGs. Given this is mostly used for static
// storybook builds, we just tell Vite to never inline assets.
// here.
// Feature introduced here: https://github.com/vitejs/vite/pull/14643
//
assetsInlineLimit: (file) => {
return !file.endsWith(".svg");
},
},
// Fix from: https://github.com/storybookjs/storybook/issues/25256#issuecomment-1866441206
assetsInclude: ["/sb-preview/runtime.js"],
plugins:
Expand Down

0 comments on commit 7a6cb07

Please sign in to comment.