From 4cd962588834254351544c455d4348cb909a05e0 Mon Sep 17 00:00:00 2001
From: Hung Viet Nguyen <nguyenviethunghl00@gmail.com>
Date: Wed, 20 Jul 2022 01:42:25 +0700
Subject: [PATCH 1/4] chore: Add reproduce for #9174

---
 playground/assets/index.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/playground/assets/index.html b/playground/assets/index.html
index a741379e82013e..f4eb70074f32c9 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -266,6 +266,14 @@ <h3>base64</h3>
   inline style
 </p>
 <p class="style-base64-assets">use style class</p>
+<h3>from public folder</h3>
+<style>
+  .style-public-assets {
+    background: url('/icon.png');
+  }
+</style>
+<p style="background: url(/icon.png)">inline style</p>
+<p class="style-public-assets">use style class</p>
 
 <h3 class="import-css">@import</h3>
 <style class="style-import">

From 2c3d85aa7ace51ab88a55542233753f12bd72f54 Mon Sep 17 00:00:00 2001
From: Hung Viet Nguyen <nguyenviethunghl00@gmail.com>
Date: Wed, 20 Jul 2022 16:16:27 +0700
Subject: [PATCH 2/4] fix: Replace __VITE_PUBLIC_ASSET__ by files in public
 folder

---
 packages/vite/src/node/plugins/asset.ts    |  7 +++++++
 packages/vite/src/node/plugins/html.ts     | 18 ++++++++++++++++--
 playground/assets/__tests__/assets.spec.ts |  8 ++++++++
 playground/assets/index.html               |  4 +++-
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 0403009d4b69c4..13b2963e77e841 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -239,6 +239,13 @@ export function getAssetFilename(
   return assetHashToFilenameMap.get(config)?.get(hash)
 }
 
