From acf3024779308b05626d254189a786c74363fb9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Mon, 13 Jun 2022 22:58:50 +0900
Subject: [PATCH] fix: mime missing extensions (#8568)

---
 packages/vite/src/node/constants.ts        |  5 ++++-
 packages/vite/src/node/plugins/asset.ts    | 20 ++++++++++++++++----
 playground/assets/__tests__/assets.spec.ts |  6 ++++++
 playground/assets/index.html               |  6 ++++++
 playground/assets/nested/foo.unknown       |  1 +
 playground/assets/vite.config.js           |  1 +
 6 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 playground/assets/nested/foo.unknown

diff --git a/packages/vite/src/node/constants.ts b/packages/vite/src/node/constants.ts
index 09b8c314149b03..acd067908a598c 100644
--- a/packages/vite/src/node/constants.ts
+++ b/packages/vite/src/node/constants.ts
@@ -62,7 +62,10 @@ export const CLIENT_DIR = path.dirname(CLIENT_ENTRY)
 
 // ** READ THIS ** before editing `KNOWN_ASSET_TYPES`.
 //   If you add an asset to `KNOWN_ASSET_TYPES`, make sure to also add it
-//   to the TypeScript declaration file `packages/vite/client.d.ts`.
+//   to the TypeScript declaration file `packages/vite/client.d.ts` and
+//   add a mime type to the `registerCustomMime` in
+//   `packages/vite/src/node/plugin/assets.ts` if mime type cannot be
+//   looked up by mrmime.
 export const KNOWN_ASSET_TYPES = [
   // images
   'png',
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 4c1bcfea0fd50b..9e99629c8144e9 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -23,6 +23,18 @@ const assetHashToFilenameMap = new WeakMap<
 // save hashes of the files that has been emitted in build watch
 const emittedHashMap = new WeakMap<ResolvedConfig, Set<string>>()
 
+// add own dictionary entry by directly assigning mrmime
+export function registerCustomMime(): void {
+  // https://github.com/lukeed/mrmime/issues/3
+  mrmime.mimes['ico'] = 'image/x-icon'
+  // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#flac
+  mrmime.mimes['flac'] = 'audio/flac'
+  // mrmime and mime-db is not released yet: https://github.com/jshttp/mime-db/commit/c9242a9b7d4bb25d7a0c9244adec74aeef08d8a1
+  mrmime.mimes['aac'] = 'audio/aac'
+  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+  mrmime.mimes['eot'] = 'application/vnd.ms-fontobject'
+}
+
 /**
  * Also supports loading plain strings with import text from './foo.txt?raw'
  */
@@ -31,9 +43,8 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
   assetHashToFilenameMap.set(config, new Map())
   const relativeBase = isRelativeBase(config.base)
 
-  // add own dictionary entry by directly assigning mrmine
-  // https://github.com/lukeed/mrmime/issues/3
-  mrmime.mimes['ico'] = 'image/x-icon'
+  registerCustomMime()
+
   return {
     name: 'vite:asset',
 
@@ -338,8 +349,9 @@ async function fileToBuiltUrl(
     (!file.endsWith('.svg') &&
       content.length < Number(config.build.assetsInlineLimit))
   ) {
+    const mimeType = mrmime.lookup(file) ?? 'application/octet-stream'
     // base64 inlined as a string
-    url = `data:${mrmime.lookup(file)};base64,${content.toString('base64')}`
+    url = `data:${mimeType};base64,${content.toString('base64')}`
   } else {
     // emit as asset
     // rollup supports `import.meta.ROLLUP_FILE_URL_*`, but it generates code
diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index 20040c173c7f87..fda5e4e4c83ef1 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -218,6 +218,12 @@ describe('svg fragments', () => {
   })
 })
 
+test('Unknown extension assets import', async () => {
+  expect(await page.textContent('.unknown-ext')).toMatch(
+    isBuild ? 'data:application/octet-stream;' : '/nested/foo.unknown'
+  )
+})
+
 test('?raw import', async () => {
   expect(await page.textContent('.raw')).toMatch('SVG')
 })
diff --git a/playground/assets/index.html b/playground/assets/index.html
index 418cc06f05bcd1..a741379e82013e 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -166,6 +166,9 @@ <h2>SVG Fragments via JS Import</h2>
   <img class="svg-frag-import" alt="" />
 </div>
 
+<h2>Unknown extension assets import</h2>
+<code class="unknown-ext"></code>
+
 <h2>?raw import</h2>
 <code class="raw"></code>
 
@@ -318,6 +321,9 @@ <h3>style in svg</h3>
   text('.svg-frag-import-path', svgFrag)
   document.querySelector('.svg-frag-import').src = svgFrag + '#icon-heart-view'
 
+  import unknownExtUrl from './nested/foo.unknown'
+  text('.unknown-ext', unknownExtUrl)
+
   import rawSvg from './nested/fragment.svg?raw'
   text('.raw', rawSvg)
 
diff --git a/playground/assets/nested/foo.unknown b/playground/assets/nested/foo.unknown
new file mode 100644
index 00000000000000..e24f83b664c55c
--- /dev/null
+++ b/playground/assets/nested/foo.unknown
@@ -0,0 +1 @@
+custom file
diff --git a/playground/assets/vite.config.js b/playground/assets/vite.config.js
index e44ddda7995185..c9d821ae3d73ee 100644
--- a/playground/assets/vite.config.js
+++ b/playground/assets/vite.config.js
@@ -11,6 +11,7 @@ module.exports = {
       '@': path.resolve(__dirname, 'nested')
     }
   },
+  assetsInclude: ['**/*.unknown'],
   build: {
     outDir: 'dist/foo',
     assetsInlineLimit: 8192, // 8kb