+export function getPublicAssetFilename(
+  hash: string,
+  config: ResolvedConfig
+): string | undefined {
+  return publicAssetUrlCache.get(config)?.get(hash)
+}
+
 export function resolveAssetFileNames(
   config: ResolvedConfig
 ): string | ((chunkInfo: PreRenderedAsset) => string) {
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 5287e6e5208ab5..d9e57e44086497 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -34,6 +34,8 @@ import {
   assetUrlRE,
   checkPublicFile,
   getAssetFilename,
+  getPublicAssetFilename,
+  publicAssetUrlRE,
   urlToBuiltUrl
 } from './asset'
 import { isCSSRequest } from './css'
@@ -606,13 +608,16 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
       for (const [id, html] of processedHtml) {
         const relativeUrlPath = path.posix.relative(config.root, id)
         const assetsBase = getBaseInHTML(relativeUrlPath, config)
-        const toOutputAssetFilePath = (filename: string) => {
+        const toOutputAssetFilePath = (
+          filename: string,
+          type: 'asset' | 'public' = 'asset'
+        ) => {
           if (isExternalUrl(filename)) {
             return filename
           } else {
             return toOutputFilePathInHtml(
               filename,
-              'asset',
+              type,
               relativeUrlPath,
               'html',
               config,
@@ -709,6 +714,15 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           )
         })
 
+        result = result.replace(publicAssetUrlRE, (_, fileHash) => {
+          return normalizePath(
+            toOutputAssetFilePath(
+              getPublicAssetFilename(fileHash, config)!,
+              'public'
+            )
+          )
+        })
+
         if (chunk && canInlineEntry) {
           // all imports from entry have been inlined to html, prevent rollup from outputting it
           delete bundle[chunk.fileName]
diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index c815714469b63b..9134a76ab0a357 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -364,3 +364,11 @@ test('relative path in html asset', async () => {
   expect(await page.textContent('.relative-js')).toMatch('hello')
   expect(await getColor('.relative-css')).toMatch('red')
 })
+
+test('url to public folder', async () => {
+  expect(await getBg('.style-public-assets')).toContain(iconMatch)
+  // TODO: To investigate why `await getBg('.inline-style-public') === "url("http://localhost:5173/icon.png")"`
+  // It supposes to be `url("http://localhost:5173/foo/icon.png")`
+  // (I built the playground to verify)
+  expect(await getBg('.inline-style-public')).toContain(iconMatch)
+})
diff --git a/playground/assets/index.html b/playground/assets/index.html
index f4eb70074f32c9..f0f5d9f0cd39c3 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -272,7 +272,9 @@ <h3>from public folder</h3>
     background: url('/icon.png');
   }
 </style>
-<p style="background: url(/icon.png)">inline style</p>
+<p class="inline-style-public" style="background: url(/icon.png)">
+  inline style
+</p>
 <p class="style-public-assets">use style class</p>
 
 <h3 class="import-css">@import</h3>

From d1bb5e99099bbf5f82ebd11bd8efdef0c41602b5 Mon Sep 17 00:00:00 2001
From: Hung Viet Nguyen <nguyenviethunghl00@gmail.com>
Date: Wed, 20 Jul 2022 22:06:10 +0700
Subject: [PATCH 3/4] chore: Skip a failed test for missing `base` url in `url`
 as inline style in DEV mode

---
 playground/assets/__tests__/assets.spec.ts | 5 ++++-
 playground/assets/index.html               | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index 9134a76ab0a357..3e5caf56205664 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -365,8 +365,11 @@ test('relative path in html asset', async () => {
   expect(await getColor('.relative-css')).toMatch('red')
 })
 
-test('url to public folder', async () => {
+test('url() contains file in publicDir, in <style> tag', async () => {
   expect(await getBg('.style-public-assets')).toContain(iconMatch)
+})
+
+test.skip('url() contains file in publicDir, as inline style', async () => {
   // TODO: To investigate why `await getBg('.inline-style-public') === "url("http://localhost:5173/icon.png")"`
   // It supposes to be `url("http://localhost:5173/foo/icon.png")`
   // (I built the playground to verify)
diff --git a/playground/assets/index.html b/playground/assets/index.html
index f0f5d9f0cd39c3..ae7695c08d9e3b 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -266,7 +266,7 @@ <h3>base64</h3>
   inline style
 </p>
 <p class="style-base64-assets">use style class</p>
-<h3>from public folder</h3>
+<h3>from publicDir</h3>
 <style>
   .style-public-assets {
     background: url('/icon.png');

From edb7ab2dd42bb722c26f74c29c237176564f1a94 Mon Sep 17 00:00:00 2001
From: Hung Viet Nguyen <nguyenviethunghl00@gmail.com>
Date: Fri, 22 Jul 2022 16:46:55 +0700
Subject: [PATCH 4/4] chore: extract `toOutputAssetFilePath` to
 `toOutputFilePath`

---
 packages/vite/src/node/plugins/html.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index d9e57e44086497..6dbb5717be66a6 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -608,9 +608,9 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
       for (const [id, html] of processedHtml) {
         const relativeUrlPath = path.posix.relative(config.root, id)
         const assetsBase = getBaseInHTML(relativeUrlPath, config)
-        const toOutputAssetFilePath = (
+        const toOutputFilePath = (
           filename: string,
-          type: 'asset' | 'public' = 'asset'
+          type: 'asset' | 'public'
         ) => {
           if (isExternalUrl(filename)) {
             return filename
@@ -626,6 +626,12 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           }
         }
 
+        const toOutputAssetFilePath = (filename: string) =>
+          toOutputFilePath(filename, 'asset')
+
+        const toOutputPublicAssetFilePath = (filename: string) =>
+          toOutputFilePath(filename, 'public')
+
         const isAsync = isAsyncScriptMap.get(config)!.get(id)!
 
         let result = html
@@ -716,9 +722,8 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
         result = result.replace(publicAssetUrlRE, (_, fileHash) => {
           return normalizePath(
-            toOutputAssetFilePath(
-              getPublicAssetFilename(fileHash, config)!,
-              'public'
+            toOutputPublicAssetFilePath(
+              getPublicAssetFilename(fileHash, config)!
             )
           )
         })