From cb42862a1a6f58b084136592c0ec0e3023ecf9fa Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 8 Apr 2022 00:16:15 +0200
Subject: [PATCH 01/33] feat: relative base

---
 packages/playground/assets/package.json       |  5 +-
 .../playground/assets/vite.config-portable.js | 14 +++++
 packages/playground/css/vite.config.js        |  1 +
 packages/playground/html/vite.config.js       |  1 +
 packages/playground/legacy/vite.config.js     |  1 +
 .../preload/__tests__/preload.spec.ts         |  4 +-
 packages/plugin-legacy/index.js               | 17 +++---
 packages/vite/src/node/build.ts               | 29 ++++++++-
 packages/vite/src/node/plugins/asset.ts       | 31 +++++++---
 .../src/node/plugins/assetImportMetaUrl.ts    |  4 +-
 packages/vite/src/node/plugins/css.ts         | 27 ++++----
 packages/vite/src/node/plugins/html.ts        | 61 +++++++++++++------
 .../src/node/plugins/importAnalysisBuild.ts   | 32 +++++++---
 packages/vite/src/node/plugins/wasm.ts        |  2 +-
 packages/vite/src/node/plugins/worker.ts      | 10 +--
 .../src/node/plugins/workerImportMetaUrl.ts   |  2 +-
 .../src/node/server/middlewares/indexHtml.ts  |  4 +-
 scripts/jestPerTestSetup.ts                   | 12 ++--
 18 files changed, 181 insertions(+), 76 deletions(-)
 create mode 100644 packages/playground/assets/vite.config-portable.js

diff --git a/packages/playground/assets/package.json b/packages/playground/assets/package.json
index 33f64cef771525..8fc79569f55b41 100644
--- a/packages/playground/assets/package.json
+++ b/packages/playground/assets/package.json
@@ -6,6 +6,9 @@
     "dev": "vite",
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "dev:portable": "vite --config ./vite.config-portable.js dev",
+    "build:portable": "vite --config ./vite.config-portable.js build",
+    "preview:portable": "vite --config ./vite.config-portable.js preview"
   }
 }
diff --git a/packages/playground/assets/vite.config-portable.js b/packages/playground/assets/vite.config-portable.js
new file mode 100644
index 00000000000000..dbfa9f6dee5ee0
--- /dev/null
+++ b/packages/playground/assets/vite.config-portable.js
@@ -0,0 +1,14 @@
+/**
+ * @type {import('vite').UserConfig}
+ */
+
+const baseConfig = require('./vite.config.js')
+module.exports = {
+  ...baseConfig,
+  base: './', // relative base to make dist portable
+  build: {
+    ...baseConfig.build,
+    outDir: 'dist',
+    watch: false
+  }
+}
diff --git a/packages/playground/css/vite.config.js b/packages/playground/css/vite.config.js
index 639a1302debb88..0c2432ec40cf38 100644
--- a/packages/playground/css/vite.config.js
+++ b/packages/playground/css/vite.config.js
@@ -4,6 +4,7 @@ const path = require('path')
  * @type {import('vite').UserConfig}
  */
 module.exports = {
+  base: './',
   build: {
     cssTarget: 'chrome61'
   },
diff --git a/packages/playground/html/vite.config.js b/packages/playground/html/vite.config.js
index 1703e02cc05366..8e70727eab6f48 100644
--- a/packages/playground/html/vite.config.js
+++ b/packages/playground/html/vite.config.js
@@ -4,6 +4,7 @@ const { resolve } = require('path')
  * @type {import('vite').UserConfig}
  */
 module.exports = {
+  base: './',
   build: {
     rollupOptions: {
       input: {
diff --git a/packages/playground/legacy/vite.config.js b/packages/playground/legacy/vite.config.js
index 90d3be7f7c56a0..e1d68245604346 100644
--- a/packages/playground/legacy/vite.config.js
+++ b/packages/playground/legacy/vite.config.js
@@ -3,6 +3,7 @@ const path = require('path')
 const legacy = require('@vitejs/plugin-legacy').default
 
 module.exports = {
+  base: './',
   plugins: [
     legacy({
       targets: 'IE 11'
diff --git a/packages/playground/preload/__tests__/preload.spec.ts b/packages/playground/preload/__tests__/preload.spec.ts
index 27a64930487797..8e5fedb2ee7fff 100644
--- a/packages/playground/preload/__tests__/preload.spec.ts
+++ b/packages/playground/preload/__tests__/preload.spec.ts
@@ -16,10 +16,10 @@ if (isBuild) {
     await page.goto(viteTestUrl + '/#/hello')
     const html = await page.content()
     expect(html).toMatch(
-      /link rel="modulepreload".*?href="\/assets\/Hello\.\w{8}\.js"/
+      /link rel="modulepreload".*?href=".*?\/assets\/Hello\.\w{8}\.js"/
     )
     expect(html).toMatch(
-      /link rel="stylesheet".*?href="\/assets\/Hello\.\w{8}\.css"/
+      /link rel="stylesheet".*?href=".*?\/assets\/Hello\.\w{8}\.css"/
     )
   })
 }
diff --git a/packages/plugin-legacy/index.js b/packages/plugin-legacy/index.js
index 41f7157ebfc533..85098cd7cb89d6 100644
--- a/packages/plugin-legacy/index.js
+++ b/packages/plugin-legacy/index.js
@@ -19,10 +19,11 @@ const legacyPolyfillId = 'vite-legacy-polyfill'
 const legacyEntryId = 'vite-legacy-entry'
 const systemJSInlineCode = `System.import(document.getElementById('${legacyEntryId}').getAttribute('data-src'))`
 
-const detectDynamicImportVarName = '__vite_is_dynamic_import_support'
-const detectDynamicImportVarInitCode = `var ${detectDynamicImportVarName}=false;`
-const detectDynamicImportCode = `try{import("_").catch(()=>1);}catch(e){}window.${detectDynamicImportVarName}=true;`
-const dynamicFallbackInlineCode = `!function(){if(window.${detectDynamicImportVarName})return;console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("${legacyPolyfillId}"),n=document.createElement("script");n.src=e.src,n.onload=function(){${systemJSInlineCode}},document.body.appendChild(n)}();`
+const detectModernBrowserVarName = '__vite_is_modern_browser'
+const detectModernBrowserVarInitCode = `var ${detectModernBrowserVarName}=false;`
+const detectModernBrowserCode = `try{import(new URL(import.meta.url).href).catch(()=>1);}catch(e){}window.${detectModernBrowserVarName}=true;`
+
+const dynamicFallbackInlineCode = `!function(){if(window.${detectModernBrowserVarName})return;console.warn("vite: loading legacy build because dynamic import or import.meta.url is unsupported, syntax error above should be ignored");var e=document.getElementById("${legacyPolyfillId}"),n=document.createElement("script");n.src=e.src,n.onload=function(){${systemJSInlineCode}},document.body.appendChild(n)}();`
 
 const forceDynamicImportUsage = `export function __vite_legacy_guard(){import('data:text/javascript,')};`
 
@@ -440,13 +441,13 @@ function viteLegacyPlugin(options = {}) {
         tags.push({
           tag: 'script',
           attrs: { type: 'module' },
-          children: detectDynamicImportVarInitCode,
+          children: detectModernBrowserVarInitCode,
           injectTo: 'head'
         })
         tags.push({
           tag: 'script',
           attrs: { type: 'module' },
-          children: detectDynamicImportCode,
+          children: detectModernBrowserCode,
           injectTo: 'head'
         })
         tags.push({
@@ -714,7 +715,7 @@ viteLegacyPlugin.default = viteLegacyPlugin
 viteLegacyPlugin.cspHashes = [
   createHash('sha256').update(safari10NoModuleFix).digest('base64'),
   createHash('sha256').update(systemJSInlineCode).digest('base64'),
-  createHash('sha256').update(detectDynamicImportVarInitCode).digest('base64'),
-  createHash('sha256').update(detectDynamicImportCode).digest('base64'),
+  createHash('sha256').update(detectModernBrowserVarInitCode).digest('base64'),
+  createHash('sha256').update(detectModernBrowserCode).digest('base64'),
   createHash('sha256').update(dynamicFallbackInlineCode).digest('base64')
 ]
diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index 3541cc377dc411..d9ed080ccc5dbb 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -273,11 +273,11 @@ export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions {
     // Support browserslist
     // "defaults and supports es6-module and supports es6-module-dynamic-import",
     resolved.target = [
-      'es2019',
+      'es2020', // support import.meta.url
       'edge88',
       'firefox78',
       'chrome87',
-      'safari13.1'
+      'safari13' // transpile nullish coallesing
     ]
   } else if (resolved.target === 'esnext' && resolved.minify === 'terser') {
     // esnext + terser: limit to es2019 so it can be minified by terser
@@ -778,3 +778,28 @@ function injectSsrFlag<T extends Record<string, any>>(
 ): T & { ssr: boolean } {
   return { ...(options ?? {}), ssr: true } as T & { ssr: boolean }
 }
+
+export function isRelativeBase(base: string): boolean {
+  return base === '' || base.startsWith('.')
+}
+
+export function assetFilenameWithBase(filename: string, base: string): string {
+  if (isRelativeBase(base)) {
+    // relative base - asset file will be in the same dir
+    return `./${path.posix.basename(filename)}`
+  } else {
+    return base + filename
+  }
+}
+
+export function publicURLfromAsset(
+  url: string,
+  config: ResolvedConfig
+): string {
+  if (isRelativeBase(config.base)) {
+    // Assume flat assets structure
+    return path.posix.relative(config.build.assetsDir, '') + url
+  } else {
+    return config.base + url.slice(1)
+  }
+}
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 633438cf3cb0d4..3321a1c9985348 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -4,12 +4,16 @@ import fs, { promises as fsp } from 'fs'
 import * as mrmime from 'mrmime'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
-import { cleanUrl } from '../utils'
+import { cleanUrl, normalizePath } from '../utils'
+import {
+  assetFilenameWithBase,
+  isRelativeBase,
+  publicURLfromAsset
+} from '../build'
 import { FS_PREFIX } from '../constants'
 import type { OutputOptions, PluginContext } from 'rollup'
 import MagicString from 'magic-string'
 import { createHash } from 'crypto'
-import { normalizePath } from '../utils'
 
 export const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g
 
@@ -77,7 +81,8 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
 
       id = id.replace(urlRE, '$1').replace(/[\?&]$/, '')
       const url = await fileToUrl(id, config, this)
-      return `export default ${JSON.stringify(url)}`
+      // Return a template string so we can use interpolation when replacing __VITE_ASSET__
+      return `export default \`${url}\``
     },
 
     renderChunk(code, chunk) {
@@ -85,12 +90,12 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       let s: MagicString | undefined
 
       // Urls added with JS using e.g.
-      // imgElement.src = "my/file.png" are using quotes
+      // imgElement.src = `__VITE_ASSET___5aa0ddc0__` are using quotes
 
       // Urls added in CSS that is imported in JS end up like
-      // var inlined = ".inlined{color:green;background:url(__VITE_ASSET__5aa0ddc0__)}\n";
+      // var inlined = `.inlined{color:green;background:url(__VITE_ASSET__5aa0ddc0__)}\n`;
 
-      // In both cases, the wrapping should already be fine
+      // In both cases, the wrapping allows us to use interpolation
 
       while ((match = assetUrlRE.exec(code))) {
         s = s || (s = new MagicString(code))
@@ -99,8 +104,14 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
         // fallback to this.getFileName for that.
         const file = getAssetFilename(hash, config) || this.getFileName(hash)
         chunk.viteMetadata.importedAssets.add(cleanUrl(file))
-        const outputFilepath = config.base + file + postfix
-        s.overwrite(match.index, match.index + full.length, outputFilepath, {
+        const outputFilepath = assetFilenameWithBase(
+          file + postfix,
+          config.base
+        )
+        const replacement = isRelativeBase(config.base)
+          ? `\${new URL(${JSON.stringify(outputFilepath)},import.meta.url)}`
+          : outputFilepath
+        s.overwrite(match.index, match.index + full.length, replacement, {
           contentOnly: true
         })
       }
@@ -271,7 +282,7 @@ async function fileToBuiltUrl(
   skipPublicCheck = false
 ): Promise<string> {
   if (!skipPublicCheck && checkPublicFile(id, config)) {
-    return config.base + id.slice(1)
+    return publicURLfromAsset(id, config)
   }
 
   const cache = assetCache.get(config)!
@@ -348,7 +359,7 @@ export async function urlToBuiltUrl(
   pluginContext: PluginContext
 ): Promise<string> {
   if (checkPublicFile(url, config)) {
-    return config.base + url.slice(1)
+    return publicURLfromAsset(url, config)
   }
   const file = url.startsWith('/')
     ? path.join(config.root, url)
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index a3f8e441b0f933..3bc4f6a47a56d1 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -9,6 +9,7 @@ import {
   stringsRE,
   blankReplacer
 } from '../utils'
+import { preloadHelperId } from './importAnalysisBuild'
 
 /**
  * Convert `new URL('./foo.png', import.meta.url)` to its resolved built URL
@@ -26,6 +27,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
     async transform(code, id, options) {
       if (
         !options?.ssr &&
+        id !== preloadHelperId &&
         code.includes('new URL') &&
         code.includes(`import.meta.url`)
       ) {
@@ -82,7 +84,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           s.overwrite(
             index,
             index + exp.length,
-            `new URL(${JSON.stringify(builtUrl)}, self.location)`,
+            `new URL(\`${builtUrl}\`, self.location)`,
             { contentOnly: true }
           )
         }
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index dbe9e7d1dfa00f..2ee686234fbf79 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -48,6 +48,7 @@ import { transform, formatMessages } from 'esbuild'
 import { addToHTMLProxyTransformResult } from './html'
 import { injectSourcesContent, getCodeWithSourcemap } from '../server/sourcemap'
 import type { RawSourceMap } from '@ampproject/remapping'
+import { assetFilenameWithBase, publicURLfromAsset } from '../build'
 
 // const debug = createDebugger('vite:css')
 
@@ -180,7 +181,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
 
       const urlReplacer: CssUrlReplacer = async (url, importer) => {
         if (checkPublicFile(url, config)) {
-          return config.base + url.slice(1)
+          return publicURLfromAsset(url, config)
         }
         const resolved = await resolveUrl(url, importer)
         if (resolved) {
@@ -309,10 +310,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         } else {
           // server only
           if (options?.ssr) {
-            return modulesCode || `export default ${JSON.stringify(css)}`
+            return modulesCode || `export default \`${css}\``
           }
           if (inlined) {
-            return `export default ${JSON.stringify(css)}`
+            return `export default \`${css}\``
           }
 
           let cssContent = css
@@ -327,7 +328,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
               path.posix.join(config.base, CLIENT_PUBLIC_PATH)
             )}`,
             `const __vite__id = ${JSON.stringify(id)}`,
-            `const __vite__css = ${JSON.stringify(cssContent)}`,
+            `const __vite__css = \`${cssContent}\``,
             `__vite__updateStyle(__vite__id, __vite__css)`,
             // css modules exports change on edit so it can't self accept
             `${
@@ -361,11 +362,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       let code: string
       if (usedRE.test(id)) {
         if (inlined) {
-          code = `export default ${JSON.stringify(
-            await minifyCSS(css, config)
-          )}`
+          code = `export default \`${await minifyCSS(css, config)}\``
         } else {
-          code = modulesCode || `export default ${JSON.stringify(css)}`
+          code = modulesCode || `export default \`${css}\``
         }
       } else {
         code = `export default ''`
@@ -414,18 +413,14 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         }
       ) => {
         // replace asset url references with resolved url.
-        const isRelativeBase = config.base === '' || config.base.startsWith('.')
         css = css.replace(assetUrlRE, (_, fileHash, postfix = '') => {
           const filename = getAssetFilename(fileHash, config) + postfix
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
-          if (!isRelativeBase || inlined) {
-            // absolute base or relative base but inlined (injected as style tag into
-            // index.html) use the base as-is
+          if (inlined) {
+            // inlined (injected as style tag into index.html) use the base as-is
             return config.base + filename
-          } else {
-            // relative base + extracted CSS - asset file will be in the same dir
-            return `./${path.posix.basename(filename)}`
           }
+          return assetFilenameWithBase(filename, config.base)
         })
         // only external @imports should exist at this point - and they need to
         // be hoisted to the top of the CSS chunk per spec (#1845)
@@ -464,7 +459,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           const style = `__vite_style__`
           const injectCode =
             `var ${style} = document.createElement('style');` +
-            `${style}.innerHTML = ${JSON.stringify(chunkCSS)};` +
+            `${style}.innerHTML = \`${chunkCSS}\`;` +
             `document.head.appendChild(${style});`
           if (config.build.sourcemap) {
             const s = new MagicString(code)
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 25ad91582140c3..8186f66dcb5024 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -17,6 +17,7 @@ import {
   processSrcSet,
   slash
 } from '../utils'
+import { isRelativeBase } from '../build'
 import type { ResolvedConfig } from '../config'
 import MagicString from 'magic-string'
 import {
@@ -232,7 +233,10 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
     async transform(html, id) {
       if (id.endsWith('.html')) {
-        const publicPath = `/${slash(path.relative(config.root, id))}`
+        const relativeUrlPath = slash(path.relative(config.root, id))
+        const publicPath = `/${relativeUrlPath}`
+        const publicBase = getPublicBase(relativeUrlPath, config)
+
         // pre-transform
         html = await applyHtmlTransforms(html, preHooks, {
           path: publicPath,
@@ -267,7 +271,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               s.overwrite(
                 src!.value!.loc.start.offset,
                 src!.value!.loc.end.offset,
-                `"${config.base + url.slice(1)}"`,
+                `"${normalizePublicPath(url, publicBase)}"`,
                 { contentOnly: true }
               )
             }
@@ -339,7 +343,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
                   s.overwrite(
                     p.value.loc.start.offset,
                     p.value.loc.end.offset,
-                    `"${config.base + url.slice(1)}"`,
+                    `"${normalizePublicPath(url, publicBase)}"`,
                     { contentOnly: true }
                   )
                 }
@@ -448,7 +452,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               { contentOnly: true }
             )
           } else if (checkPublicFile(url, config)) {
-            s.overwrite(start, end, config.base + url.slice(1), {
+            s.overwrite(start, end, normalizePublicPath(url, publicBase), {
               contentOnly: true
             })
           }
@@ -490,6 +494,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
       const toScriptTag = (
         chunk: OutputChunk,
+        publicBase: string,
         isAsync: boolean
       ): HtmlTagDescriptor => ({
         tag: 'script',
@@ -497,20 +502,24 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           ...(isAsync ? { async: true } : {}),
           type: 'module',
           crossorigin: true,
-          src: toPublicPath(chunk.fileName, config)
+          src: toPublicPath(chunk.fileName, publicBase)
         }
       })
 
-      const toPreloadTag = (chunk: OutputChunk): HtmlTagDescriptor => ({
+      const toPreloadTag = (
+        chunk: OutputChunk,
+        publicBase: string
+      ): HtmlTagDescriptor => ({
         tag: 'link',
         attrs: {
           rel: 'modulepreload',
-          href: toPublicPath(chunk.fileName, config)
+          href: toPublicPath(chunk.fileName, publicBase)
         }
       })
 
       const getCssTagsForChunk = (
         chunk: OutputChunk,
+        publicBase: string,
         seen: Set<string> = new Set()
       ): HtmlTagDescriptor[] => {
         const tags: HtmlTagDescriptor[] = []
@@ -519,7 +528,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           chunk.imports.forEach((file) => {
             const importee = bundle[file]
             if (importee?.type === 'chunk') {
-              tags.push(...getCssTagsForChunk(importee, seen))
+              tags.push(...getCssTagsForChunk(importee, publicBase, seen))
             }
           })
         }
@@ -531,7 +540,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               tag: 'link',
               attrs: {
                 rel: 'stylesheet',
-                href: toPublicPath(file, config)
+                href: toPublicPath(file, publicBase)
               }
             })
           }
@@ -541,6 +550,9 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
       }
 
       for (const [id, html] of processedHtml) {
+        const relativeUrlPath = path.posix.relative(config.root, id)
+        const publicBase = getPublicBase(relativeUrlPath, config)
+
         const isAsync = isAsyncScriptMap.get(config)!.get(id)!
 
         let result = html
@@ -568,10 +580,13 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           // when inlined, discard entry chunk and inject <script> for everything in post-order
           const imports = getImportedChunks(chunk)
           const assetTags = canInlineEntry
-            ? imports.map((chunk) => toScriptTag(chunk, isAsync))
-            : [toScriptTag(chunk, isAsync), ...imports.map(toPreloadTag)]
+            ? imports.map((chunk) => toScriptTag(chunk, publicBase, isAsync))
+            : [
+                toScriptTag(chunk, publicBase, isAsync),
+                ...imports.map((i) => toPreloadTag(i, publicBase))
+              ]
 
-          assetTags.push(...getCssTagsForChunk(chunk))
+          assetTags.push(...getCssTagsForChunk(chunk, publicBase))
 
           result = injectToHead(result, assetTags)
         }
@@ -587,7 +602,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
                 tag: 'link',
                 attrs: {
                   rel: 'stylesheet',
-                  href: toPublicPath(cssChunk.fileName, config)
+                  href: toPublicPath(cssChunk.fileName, publicBase)
                 }
               }
             ])
@@ -611,7 +626,6 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         if (s) {
           result = s.toString()
         }
-        const relativeUrlPath = path.posix.relative(config.root, id)
         result = await applyHtmlTransforms(result, postHooks, {
           path: '/' + relativeUrlPath,
           filename: id,
@@ -620,7 +634,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         })
         // resolve asset url references
         result = result.replace(assetUrlRE, (_, fileHash, postfix = '') => {
-          return config.base + getAssetFilename(fileHash, config) + postfix
+          return publicBase + getAssetFilename(fileHash, config) + postfix
         })
 
         if (chunk && canInlineEntry) {
@@ -774,8 +788,21 @@ function isEntirelyImport(code: string) {
   return !code.replace(importRE, '').replace(commentRE, '').trim().length
 }
 
-function toPublicPath(filename: string, config: ResolvedConfig) {
-  return isExternalUrl(filename) ? filename : config.base + filename
+function getPublicBase(urlRelativePath: string, config: ResolvedConfig) {
+  return isRelativeBase(config.base)
+    ? path.posix.join(
+        path.posix.relative(urlRelativePath, '').slice(0, -2),
+        './'
+      )
+    : config.base
+}
+
+function toPublicPath(filename: string, publicBase: string) {
+  return isExternalUrl(filename) ? filename : publicBase + filename
+}
+
+function normalizePublicPath(publicPath: string, publicBase: string) {
+  return publicBase + publicPath.slice(1)
 }
 
 const headInjectRE = /([ \t]*)<\/head>/i
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 91ce663b9f8111..896de968dd504d 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -8,6 +8,7 @@ import type { OutputChunk } from 'rollup'
 import { isCSSRequest, removedPureCssFilesCache } from './css'
 import { transformImportGlob } from '../importGlob'
 import { bareImportRE } from '../utils'
+import { isRelativeBase } from '../build'
 
 /**
  * A flag for injected helpers. This flag will be set to `false` if the output
@@ -19,7 +20,7 @@ export const preloadMethod = `__vitePreload`
 export const preloadMarker = `__VITE_PRELOAD__`
 export const preloadBaseMarker = `__VITE_PRELOAD_BASE__`
 
-const preloadHelperId = 'vite/preload-helper'
+export const preloadHelperId = '\0vite/preload-helper'
 const preloadMarkerRE = new RegExp(`"${preloadMarker}"`, 'g')
 
 /**
@@ -46,7 +47,7 @@ function preload(baseModule: () => Promise<{}>, deps?: string[]) {
   return Promise.all(
     deps.map((dep) => {
       // @ts-ignore
-      dep = `${base}${dep}`
+      dep = `${assetsURL}${dep}`
       // @ts-ignore
       if (dep in seen) return
       // @ts-ignore
@@ -87,11 +88,21 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
   const ssr = !!config.build.ssr
   const insertPreload = !(ssr || !!config.build.lib)
   const isWorker = config.isWorker
+  const rollupOptionsOutput = config.build?.rollupOptions?.output
+  const hasCustomAssetFileNames =
+    rollupOptionsOutput &&
+    !Array.isArray(rollupOptionsOutput) &&
+    !!rollupOptionsOutput.assetFileNames
 
   const scriptRel = config.build.polyfillModulePreload
     ? `'modulepreload'`
     : `(${detectScriptRel.toString()})()`
-  const preloadCode = `const scriptRel = ${scriptRel};const seen = {};const base = '${preloadBaseMarker}';export const ${preloadMethod} = ${preload.toString()}`
+  const assetsURL = hasCustomAssetFileNames
+    ? config.base
+    : isRelativeBase(config.base)
+    ? `new URL('./',import.meta.url).pathname`
+    : JSON.stringify(path.posix.join(config.base, config.build.assetsDir, '/'))
+  const preloadCode = `const scriptRel = ${scriptRel};const assetsURL = ${assetsURL};const seen = {};export const ${preloadMethod} = ${preload.toString()}`
   const resolve = config.createResolver({
     preferRelative: true,
     tryIndex: false,
@@ -109,7 +120,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
 
     load(id) {
       if (id === preloadHelperId) {
-        return preloadCode.replace(preloadBaseMarker, config.base)
+        return preloadCode
       }
     },
 
@@ -334,12 +345,19 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                 s.overwrite(
                   markPos - 1,
                   markPos + preloadMarker.length + 1,
-                  // the dep list includes the main chunk, so only need to
-                  // preload when there are actual other deps.
+                  // the dep list includes the main chunk, so only need to reload when there are
+                  // actual other deps. Don't include the assets dir if the default asset file names
+                  // are used, the path will be reconstructed by the import preload helper
                   deps.size > 1 ||
                     // main chunk is removed
                     (hasRemovedPureCssChunk && deps.size > 0)
-                    ? `[${[...deps].map((d) => JSON.stringify(d)).join(',')}]`
+                    ? `[${[...deps]
+                        .map((d) =>
+                          JSON.stringify(
+                            hasCustomAssetFileNames ? d : path.basename(d)
+                          )
+                        )
+                        .join(',')}]`
                     : `[]`,
                   { contentOnly: true }
                 )
diff --git a/packages/vite/src/node/plugins/wasm.ts b/packages/vite/src/node/plugins/wasm.ts
index 1f64434a5b9781..bf73d459654ea6 100644
--- a/packages/vite/src/node/plugins/wasm.ts
+++ b/packages/vite/src/node/plugins/wasm.ts
@@ -65,7 +65,7 @@ export const wasmPlugin = (config: ResolvedConfig): Plugin => {
 
       return `
 import initWasm from "${wasmHelperId}"
-export default opts => initWasm(opts, ${JSON.stringify(url)})
+export default opts => initWasm(opts, \`${url}\`)
 `
     }
   }
diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 4113b7153f9b35..67889ecd3bb0df 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -174,7 +174,7 @@ export async function workerFileToUrl(
   let hash = workerMap.bundle.get(id)
   if (hash) {
     // rewrite truth id, no need to replace by asset plugin
-    return config.base + workerMap.emitted.get(hash)!
+    return config.base + workerMap.emitted.get(hash)! // TODO
   }
   const code = await bundleWorkerEntry(ctx, config, id, query)
   const basename = path.parse(cleanUrl(id)).name
@@ -270,9 +270,11 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
 
       return {
         code: `export default function WorkerWrapper() {
-          return new ${workerConstructor}(${JSON.stringify(
-          url
-        )}, ${JSON.stringify(workerOptions, null, 2)})
+          return new ${workerConstructor}(\`${url}\`, ${JSON.stringify(
+          workerOptions,
+          null,
+          2
+        )})
         }`,
         map: { mappings: '' } // Empty sourcemap to supress Rolup warning
       }
diff --git a/packages/vite/src/node/plugins/workerImportMetaUrl.ts b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
index c9a2903d9a4142..91660f275c4e36 100644
--- a/packages/vite/src/node/plugins/workerImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
@@ -168,7 +168,7 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
             url = injectQuery(url, WORKER_FILE_ID)
             url = injectQuery(url, `type=${workerType}`)
           }
-          s.overwrite(urlIndex, urlIndex + exp.length, JSON.stringify(url), {
+          s.overwrite(urlIndex, urlIndex + exp.length, `\`${url}\``, {
             contentOnly: true
           })
         }
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
index ca2538bd9507ed..6ee3f4a6d2788c 100644
--- a/packages/vite/src/node/server/middlewares/indexHtml.ts
+++ b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -62,7 +62,7 @@ const processNodeUrl = (
     }
   }
   if (startsWithSingleSlashRE.test(url)) {
-    // prefix with base
+    // prefix with base (dev only, base is never relative)
     s.overwrite(
       node.value!.loc.start.offset,
       node.value!.loc.end.offset,
@@ -118,7 +118,7 @@ const devHtmlHook: IndexHtmlTransformHook = async (
     // add HTML Proxy to Map
     addToHTMLProxyCache(config, url, inlineModuleIndex, { code, map })
 
-    // inline js module. convert to src="proxy"
+    // inline js module. convert to src="proxy" (dev only, base is never relative)
     const modulePath = `${
       config.base + htmlPath.slice(1)
     }?html-proxy&index=${inlineModuleIndex}.${ext}`
diff --git a/scripts/jestPerTestSetup.ts b/scripts/jestPerTestSetup.ts
index 150c02eed5b76c..42d95ede5edcfc 100644
--- a/scripts/jestPerTestSetup.ts
+++ b/scripts/jestPerTestSetup.ts
@@ -35,6 +35,7 @@ declare const global: {
 
   browserLogs: string[]
   serverLogs: string[]
+  resolvedConfig: ResolvedConfig
   viteTestUrl?: string
   watcher?: RollupWatcher
   beforeAllError: Error | null
@@ -130,6 +131,7 @@ beforeAll(async () => {
         server = await (
           await createServer(mergeConfig(options, config || {}))
         ).listen()
+        global.resolvedConfig = server.config
         // use resolved port/base from server
         const base = server.config.base === '/' ? '' : server.config.base
         const url =
@@ -138,16 +140,15 @@ beforeAll(async () => {
       } else {
         process.env.VITE_INLINE = 'inline-build'
         // determine build watch
-        let resolvedConfig: ResolvedConfig
         const resolvedPlugin: () => PluginOption = () => ({
           name: 'vite-plugin-watcher',
           configResolved(config) {
-            resolvedConfig = config
+            global.resolvedConfig = config
           }
         })
         options.plugins = [resolvedPlugin()]
         const rollupOutput = await build(mergeConfig(options, config || {}))
-        const isWatch = !!resolvedConfig!.build.watch
+        const isWatch = !!global.resolvedConfig.build.watch
         // in build watch,call startStaticServer after the build is complete
         if (isWatch) {
           global.watcher = rollupOutput as RollupWatcher
@@ -191,7 +192,10 @@ function startStaticServer(config?: InlineConfig): Promise<string> {
   }
 
   // fallback internal base to ''
-  const base = (config?.base ?? '/') === '/' ? '' : config?.base ?? ''
+  let base = config?.base
+  if (!base || base === '/' || base === './') {
+    base = ''
+  }
 
   // @ts-ignore
   if (config && config.__test__) {

From bdacc9fea591785a9a6b0d4bcaafbb1e764907f2 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 8 Apr 2022 00:32:15 +0200
Subject: [PATCH 02/33] fix: don't use template string in dev

---
 packages/vite/src/node/plugins/css.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 2ee686234fbf79..e79efd91898d8f 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -310,10 +310,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         } else {
           // server only
           if (options?.ssr) {
-            return modulesCode || `export default \`${css}\``
+            return modulesCode || `export default ${JSON.stringify(css)}`
           }
           if (inlined) {
-            return `export default \`${css}\``
+            return `export default ${JSON.stringify(css)}`
           }
 
           let cssContent = css
@@ -328,7 +328,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
               path.posix.join(config.base, CLIENT_PUBLIC_PATH)
             )}`,
             `const __vite__id = ${JSON.stringify(id)}`,
-            `const __vite__css = \`${cssContent}\``,
+            `const __vite__css = ${JSON.stringify(cssContent)}`,
             `__vite__updateStyle(__vite__id, __vite__css)`,
             // css modules exports change on edit so it can't self accept
             `${

From 7e4484a0cad896a7dee8d72cc78acfb6113b6654 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 8 Apr 2022 11:59:21 +0200
Subject: [PATCH 03/33] fix: windows

---
 packages/vite/src/node/plugins/workerImportMetaUrl.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/vite/src/node/plugins/workerImportMetaUrl.ts b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
index 91660f275c4e36..0a51f8e308bc01 100644
--- a/packages/vite/src/node/plugins/workerImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
@@ -12,7 +12,7 @@ import {
 } from '../utils'
 import path from 'path'
 import { workerFileToUrl } from './worker'
-import { parseRequest } from '../utils'
+import { parseRequest, normalizePath } from '../utils'
 import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
 import MagicString from 'magic-string'
 import type { ViteDevServer } from '..'
@@ -159,7 +159,9 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
             noCommentsCode,
             index + allExp.length
           )
-          const file = path.resolve(path.dirname(id), rawUrl.slice(1, -1))
+          const file = normalizePath(
+            path.resolve(path.dirname(id), rawUrl.slice(1, -1))
+          )
           let url: string
           if (isBuild) {
             url = await workerFileToUrl(this, config, file, query)

From 7744ca3e3619532f524344b1b441a263d3b64ef4 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 8 Apr 2022 13:46:59 +0200
Subject: [PATCH 04/33] chore: stringifyAsTemplateLiteral util

---
 packages/vite/src/node/plugins/asset.ts           |  4 ++--
 .../vite/src/node/plugins/assetImportMetaUrl.ts   |  5 +++--
 packages/vite/src/node/plugins/css.ts             | 12 ++++++++----
 packages/vite/src/node/plugins/wasm.ts            |  3 ++-
 packages/vite/src/node/plugins/worker.ts          | 15 +++++++++------
 .../vite/src/node/plugins/workerImportMetaUrl.ts  | 14 ++++++++++----
 packages/vite/src/node/utils.ts                   |  4 ++++
 7 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 3321a1c9985348..adbe5f3838f69a 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -4,7 +4,7 @@ import fs, { promises as fsp } from 'fs'
 import * as mrmime from 'mrmime'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
-import { cleanUrl, normalizePath } from '../utils'
+import { cleanUrl, normalizePath, stringifyAsTemplateLiteral } from '../utils'
 import {
   assetFilenameWithBase,
   isRelativeBase,
@@ -82,7 +82,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       id = id.replace(urlRE, '$1').replace(/[\?&]$/, '')
       const url = await fileToUrl(id, config, this)
       // Return a template string so we can use interpolation when replacing __VITE_ASSET__
-      return `export default \`${url}\``
+      return `export default ${stringifyAsTemplateLiteral(url)}`
     },
 
     renderChunk(code, chunk) {
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index 3bc4f6a47a56d1..e79e7ecbcb87c2 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -7,7 +7,8 @@ import {
   multilineCommentsRE,
   singlelineCommentsRE,
   stringsRE,
-  blankReplacer
+  blankReplacer,
+  stringifyAsTemplateLiteral
 } from '../utils'
 import { preloadHelperId } from './importAnalysisBuild'
 
@@ -84,7 +85,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           s.overwrite(
             index,
             index + exp.length,
-            `new URL(\`${builtUrl}\`, self.location)`,
+            `new URL(${stringifyAsTemplateLiteral(builtUrl)}, self.location)`,
             { contentOnly: true }
           )
         }
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index e79efd91898d8f..962f2aca0a1e3c 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -12,7 +12,8 @@ import {
   normalizePath,
   processSrcSet,
   parseRequest,
-  combineSourcemaps
+  combineSourcemaps,
+  stringifyAsTemplateLiteral
 } from '../utils'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
@@ -362,9 +363,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       let code: string
       if (usedRE.test(id)) {
         if (inlined) {
-          code = `export default \`${await minifyCSS(css, config)}\``
+          code = `export default ${stringifyAsTemplateLiteral(
+            await minifyCSS(css, config)
+          )}`
         } else {
-          code = modulesCode || `export default \`${css}\``
+          code =
+            modulesCode || `export default ${stringifyAsTemplateLiteral(css)}`
         }
       } else {
         code = `export default ''`
@@ -459,7 +463,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           const style = `__vite_style__`
           const injectCode =
             `var ${style} = document.createElement('style');` +
-            `${style}.innerHTML = \`${chunkCSS}\`;` +
+            `${style}.innerHTML = ${stringifyAsTemplateLiteral(chunkCSS)};` +
             `document.head.appendChild(${style});`
           if (config.build.sourcemap) {
             const s = new MagicString(code)
diff --git a/packages/vite/src/node/plugins/wasm.ts b/packages/vite/src/node/plugins/wasm.ts
index bf73d459654ea6..3a611df277b12f 100644
--- a/packages/vite/src/node/plugins/wasm.ts
+++ b/packages/vite/src/node/plugins/wasm.ts
@@ -1,5 +1,6 @@
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
+import { stringifyAsTemplateLiteral } from '../utils'
 import { fileToUrl } from './asset'
 
 const wasmHelperId = '/__vite-wasm-helper'
@@ -65,7 +66,7 @@ export const wasmPlugin = (config: ResolvedConfig): Plugin => {
 
       return `
 import initWasm from "${wasmHelperId}"
-export default opts => initWasm(opts, \`${url}\`)
+export default opts => initWasm(opts, ${stringifyAsTemplateLiteral(url)})
 `
     }
   }
diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 67889ecd3bb0df..8a8314850024e8 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -1,7 +1,12 @@
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
 import { fileToUrl, getAssetHash } from './asset'
-import { cleanUrl, injectQuery, parseRequest } from '../utils'
+import {
+  cleanUrl,
+  injectQuery,
+  parseRequest,
+  stringifyAsTemplateLiteral
+} from '../utils'
 import type Rollup from 'rollup'
 import { ENV_PUBLIC_PATH } from '../constants'
 import path from 'path'
@@ -270,11 +275,9 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
 
       return {
         code: `export default function WorkerWrapper() {
-          return new ${workerConstructor}(\`${url}\`, ${JSON.stringify(
-          workerOptions,
-          null,
-          2
-        )})
+          return new ${workerConstructor}(${stringifyAsTemplateLiteral(
+          url
+        )}, ${JSON.stringify(workerOptions, null, 2)})
         }`,
         map: { mappings: '' } // Empty sourcemap to supress Rolup warning
       }
diff --git a/packages/vite/src/node/plugins/workerImportMetaUrl.ts b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
index 0a51f8e308bc01..c522e0ae79b950 100644
--- a/packages/vite/src/node/plugins/workerImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
@@ -8,7 +8,8 @@ import {
   injectQuery,
   multilineCommentsRE,
   singlelineCommentsRE,
-  stringsRE
+  stringsRE,
+  stringifyAsTemplateLiteral
 } from '../utils'
 import path from 'path'
 import { workerFileToUrl } from './worker'
@@ -170,9 +171,14 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
             url = injectQuery(url, WORKER_FILE_ID)
             url = injectQuery(url, `type=${workerType}`)
           }
-          s.overwrite(urlIndex, urlIndex + exp.length, `\`${url}\``, {
-            contentOnly: true
-          })
+          s.overwrite(
+            urlIndex,
+            urlIndex + exp.length,
+            stringifyAsTemplateLiteral(url),
+            {
+              contentOnly: true
+            }
+          )
         }
         if (s) {
           return {
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 8c7859e3850454..cf4a39a546c865 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -734,3 +734,7 @@ export function parseRequest(id: string): Record<string, string> | null {
 
 export const blankReplacer = (match: string) => ' '.repeat(match.length)
 export const stringsRE = /"[^"]*"|'[^']*'|`[^`]*`/g
+
+export function stringifyAsTemplateLiteral(s: string) {
+  return `\`${s.replace(/`|\\|\$\{/g, '\\$&')}\``
+}

From 3bd450d426ba37e1d120eb46241c1d5e66d8c26b Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Wed, 13 Apr 2022 21:30:07 +0200
Subject: [PATCH 05/33] chore: typo

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
---
 packages/vite/src/node/build.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index d9ed080ccc5dbb..904f6afa4e13c2 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -277,7 +277,7 @@ export function resolveBuildOptions(raw?: BuildOptions): ResolvedBuildOptions {
       'edge88',
       'firefox78',
       'chrome87',
-      'safari13' // transpile nullish coallesing
+      'safari13' // transpile nullish coalescing
     ]
   } else if (resolved.target === 'esnext' && resolved.minify === 'terser') {
     // esnext + terser: limit to es2019 so it can be minified by terser

From 1491bb982cd1fa997613d7dcc0383119017d7923 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Thu, 14 Apr 2022 22:06:17 +0200
Subject: [PATCH 06/33] chore: remove unused regex

---
 packages/vite/src/node/utils.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 5ffb20f269b72c..b07011745ceb3c 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -734,8 +734,6 @@ export function parseRequest(id: string): Record<string, string> | null {
 
 export const blankReplacer = (match: string) => ' '.repeat(match.length)
 
-export const stringsRE = /"[^"]*"|'[^']*'|`[^`]*`/g
-
 export function stringifyAsTemplateLiteral(s: string) {
   return `\`${s.replace(/`|\\|\$\{/g, '\\$&')}\``
 }

From 77a05e3b4fc1fc71a296509dcd75ab97c1673430 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 15 Apr 2022 08:29:16 +0200
Subject: [PATCH 07/33] fix: resolve worker TODO

---
 packages/vite/src/node/plugins/worker.ts | 30 +++++++++++-------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 8a8314850024e8..1d3f1e8e239e25 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -177,23 +177,21 @@ export async function workerFileToUrl(
   const workerMap = workerCache.get(config)!
 
   let hash = workerMap.bundle.get(id)
-  if (hash) {
-    // rewrite truth id, no need to replace by asset plugin
-    return config.base + workerMap.emitted.get(hash)! // TODO
+  if (!hash) {
+    const code = await bundleWorkerEntry(ctx, config, id, query)
+    const basename = path.parse(cleanUrl(id)).name
+    const contentHash = getAssetHash(code)
+    const fileName = path.posix.join(
+      config.build.assetsDir,
+      `${basename}.${contentHash}.js`
+    )
+    hash = emitWorkerAssets(ctx, config, {
+      fileName,
+      type: 'asset',
+      source: code
+    })
+    workerMap.bundle.set(id, hash)
   }
-  const code = await bundleWorkerEntry(ctx, config, id, query)
-  const basename = path.parse(cleanUrl(id)).name
-  const contentHash = getAssetHash(code)
-  const fileName = path.posix.join(
-    config.build.assetsDir,
-    `${basename}.${contentHash}.js`
-  )
-  hash = emitWorkerAssets(ctx, config, {
-    fileName,
-    type: 'asset',
-    source: code
-  })
-  workerMap.bundle.set(id, hash)
   return `__VITE_ASSET__${hash}__`
 }
 

From 69d872ff9225ce6e6e725d8d9c217d6766476fb0 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 29 Apr 2022 20:37:19 +0200
Subject: [PATCH 08/33] fix: apply fix by @locriacyber

---
 packages/vite/src/node/plugins/importAnalysisBuild.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 896de968dd504d..4fc02a8b237b56 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -98,7 +98,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
     ? `'modulepreload'`
     : `(${detectScriptRel.toString()})()`
   const assetsURL = hasCustomAssetFileNames
-    ? config.base
+    ? JSON.stringify(config.base)
     : isRelativeBase(config.base)
     ? `new URL('./',import.meta.url).pathname`
     : JSON.stringify(path.posix.join(config.base, config.build.assetsDir, '/'))

From 41d9884776342b1e434260e35f42707993b06fdf Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Fri, 29 Apr 2022 20:43:44 +0200
Subject: [PATCH 09/33] chore: typo

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
---
 packages/vite/src/node/plugins/asset.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index adbe5f3838f69a..d619fb76802a69 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -90,7 +90,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       let s: MagicString | undefined
 
       // Urls added with JS using e.g.
-      // imgElement.src = `__VITE_ASSET___5aa0ddc0__` are using quotes
+      // imgElement.src = `__VITE_ASSET__5aa0ddc0__` are using quotes
 
       // Urls added in CSS that is imported in JS end up like
       // var inlined = `.inlined{color:green;background:url(__VITE_ASSET__5aa0ddc0__)}\n`;

From 80dacfb307150674a26b7d72e652b89d3aab36db Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 9 May 2022 13:36:37 +0200
Subject: [PATCH 10/33] chore: update

---
 .../playground => playground}/assets/vite.config-portable.js      | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename {packages/playground => playground}/assets/vite.config-portable.js (100%)

diff --git a/packages/playground/assets/vite.config-portable.js b/playground/assets/vite.config-portable.js
similarity index 100%
rename from packages/playground/assets/vite.config-portable.js
rename to playground/assets/vite.config-portable.js

From e1f49c7cc932f4062f92b9464388956ca1ff0866 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Thu, 12 May 2022 08:59:48 +0200
Subject: [PATCH 11/33] refactor: back to JSON.stringify

---
 packages/vite/src/node/plugins/asset.ts             |  9 +++++----
 .../vite/src/node/plugins/assetImportMetaUrl.ts     |  3 +--
 packages/vite/src/node/plugins/css.ts               |  7 +++----
 packages/vite/src/node/plugins/wasm.ts              |  3 +--
 packages/vite/src/node/plugins/worker.ts            |  9 ++-------
 .../vite/src/node/plugins/workerImportMetaUrl.ts    | 13 ++++---------
 packages/vite/src/node/utils.ts                     |  4 ----
 7 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 4a5dc7a3ca4edf..6d0d15eeb2001b 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -4,7 +4,7 @@ import fs, { promises as fsp } from 'fs'
 import * as mrmime from 'mrmime'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
-import { cleanUrl, normalizePath, stringifyAsTemplateLiteral } from '../utils'
+import { cleanUrl, normalizePath } from '../utils'
 import {
   assetFilenameWithBase,
   isRelativeBase,
@@ -81,8 +81,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
 
       id = id.replace(urlRE, '$1').replace(/[\?&]$/, '')
       const url = await fileToUrl(id, config, this)
-      // Return a template string so we can use interpolation when replacing __VITE_ASSET__
-      return `export default ${stringifyAsTemplateLiteral(url)}`
+      return `export default ${JSON.stringify(url)}`
     },
 
     renderChunk(code, chunk) {
@@ -109,7 +108,9 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
           config.base
         )
         const replacement = isRelativeBase(config.base)
-          ? `\${new URL(${JSON.stringify(outputFilepath)},import.meta.url)}`
+          ? `" + new URL(${JSON.stringify(
+              outputFilepath
+            )}, import.meta.url) + "`
           : outputFilepath
         s.overwrite(match.index, match.index + full.length, replacement, {
           contentOnly: true
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index d8d5ddfd14732e..ba6f8c16ac7a11 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -3,7 +3,6 @@ import MagicString from 'magic-string'
 import path from 'path'
 import { fileToUrl } from './asset'
 import type { ResolvedConfig } from '../config'
-import { stringifyAsTemplateLiteral } from '../utils'
 import { preloadHelperId } from './importAnalysisBuild'
 import { stripLiteral } from 'strip-literal'
 
@@ -76,7 +75,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           s.overwrite(
             index,
             index + exp.length,
-            `new URL(${stringifyAsTemplateLiteral(builtUrl)}, self.location)`,
+            `" + new URL(${JSON.stringify(builtUrl)}, self.location) + "`,
             { contentOnly: true }
           )
         }
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index a9e9146de4c3bf..2b5dc1c1f09a85 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -12,8 +12,7 @@ import {
   normalizePath,
   processSrcSet,
   parseRequest,
-  combineSourcemaps,
-  stringifyAsTemplateLiteral
+  combineSourcemaps
 } from '../utils'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
@@ -382,7 +381,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           if (config.build.minify) {
             content = await minifyCSS(content, config)
           }
-          code = `export default ${stringifyAsTemplateLiteral(content)}`
+          code = `export default ${JSON.stringify(content)}`
         }
       } else {
         code = `export default ''`
@@ -471,7 +470,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           const style = `__vite_style__`
           const injectCode =
             `var ${style} = document.createElement('style');` +
-            `${style}.innerHTML = ${stringifyAsTemplateLiteral(chunkCSS)};` +
+            `${style}.innerHTML = ${JSON.stringify(chunkCSS)};` +
             `document.head.appendChild(${style});`
           if (config.build.sourcemap) {
             const s = new MagicString(code)
diff --git a/packages/vite/src/node/plugins/wasm.ts b/packages/vite/src/node/plugins/wasm.ts
index 3a611df277b12f..1f64434a5b9781 100644
--- a/packages/vite/src/node/plugins/wasm.ts
+++ b/packages/vite/src/node/plugins/wasm.ts
@@ -1,6 +1,5 @@
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
-import { stringifyAsTemplateLiteral } from '../utils'
 import { fileToUrl } from './asset'
 
 const wasmHelperId = '/__vite-wasm-helper'
@@ -66,7 +65,7 @@ export const wasmPlugin = (config: ResolvedConfig): Plugin => {
 
       return `
 import initWasm from "${wasmHelperId}"
-export default opts => initWasm(opts, ${stringifyAsTemplateLiteral(url)})
+export default opts => initWasm(opts, ${JSON.stringify(url)})
 `
     }
   }
diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 8bde1130a827c9..128685c227921a 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -1,12 +1,7 @@
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
 import { fileToUrl, getAssetHash } from './asset'
-import {
-  cleanUrl,
-  injectQuery,
-  parseRequest,
-  stringifyAsTemplateLiteral
-} from '../utils'
+import { cleanUrl, injectQuery, parseRequest } from '../utils'
 import type Rollup from 'rollup'
 import { ENV_PUBLIC_PATH } from '../constants'
 import path from 'path'
@@ -280,7 +275,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
 
       return {
         code: `export default function WorkerWrapper() {
-          return new ${workerConstructor}(${stringifyAsTemplateLiteral(
+          return new ${workerConstructor}(${JSON.stringify(
           url
         )}, ${JSON.stringify(workerOptions, null, 2)})
         }`,
diff --git a/packages/vite/src/node/plugins/workerImportMetaUrl.ts b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
index 47701fcd5657ba..3e18018bd561e4 100644
--- a/packages/vite/src/node/plugins/workerImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
@@ -2,7 +2,7 @@ import JSON5 from 'json5'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
 import { fileToUrl } from './asset'
-import { cleanUrl, injectQuery, stringifyAsTemplateLiteral } from '../utils'
+import { cleanUrl, injectQuery } from '../utils'
 import path from 'path'
 import { workerFileToUrl } from './worker'
 import { parseRequest, normalizePath } from '../utils'
@@ -155,14 +155,9 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
             url = injectQuery(url, WORKER_FILE_ID)
             url = injectQuery(url, `type=${workerType}`)
           }
-          s.overwrite(
-            urlIndex,
-            urlIndex + exp.length,
-            stringifyAsTemplateLiteral(url),
-            {
-              contentOnly: true
-            }
-          )
+          s.overwrite(urlIndex, urlIndex + exp.length, JSON.stringify(url), {
+            contentOnly: true
+          })
         }
 
         if (s) {
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index bb2142a5cdf4b6..ddcaced9832bc1 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -748,10 +748,6 @@ export function parseRequest(id: string): Record<string, string> | null {
 
 export const blankReplacer = (match: string) => ' '.repeat(match.length)
 
-export function stringifyAsTemplateLiteral(s: string) {
-  return `\`${s.replace(/`|\\|\$\{/g, '\\$&')}\``
-}
-
 // Based on node-graceful-fs
 
 // The ISC License

From 2cbd9efed4054c7a2783de209f4e342341687bed Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Thu, 12 May 2022 09:34:25 +0200
Subject: [PATCH 12/33] chore: update

---
 packages/vite/src/node/plugins/assetImportMetaUrl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index 744139673b92c8..636234736cc32c 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -75,7 +75,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           s.overwrite(
             index,
             index + exp.length,
-            `" + new URL(${JSON.stringify(builtUrl)}, self.location) + "`,
+            `new URL(${JSON.stringify(builtUrl)}, self.location)`,
             { contentOnly: true }
           )
         }

From a4cef7e5d56d93751fadcec0fa58812616cdef7e Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Thu, 12 May 2022 09:36:54 +0200
Subject: [PATCH 13/33] chore: comment

---
 packages/vite/src/node/plugins/asset.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 5f1f1c1342db38..9fc88c3c2ff5ab 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -88,12 +88,12 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       let s: MagicString | undefined
 
       // Urls added with JS using e.g.
-      // imgElement.src = `__VITE_ASSET__5aa0ddc0__` are using quotes
+      // imgElement.src = "__VITE_ASSET__5aa0ddc0__" are using quotes
 
       // Urls added in CSS that is imported in JS end up like
-      // var inlined = `.inlined{color:green;background:url(__VITE_ASSET__5aa0ddc0__)}\n`;
+      // var inlined = ".inlined{color:green;background:url(__VITE_ASSET__5aa0ddc0__)}\n";
 
-      // In both cases, the wrapping allows us to use interpolation
+      // In both cases, the wrapping should already be fine
 
       while ((match = assetUrlRE.exec(code))) {
         s = s || (s = new MagicString(code))

From 26eb46df1f8fdc503a0f530116b82c335c6e1f14 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 13 May 2022 16:41:20 +0200
Subject: [PATCH 14/33] chore: update

---
 packages/vite/src/node/build.ts               |  9 +++++++++
 packages/vite/src/node/plugins/asset.ts       | 19 +++++--------------
 .../src/node/plugins/workerImportMetaUrl.ts   | 11 ++++++-----
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index 0b69b7b0602649..2abc6178d7d5e9 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -772,6 +772,15 @@ export function assetFilenameWithBase(filename: string, base: string): string {
   }
 }
 
+export function filenameToUrlCode(filename: string, base: string): string {
+  const outputFilepath = assetFilenameWithBase(filename, base)
+  if (isRelativeBase(base)) {
+    return `new URL(${JSON.stringify(outputFilepath)}, import.meta.url)`
+  } else {
+    return JSON.stringify(outputFilepath)
+  }
+}
+
 export function publicURLfromAsset(
   url: string,
   config: ResolvedConfig
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 9fc88c3c2ff5ab..320170486b5d2e 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -7,11 +7,7 @@ import MagicString from 'magic-string'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { cleanUrl, getHash, normalizePath } from '../utils'
-import {
-  assetFilenameWithBase,
-  isRelativeBase,
-  publicURLfromAsset
-} from '../build'
+import { filenameToUrlCode, publicURLfromAsset } from '../build'
 import { FS_PREFIX } from '../constants'
 
 export const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g
@@ -102,15 +98,10 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
         // fallback to this.getFileName for that.
         const file = getAssetFilename(hash, config) || this.getFileName(hash)
         chunk.viteMetadata.importedAssets.add(cleanUrl(file))
-        const outputFilepath = assetFilenameWithBase(
-          file + postfix,
-          config.base
-        )
-        const replacement = isRelativeBase(config.base)
-          ? `" + new URL(${JSON.stringify(
-              outputFilepath
-            )}, import.meta.url) + "`
-          : outputFilepath
+        // Convert to stringified url or `new URL(...)`
+        const urlCode = filenameToUrlCode(file + postfix, config.base)
+        const replacement =
+          urlCode[0] === '"' ? urlCode.slice(1, -1) : `" + ${urlCode} + "`
         s.overwrite(match.index, match.index + full.length, replacement, {
           contentOnly: true
         })
diff --git a/packages/vite/src/node/plugins/workerImportMetaUrl.ts b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
index 92bac1ab997ae1..bbdb3df9f14359 100644
--- a/packages/vite/src/node/plugins/workerImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
@@ -8,7 +8,7 @@ import type { Plugin } from '../plugin'
 import { cleanUrl, injectQuery, normalizePath, parseRequest } from '../utils'
 import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
 import type { ViteDevServer } from '..'
-import { workerFileToUrl } from './worker'
+import { workerFileToUrlCode } from './worker'
 import { fileToUrl } from './asset'
 
 type WorkerType = 'classic' | 'module' | 'ignore'
@@ -146,15 +146,16 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           const file = normalizePath(
             path.resolve(path.dirname(id), rawUrl.slice(1, -1))
           )
-          let url: string
+          let urlCode: string
           if (isBuild) {
-            url = await workerFileToUrl(this, config, file, query)
+            urlCode = await workerFileToUrlCode(this, config, file, query)
           } else {
-            url = await fileToUrl(cleanUrl(file), config, this)
+            let url = await fileToUrl(cleanUrl(file), config, this)
             url = injectQuery(url, WORKER_FILE_ID)
             url = injectQuery(url, `type=${workerType}`)
+            urlCode = JSON.stringify(url)
           }
-          s.overwrite(urlIndex, urlIndex + exp.length, JSON.stringify(url), {
+          s.overwrite(urlIndex, urlIndex + exp.length, urlCode, {
             contentOnly: true
           })
         }

From 638945ce9e5ee2152fb2c5af87d12f2ee4a9bae2 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 13 May 2022 17:12:01 +0200
Subject: [PATCH 15/33] chore: update

---
 packages/vite/src/node/plugins/worker.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 3fe005560883db..ec1efc64c72dd3 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -240,7 +240,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
 
       return {
         code: `export default function WorkerWrapper() {
-          return new ${workerConstructor}(${urlCode})}, ${JSON.stringify(
+          return new ${workerConstructor}(${urlCode}, ${JSON.stringify(
           workerOptions,
           null,
           2

From 9681acabdd75dda2fcd8798ee2becc57b63544ab Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Fri, 13 May 2022 18:31:35 +0200
Subject: [PATCH 16/33] chore: allow custom assetFileNames

---
 .../vite/src/node/plugins/importAnalysisBuild.ts  | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 5ded14d2a9a1dc..72bd67603b8436 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -91,18 +91,11 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
   const ssr = !!config.build.ssr
   const isWorker = config.isWorker
   const insertPreload = !(ssr || !!config.build.lib || isWorker)
-  const rollupOptionsOutput = config.build?.rollupOptions?.output
-  const hasCustomAssetFileNames =
-    rollupOptionsOutput &&
-    !Array.isArray(rollupOptionsOutput) &&
-    !!rollupOptionsOutput.assetFileNames
 
   const scriptRel = config.build.polyfillModulePreload
     ? `'modulepreload'`
     : `(${detectScriptRel.toString()})()`
-  const assetsURL = hasCustomAssetFileNames
-    ? JSON.stringify(config.base)
-    : isRelativeBase(config.base)
+  const assetsURL = isRelativeBase(config.base)
     ? `new URL('./',import.meta.url).pathname`
     : JSON.stringify(path.posix.join(config.base, config.build.assetsDir, '/'))
   const preloadCode = `const scriptRel = ${scriptRel};const assetsURL = ${assetsURL};const seen = {};export const ${preloadMethod} = ${preload.toString()}`
@@ -330,11 +323,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                     // main chunk is removed
                     (hasRemovedPureCssChunk && deps.size > 0)
                     ? `[${[...deps]
-                        .map((d) =>
-                          JSON.stringify(
-                            hasCustomAssetFileNames ? d : path.basename(d)
-                          )
-                        )
+                        .map((d) => JSON.stringify(path.basename(d)))
                         .join(',')}]`
                     : `[]`,
                   { contentOnly: true }

From a35440151a5e14c68566a5f97d4a76c2e2590670 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Sat, 14 May 2022 20:05:56 +0200
Subject: [PATCH 17/33] feat: support custom file names in module preload

---
 .../src/node/plugins/importAnalysisBuild.ts   | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 72bd67603b8436..5c7760a408976e 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -41,7 +41,11 @@ function detectScriptRel() {
 }
 
 declare const scriptRel: string
-function preload(baseModule: () => Promise<{}>, deps?: string[]) {
+function preload(
+  baseModule: () => Promise<{}>,
+  deps?: string[],
+  importerUrl?: string
+) {
   // @ts-ignore
   if (!__VITE_IS_MODERN__ || !deps || deps.length === 0) {
     return baseModule()
@@ -50,7 +54,7 @@ function preload(baseModule: () => Promise<{}>, deps?: string[]) {
   return Promise.all(
     deps.map((dep) => {
       // @ts-ignore
-      dep = `${assetsURL}${dep}`
+      dep = assetsURL(dep, importerUrl)
       // @ts-ignore
       if (dep in seen) return
       // @ts-ignore
@@ -92,12 +96,14 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
   const isWorker = config.isWorker
   const insertPreload = !(ssr || !!config.build.lib || isWorker)
 
+  const relativeBase = isRelativeBase(config.base)
+
   const scriptRel = config.build.polyfillModulePreload
     ? `'modulepreload'`
     : `(${detectScriptRel.toString()})()`
-  const assetsURL = isRelativeBase(config.base)
-    ? `new URL('./',import.meta.url).pathname`
-    : JSON.stringify(path.posix.join(config.base, config.build.assetsDir, '/'))
+  const assetsURL = relativeBase
+    ? `function(dep,importerUrl) { return new URL(dep, importerUrl).href }`
+    : `function(dep) { return ${JSON.stringify(config.base)}+dep }`
   const preloadCode = `const scriptRel = ${scriptRel};const assetsURL = ${assetsURL};const seen = {};export const ${preloadMethod} = ${preload.toString()}`
 
   return {
@@ -323,8 +329,14 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                     // main chunk is removed
                     (hasRemovedPureCssChunk && deps.size > 0)
                     ? `[${[...deps]
-                        .map((d) => JSON.stringify(path.basename(d)))
-                        .join(',')}]`
+                        .map((d) =>
+                          JSON.stringify(
+                            relativeBase
+                              ? path.relative(path.dirname(file), d)
+                              : d
+                          )
+                        )
+                        .join(',')}]` + (relativeBase ? ',import.meta.url' : '')
                     : `[]`,
                   { contentOnly: true }
                 )

From b2a9967136667093482b6f15508d425e4e1d48e5 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Sat, 14 May 2022 20:29:34 +0200
Subject: [PATCH 18/33] chore: remove unneded worker options formatting

---
 packages/vite/src/node/plugins/worker.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index ec1efc64c72dd3..7531e914eb3d0d 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -241,9 +241,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
       return {
         code: `export default function WorkerWrapper() {
           return new ${workerConstructor}(${urlCode}, ${JSON.stringify(
-          workerOptions,
-          null,
-          2
+          workerOptions
         )})
         }`,
         map: { mappings: '' } // Empty sourcemap to suppress Rollup warning

From cba14d88d676f6083a1a3be9dad329abfee11856 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Sat, 14 May 2022 23:01:21 +0200
Subject: [PATCH 19/33] fix: rework assets and worker assets handling

---
 packages/vite/src/node/build.ts               | 30 ++----
 packages/vite/src/node/plugins/asset.ts       | 16 ++--
 packages/vite/src/node/plugins/css.ts         | 13 ++-
 packages/vite/src/node/plugins/html.ts        |  2 +-
 .../src/node/plugins/importAnalysisBuild.ts   |  3 +-
 packages/vite/src/node/plugins/worker.ts      | 95 +++++++++++++++----
 .../src/node/plugins/workerImportMetaUrl.ts   | 11 +--
 packages/vite/src/node/utils.ts               |  4 +
 8 files changed, 115 insertions(+), 59 deletions(-)

diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index 2abc6178d7d5e9..b23d2f8a532bae 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -26,7 +26,13 @@ import { resolveConfig } from './config'
 import { buildReporterPlugin } from './plugins/reporter'
 import { buildEsbuildPlugin } from './plugins/esbuild'
 import { terserPlugin } from './plugins/terser'
-import { copyDir, emptyDir, lookupFile, normalizePath } from './utils'
+import {
+  copyDir,
+  emptyDir,
+  isRelativeBase,
+  lookupFile,
+  normalizePath
+} from './utils'
 import { manifestPlugin } from './plugins/manifest'
 import type { Logger } from './logger'
 import { dataURIPlugin } from './plugins/dataUri'
@@ -759,28 +765,6 @@ function injectSsrFlag<T extends Record<string, any>>(
   return { ...(options ?? {}), ssr: true } as T & { ssr: boolean }
 }
 
-export function isRelativeBase(base: string): boolean {
-  return base === '' || base.startsWith('.')
-}
-
-export function assetFilenameWithBase(filename: string, base: string): string {
-  if (isRelativeBase(base)) {
-    // relative base - asset file will be in the same dir
-    return `./${path.posix.basename(filename)}`
-  } else {
-    return base + filename
-  }
-}
-
-export function filenameToUrlCode(filename: string, base: string): string {
-  const outputFilepath = assetFilenameWithBase(filename, base)
-  if (isRelativeBase(base)) {
-    return `new URL(${JSON.stringify(outputFilepath)}, import.meta.url)`
-  } else {
-    return JSON.stringify(outputFilepath)
-  }
-}
-
 export function publicURLfromAsset(
   url: string,
   config: ResolvedConfig
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 320170486b5d2e..00b4f33eb15cef 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -6,8 +6,8 @@ import type { OutputOptions, PluginContext } from 'rollup'
 import MagicString from 'magic-string'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
-import { cleanUrl, getHash, normalizePath } from '../utils'
-import { filenameToUrlCode, publicURLfromAsset } from '../build'
+import { cleanUrl, getHash, isRelativeBase, normalizePath } from '../utils'
+import { publicURLfromAsset } from '../build'
 import { FS_PREFIX } from '../constants'
 
 export const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g
@@ -30,6 +30,7 @@ const emittedHashMap = new WeakMap<ResolvedConfig, Set<string>>()
 export function assetPlugin(config: ResolvedConfig): Plugin {
   // assetHashToFilenameMap initialization in buildStart causes getAssetFilename to return undefined
   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
@@ -95,13 +96,14 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
         s = s || (s = new MagicString(code))
         const [full, hash, postfix = ''] = match
         // some internal plugins may still need to emit chunks (e.g. worker) so
-        // fallback to this.getFileName for that.
+        // fallback to this.getFileName for that. TODO: remove, not needed
         const file = getAssetFilename(hash, config) || this.getFileName(hash)
         chunk.viteMetadata.importedAssets.add(cleanUrl(file))
-        // Convert to stringified url or `new URL(...)`
-        const urlCode = filenameToUrlCode(file + postfix, config.base)
-        const replacement =
-          urlCode[0] === '"' ? urlCode.slice(1, -1) : `" + ${urlCode} + "`
+        const filename = file + postfix
+        const outputFilepath = relativeBase
+          ? path.relative(path.dirname(chunk.fileName), filename)
+          : config.base + filename
+        const replacement = JSON.stringify(outputFilepath).slice(1, -1)
         s.overwrite(match.index, match.index + full.length, replacement, {
           contentOnly: true
         })
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index b03b495c56b8ad..bcb8ca66b15204 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -37,12 +37,13 @@ import {
   isDataUrl,
   isExternalUrl,
   isObject,
+  isRelativeBase,
   normalizePath,
   parseRequest,
   processSrcSet
 } from '../utils'
 import { emptyCssComments } from '../utils'
-import { assetFilenameWithBase, publicURLfromAsset } from '../build'
+import { publicURLfromAsset } from '../build'
 import { addToHTMLProxyTransformResult } from './html'
 import {
   assetUrlRE,
@@ -428,14 +429,18 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         }
       ) => {
         // replace asset url references with resolved url.
+        const relativeBase = isRelativeBase(config.base)
         css = css.replace(assetUrlRE, (_, fileHash, postfix = '') => {
           const filename = getAssetFilename(fileHash, config) + postfix
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
-          if (inlined) {
-            // inlined (injected as style tag into index.html) use the base as-is
+          // TODO: inlined with relative base, should it use import.meta.url?
+          if (inlined || !relativeBase) {
+            // absolute base or relative base but inlined (injected as style tag into
+            // index.html) use the base as-is
             return config.base + filename
           }
-          return assetFilenameWithBase(filename, config.base)
+          // relative base + extracted CSS - asset file will be in the same dir
+          return `./${path.posix.basename(filename)}`
         })
         // only external @imports and @charset should exist at this point
         css = await finalizeCss(css, minify, config)
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 5c510232f32189..9d06d6e168f2e1 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -24,11 +24,11 @@ import {
   getHash,
   isDataUrl,
   isExternalUrl,
+  isRelativeBase,
   normalizePath,
   processSrcSet,
   slash
 } from '../utils'
-import { isRelativeBase } from '../build'
 import type { ResolvedConfig } from '../config'
 import {
   assetUrlRE,
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 5c7760a408976e..0215fe5f8f94e5 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -4,11 +4,10 @@ import type { ImportSpecifier } from 'es-module-lexer'
 import { init, parse as parseImports } from 'es-module-lexer'
 import type { OutputChunk, SourceMap } from 'rollup'
 import type { RawSourceMap } from '@ampproject/remapping'
-import { bareImportRE, combineSourcemaps } from '../utils'
+import { bareImportRE, combineSourcemaps, isRelativeBase } from '../utils'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { genSourceMapUrl } from '../server/sourcemap'
-import { isRelativeBase } from '../build'
 import { isCSSRequest, removedPureCssFilesCache } from './css'
 
 /**
diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 7531e914eb3d0d..b3aaff5c118277 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -1,20 +1,32 @@
 import path from 'path'
+import MagicString from 'magic-string'
 import type { EmittedAsset, OutputChunk, TransformPluginContext } from 'rollup'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
-import { cleanUrl, injectQuery, parseRequest } from '../utils'
+import {
+  cleanUrl,
+  getHash,
+  injectQuery,
+  isRelativeBase,
+  parseRequest
+} from '../utils'
 import { ENV_PUBLIC_PATH } from '../constants'
-import { filenameToUrlCode, onRollupWarning } from '../build'
+import { onRollupWarning } from '../build'
 import { fileToUrl } from './asset'
 
+export const workerAssetUrlRE = /__VITE_WORKER_ASSET__([a-z\d]{8})__/g
+
 interface WorkerCache {
   // save worker all emit chunk avoid rollup make the same asset unique.
   assets: Map<string, EmittedAsset>
 
   // worker bundle don't deps on any more worker runtime info an id only had an result.
   // save worker bundled file id to avoid repeated execution of bundles
-  // <input_filename, hash>
+  // <input_filename, fileName>
   bundle: Map<string, string>
+
+  // <hash, fileName>
+  fileNameHash: Map<string, string>
 }
 
 const WorkerFileId = 'worker_file'
@@ -138,7 +150,20 @@ function emitSourcemapForWorkerEntry(
   return chunk
 }
 
-export async function workerFileToUrlCode(
+function encodeWorkerAssetFileName(
+  fileName: string,
+  workerCache: WorkerCache
+): string {
+  const { fileNameHash } = workerCache
+  let hash = fileNameHash.get(fileName)
+  if (!hash) {
+    hash = getHash(fileName)
+    fileNameHash.set(hash, fileName)
+  }
+  return `__VITE_WORKER_ASSET__${hash}__`
+}
+
+export async function workerFileToUrl(
   ctx: TransformPluginContext,
   config: ResolvedConfig,
   id: string,
@@ -156,7 +181,10 @@ export async function workerFileToUrlCode(
     })
     workerMap.bundle.set(id, fileName)
   }
-  return filenameToUrlCode(fileName, config.base)
+
+  return isRelativeBase(config.base)
+    ? encodeWorkerAssetFileName(fileName, workerMap)
+    : config.base + fileName
 }
 
 export function webWorkerPlugin(config: ResolvedConfig): Plugin {
@@ -171,7 +199,8 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
       }
       workerCache.set(config, {
         assets: new Map(),
-        bundle: new Map()
+        bundle: new Map(),
+        fileNameHash: new Map()
       })
     },
 
@@ -202,7 +231,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
       }
 
       // stringified url or `new URL(...)`
-      let urlCode: string
+      let url: string
       if (isBuild) {
         if (query.inline != null) {
           const chunk = await bundleWorkerEntry(this, config, id, query)
@@ -227,11 +256,11 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
             map: { mappings: '' }
           }
         } else {
-          urlCode = await workerFileToUrlCode(this, config, id, query)
+          url = await workerFileToUrl(this, config, id, query)
         }
       } else {
-        const url = await fileToUrl(cleanUrl(id), config, this)
-        urlCode = JSON.stringify(injectQuery(url, WorkerFileId))
+        url = await fileToUrl(cleanUrl(id), config, this)
+        url = injectQuery(url, WorkerFileId)
       }
 
       const workerConstructor =
@@ -240,17 +269,50 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
 
       return {
         code: `export default function WorkerWrapper() {
-          return new ${workerConstructor}(${urlCode}, ${JSON.stringify(
-          workerOptions
-        )})
+          return new ${workerConstructor}(${JSON.stringify(
+          url
+        )}, ${JSON.stringify(workerOptions)})
         }`,
         map: { mappings: '' } // Empty sourcemap to suppress Rollup warning
       }
     },
 
-    renderChunk(code) {
-      if (config.isWorker && code.includes('import.meta.url')) {
-        return code.replace('import.meta.url', 'self.location.href')
+    renderChunk(code, chunk) {
+      let s: MagicString
+      const result = () => {
+        return (
+          s && {
+            code: s.toString(),
+            map: config.build.sourcemap ? s.generateMap({ hires: true }) : null
+          }
+        )
+      }
+      if (code.match(workerAssetUrlRE) || code.includes('import.meta.url')) {
+        let match: RegExpExecArray | null
+        s = new MagicString(code)
+
+        // Replace "__VITE_WORKER_ASSET__5aa0ddc0__" using relative paths
+        const workerMap = workerCache.get(config.mainConfig || config)!
+        const { fileNameHash } = workerMap
+
+        while ((match = workerAssetUrlRE.exec(code))) {
+          const [full, hash] = match
+          const filename = fileNameHash.get(hash)!
+          const outputFilepath = path.relative(
+            path.dirname(chunk.fileName),
+            filename
+          )
+          const replacement = JSON.stringify(outputFilepath).slice(1, -1)
+          s.overwrite(match.index, match.index + full.length, replacement, {
+            contentOnly: true
+          })
+        }
+
+        // TODO: check if this should be removed
+        if (config.isWorker) {
+          s = s.replace('import.meta.url', 'self.location.href')
+          return result()
+        }
       }
       if (!isWorker) {
         const workerMap = workerCache.get(config)!
@@ -259,6 +321,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
           workerMap.assets.delete(asset.fileName!)
         })
       }
+      return result()
     }
   }
 }
diff --git a/packages/vite/src/node/plugins/workerImportMetaUrl.ts b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
index bbdb3df9f14359..92bac1ab997ae1 100644
--- a/packages/vite/src/node/plugins/workerImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/workerImportMetaUrl.ts
@@ -8,7 +8,7 @@ import type { Plugin } from '../plugin'
 import { cleanUrl, injectQuery, normalizePath, parseRequest } from '../utils'
 import { ENV_ENTRY, ENV_PUBLIC_PATH } from '../constants'
 import type { ViteDevServer } from '..'
-import { workerFileToUrlCode } from './worker'
+import { workerFileToUrl } from './worker'
 import { fileToUrl } from './asset'
 
 type WorkerType = 'classic' | 'module' | 'ignore'
@@ -146,16 +146,15 @@ export function workerImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           const file = normalizePath(
             path.resolve(path.dirname(id), rawUrl.slice(1, -1))
           )
-          let urlCode: string
+          let url: string
           if (isBuild) {
-            urlCode = await workerFileToUrlCode(this, config, file, query)
+            url = await workerFileToUrl(this, config, file, query)
           } else {
-            let url = await fileToUrl(cleanUrl(file), config, this)
+            url = await fileToUrl(cleanUrl(file), config, this)
             url = injectQuery(url, WORKER_FILE_ID)
             url = injectQuery(url, `type=${workerType}`)
-            urlCode = JSON.stringify(url)
           }
-          s.overwrite(urlIndex, urlIndex + exp.length, urlCode, {
+          s.overwrite(urlIndex, urlIndex + exp.length, JSON.stringify(url), {
             contentOnly: true
           })
         }
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 3748aa3b465b2c..ce982641468d88 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -281,6 +281,10 @@ export function removeTimestampQuery(url: string): string {
   return url.replace(timestampRE, '').replace(trailingSeparatorRE, '')
 }
 
+export function isRelativeBase(base: string): boolean {
+  return base === '' || base.startsWith('.')
+}
+
 export async function asyncReplace(
   input: string,
   re: RegExp,

From f61c30e1922513adf2df75ee9b539133c1289534 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Sun, 15 May 2022 13:54:34 +0200
Subject: [PATCH 20/33] fix: import.meta.url param position

---
 packages/vite/src/node/plugins/importAnalysisBuild.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 0215fe5f8f94e5..43f35a7147876d 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -161,7 +161,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           str().prependLeft(expStart, `${preloadMethod}(() => `)
           str().appendRight(
             expEnd,
-            `,${isModernFlag}?"${preloadMarker}":void 0)`
+            `,${isModernFlag}?"${preloadMarker}":void 0${
+              relativeBase ? ',import.meta.url' : ''
+            })`
           )
         }
 
@@ -335,7 +337,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                               : d
                           )
                         )
-                        .join(',')}]` + (relativeBase ? ',import.meta.url' : '')
+                        .join(',')}]`
                     : `[]`,
                   { contentOnly: true }
                 )

From 7f7fbf98bcf3c589138bf3cc285c60cb47e2e3c6 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Sun, 15 May 2022 13:55:14 +0200
Subject: [PATCH 21/33] chore: use absolute URL for assets in CSS

---
 packages/vite/src/node/plugins/asset.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 00b4f33eb15cef..ffc9fdbbf20896 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -101,10 +101,11 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
         chunk.viteMetadata.importedAssets.add(cleanUrl(file))
         const filename = file + postfix
         const outputFilepath = relativeBase
-          ? path.relative(path.dirname(chunk.fileName), filename)
-          : config.base + filename
-        const replacement = JSON.stringify(outputFilepath).slice(1, -1)
-        s.overwrite(match.index, match.index + full.length, replacement, {
+          ? `"+new URL(${JSON.stringify(
+              path.relative(path.dirname(chunk.fileName), filename)
+            )},import.meta.url)+"`
+          : JSON.stringify(config.base + filename).slice(1, -1)
+        s.overwrite(match.index, match.index + full.length, outputFilepath, {
           contentOnly: true
         })
       }

From c3d08219022611ef5e97e401de8ad4afa8897272 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 09:47:48 +0200
Subject: [PATCH 22/33] fix: worker hash to url cache

---
 packages/vite/src/node/plugins/worker.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index b3aaff5c118277..8ff0963d321692 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -14,8 +14,6 @@ import { ENV_PUBLIC_PATH } from '../constants'
 import { onRollupWarning } from '../build'
 import { fileToUrl } from './asset'
 
-export const workerAssetUrlRE = /__VITE_WORKER_ASSET__([a-z\d]{8})__/g
-
 interface WorkerCache {
   // save worker all emit chunk avoid rollup make the same asset unique.
   assets: Map<string, EmittedAsset>
@@ -150,14 +148,15 @@ function emitSourcemapForWorkerEntry(
   return chunk
 }
 
+export const workerAssetUrlRE = /__VITE_WORKER_ASSET__([a-z\d]{8})__/g
+
 function encodeWorkerAssetFileName(
   fileName: string,
   workerCache: WorkerCache
 ): string {
   const { fileNameHash } = workerCache
-  let hash = fileNameHash.get(fileName)
-  if (!hash) {
-    hash = getHash(fileName)
+  const hash = getHash(fileName)
+  if (!fileNameHash.get(fileName)) {
     fileNameHash.set(hash, fileName)
   }
   return `__VITE_WORKER_ASSET__${hash}__`

From 77e1f39e32046eaba90e9eca61549bd32268e34f Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 09:49:03 +0200
Subject: [PATCH 23/33] feat: absolute public urls in JS, asset paths in CSS

---
 packages/vite/src/node/build.ts         | 20 +--------
 packages/vite/src/node/plugins/asset.ts | 56 ++++++++++++++++++++++---
 packages/vite/src/node/plugins/css.ts   | 49 ++++++++++++++++++++--
 3 files changed, 96 insertions(+), 29 deletions(-)

diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index b23d2f8a532bae..550af9d13af389 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -26,13 +26,7 @@ import { resolveConfig } from './config'
 import { buildReporterPlugin } from './plugins/reporter'
 import { buildEsbuildPlugin } from './plugins/esbuild'
 import { terserPlugin } from './plugins/terser'
-import {
-  copyDir,
-  emptyDir,
-  isRelativeBase,
-  lookupFile,
-  normalizePath
-} from './utils'
+import { copyDir, emptyDir, lookupFile, normalizePath } from './utils'
 import { manifestPlugin } from './plugins/manifest'
 import type { Logger } from './logger'
 import { dataURIPlugin } from './plugins/dataUri'
@@ -764,15 +758,3 @@ function injectSsrFlag<T extends Record<string, any>>(
 ): T & { ssr: boolean } {
   return { ...(options ?? {}), ssr: true } as T & { ssr: boolean }
 }
-
-export function publicURLfromAsset(
-  url: string,
-  config: ResolvedConfig
-): string {
-  if (isRelativeBase(config.base)) {
-    // Assume flat assets structure
-    return path.posix.relative(config.build.assetsDir, '') + url
-  } else {
-    return config.base + url.slice(1)
-  }
-}
diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index ffc9fdbbf20896..e8e7f80089804b 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -7,7 +7,6 @@ import MagicString from 'magic-string'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { cleanUrl, getHash, isRelativeBase, normalizePath } from '../utils'
-import { publicURLfromAsset } from '../build'
 import { FS_PREFIX } from '../constants'
 
 export const assetUrlRE = /__VITE_ASSET__([a-z\d]{8})__(?:\$_(.*?)__)?/g
@@ -84,6 +83,11 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
       let match: RegExpExecArray | null
       let s: MagicString | undefined
 
+      const absoluteUrlPathInterpolation = (filename: string) =>
+        `"+new URL(${JSON.stringify(
+          path.relative(path.dirname(chunk.fileName), filename)
+        )},import.meta.url).href+"`
+
       // Urls added with JS using e.g.
       // imgElement.src = "__VITE_ASSET__5aa0ddc0__" are using quotes
 
@@ -101,15 +105,28 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
         chunk.viteMetadata.importedAssets.add(cleanUrl(file))
         const filename = file + postfix
         const outputFilepath = relativeBase
-          ? `"+new URL(${JSON.stringify(
-              path.relative(path.dirname(chunk.fileName), filename)
-            )},import.meta.url)+"`
+          ? absoluteUrlPathInterpolation(filename)
           : JSON.stringify(config.base + filename).slice(1, -1)
         s.overwrite(match.index, match.index + full.length, outputFilepath, {
           contentOnly: true
         })
       }
 
+      // Replace __VITE_PUBLIC_ASSET__5aa0ddc0__ with absolute paths
+
+      if (relativeBase) {
+        const publicAssetUrlMap = publicAssetUrlCache.get(config)!
+        while ((match = publicAssetUrlRE.exec(code))) {
+          s = s || (s = new MagicString(code))
+          const [full, hash] = match
+          const publicUrl = publicAssetUrlMap.get(hash)!
+          const replacement = absoluteUrlPathInterpolation(publicUrl.slice(1))
+          s.overwrite(match.index, match.index + full.length, replacement, {
+            contentOnly: true
+          })
+        }
+      }
+
       if (s) {
         return {
           code: s.toString(),
@@ -265,6 +282,33 @@ export function assetFileNamesToFileName(
   return fileName
 }
 
+export const publicAssetUrlCache = new WeakMap<
+  ResolvedConfig,
+  // hash -> url
+  Map<string, string>
+>()
+
+export const publicAssetUrlRE = /__VITE_PUBLIC_ASSET__([a-z\d]{8})__/g
+
+export function publicFileToBuiltUrl(
+  url: string,
+  config: ResolvedConfig
+): string {
+  if (!isRelativeBase(config.base)) {
+    return config.base + url.slice(1)
+  }
+  const hash = getHash(url)
+  let cache = publicAssetUrlCache.get(config)
+  if (!cache) {
+    cache = new Map<string, string>()
+    publicAssetUrlCache.set(config, cache)
+  }
+  if (!cache.get(hash)) {
+    cache.set(hash, url)
+  }
+  return `__VITE_PUBLIC_ASSET__${hash}__`
+}
+
 /**
  * Register an asset to be emitted as part of the bundle (if necessary)
  * and returns the resolved public URL
@@ -276,7 +320,7 @@ async function fileToBuiltUrl(
   skipPublicCheck = false
 ): Promise<string> {
   if (!skipPublicCheck && checkPublicFile(id, config)) {
-    return publicURLfromAsset(id, config)
+    return publicFileToBuiltUrl(id, config)
   }
 
   const cache = assetCache.get(config)!
@@ -349,7 +393,7 @@ export async function urlToBuiltUrl(
   pluginContext: PluginContext
 ): Promise<string> {
   if (checkPublicFile(url, config)) {
-    return publicURLfromAsset(url, config)
+    return publicFileToBuiltUrl(url, config)
   }
   const file = url.startsWith('/')
     ? path.join(config.root, url)
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index bcb8ca66b15204..5f5f891f838f8c 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -43,13 +43,15 @@ import {
   processSrcSet
 } from '../utils'
 import { emptyCssComments } from '../utils'
-import { publicURLfromAsset } from '../build'
 import { addToHTMLProxyTransformResult } from './html'
 import {
   assetUrlRE,
   checkPublicFile,
   fileToUrl,
-  getAssetFilename
+  getAssetFilename,
+  publicAssetUrlCache,
+  publicAssetUrlRE,
+  publicFileToBuiltUrl
 } from './asset'
 
 // const debug = createDebugger('vite:css')
@@ -184,7 +186,11 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
 
       const urlReplacer: CssUrlReplacer = async (url, importer) => {
         if (checkPublicFile(url, config)) {
-          return publicURLfromAsset(url, config)
+          if (isRelativeBase(config.base)) {
+            return publicFileToBuiltUrl(url, config)
+          } else {
+            return config.base + url.slice(1)
+          }
         }
         const resolved = await resolveUrl(url, importer)
         if (resolved) {
@@ -284,6 +290,20 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
   let outputToExtractedCSSMap: Map<NormalizedOutputOptions, string>
   let hasEmitted = false
 
+  const relativeBase = isRelativeBase(config.base)
+
+  // TODO: Could we call assetFileNames here with dummy info to know in what
+  // directory this asset to support the functional form?
+  const { rollupOptions } = config.build
+  const assetFileNames = (
+    Array.isArray(rollupOptions) ? rollupOptions[0] : rollupOptions
+  )?.assetFileNames
+  const cssDir =
+    typeof assetFileNames === 'string'
+      ? path.dirname(assetFileNames)
+      : config.build.assetsDir
+  const relativePathToPublicFromCSS = path.relative(cssDir, '')
+
   return {
     name: 'vite:css-post',
 
@@ -429,7 +449,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         }
       ) => {
         // replace asset url references with resolved url.
-        const relativeBase = isRelativeBase(config.base)
         css = css.replace(assetUrlRE, (_, fileHash, postfix = '') => {
           const filename = getAssetFilename(fileHash, config) + postfix
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
@@ -447,6 +466,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         return css
       }
 
+      const publicAssetUrlMap = publicAssetUrlCache.get(config)!
+
       if (config.build.cssCodeSplit) {
         if (isPureCssChunk) {
           // this is a shared CSS-only chunk that is empty.
@@ -461,6 +482,14 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             inlined: false,
             minify: true
           })
+          // resolve public URL from CSS paths
+          if (relativeBase) {
+            chunkCSS = chunkCSS.replace(
+              publicAssetUrlRE,
+              (_, hash) =>
+                relativePathToPublicFromCSS + publicAssetUrlMap.get(hash)!
+            )
+          }
           // emit corresponding css file
           const fileHandle = this.emitFile({
             name: chunk.name + '.css',
@@ -479,9 +508,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             `var ${style} = document.createElement('style');` +
             `${style}.innerHTML = ${JSON.stringify(chunkCSS)};` +
             `document.head.appendChild(${style});`
+          // __VITE_ASSET__ and __VITE_PUBLIC_ASSET__ urls are processed by
+          // the vite:asset plugin
           if (config.build.sourcemap) {
             const s = new MagicString(code)
             s.prepend(injectCode)
+            // resolve public URL from CSS paths, we need to use absolute paths
             return {
               code: s.toString(),
               map: s.generateMap({ hires: true })
@@ -558,6 +590,15 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       if (extractedCss && !hasEmitted) {
         hasEmitted = true
         extractedCss = await finalizeCss(extractedCss, true, config)
+        // resolve public URL from CSS paths
+        if (isRelativeBase(config.base)) {
+          const publicAssetUrlMap = publicAssetUrlCache.get(config)!
+          extractedCss = extractedCss.replace(
+            publicAssetUrlRE,
+            (_, hash) =>
+              relativePathToPublicFromCSS + publicAssetUrlMap.get(hash)!
+          )
+        }
         this.emitFile({
           name: 'style.css',
           type: 'asset',

From 7ee53f60fea5d5ae406e4abf45709a52afcde07e Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 09:51:18 +0200
Subject: [PATCH 24/33] test: add relative base asset test cases

---
 .../relative-base-assets.spec.ts              | 233 ++++++++++++++++++
 .../__tests__/relative-base/vite.config.js    |   1 +
 ...-\346\270\254\350\251\246-white space.png" | Bin 3395 -> 4986 bytes
 playground/assets/package.json                |   6 +-
 playground/assets/vite.config-portable.js     |  14 --
 .../assets/vite.config-relative-base.js       |  23 ++
 playground/test-utils.ts                      |   8 +-
 7 files changed, 266 insertions(+), 19 deletions(-)
 create mode 100644 playground/assets/__tests__/relative-base/relative-base-assets.spec.ts
 create mode 100644 playground/assets/__tests__/relative-base/vite.config.js
 delete mode 100644 playground/assets/vite.config-portable.js
 create mode 100644 playground/assets/vite.config-relative-base.js

diff --git a/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts b/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts
new file mode 100644
index 00000000000000..f7b0d89b3b3a85
--- /dev/null
+++ b/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts
@@ -0,0 +1,233 @@
+import { describe, expect, test } from 'vitest'
+import {
+  browserLogs,
+  findAssetFile,
+  getBg,
+  getColor,
+  isBuild,
+  page
+} from '~utils'
+
+const absoluteAssetMatch = isBuild
+  ? /http.*\/other-assets\/asset\.\w{8}\.png/
+  : '/nested/asset.png'
+
+// Asset URLs in CSS are relative to the same dir, the computed
+// style returns the absolute URL in the test
+const cssBgAssetMatch = absoluteAssetMatch
+
+const iconMatch = `/icon.png`
+
+const absoluteIconMatch = isBuild ? /http.*\/icon\.\w{8}\.png/ : './icon.png'
+
+const absolutePublicIconMatch = isBuild ? /http.*\/icon\.png/ : '/icon.png'
+
+test('should have no 404s', () => {
+  browserLogs.forEach((msg) => {
+    expect(msg).not.toMatch('404')
+  })
+})
+
+describe('raw references from /public', () => {
+  test('load raw js from /public', async () => {
+    expect(await page.textContent('.raw-js')).toMatch('[success]')
+  })
+
+  test('load raw css from /public', async () => {
+    expect(await getColor('.raw-css')).toBe('red')
+  })
+})
+
+test('import-expression from simple script', async () => {
+  expect(await page.textContent('.import-expression')).toMatch(
+    '[success][success]'
+  )
+})
+
+describe('asset imports from js', () => {
+  test('relative', async () => {
+    expect(await page.textContent('.asset-import-relative')).toMatch(
+      cssBgAssetMatch
+    )
+  })
+
+  test('absolute', async () => {
+    expect(await page.textContent('.asset-import-absolute')).toMatch(
+      cssBgAssetMatch
+    )
+  })
+
+  test('from /public', async () => {
+    expect(await page.textContent('.public-import')).toMatch(
+      absolutePublicIconMatch
+    )
+  })
+})
+
+describe('css url() references', () => {
+  test('fonts', async () => {
+    expect(
+      await page.evaluate(() => {
+        return (document as any).fonts.check('700 32px Inter')
+      })
+    ).toBe(true)
+  })
+
+  test('relative', async () => {
+    const bg = await getBg('.css-url-relative')
+    expect(bg).toMatch(cssBgAssetMatch)
+  })
+
+  test('image-set relative', async () => {
+    const imageSet = await getBg('.css-image-set-relative')
+    imageSet.split(', ').forEach((s) => {
+      expect(s).toMatch(cssBgAssetMatch)
+    })
+  })
+
+  test('image-set without the url() call', async () => {
+    const imageSet = await getBg('.css-image-set-without-url-call')
+    imageSet.split(', ').forEach((s) => {
+      expect(s).toMatch(cssBgAssetMatch)
+    })
+  })
+
+  test('image-set with var', async () => {
+    const imageSet = await getBg('.css-image-set-with-var')
+    imageSet.split(', ').forEach((s) => {
+      expect(s).toMatch(cssBgAssetMatch)
+    })
+  })
+
+  test('image-set with mix', async () => {
+    const imageSet = await getBg('.css-image-set-mix-url-var')
+    imageSet.split(', ').forEach((s) => {
+      expect(s).toMatch(cssBgAssetMatch)
+    })
+  })
+
+  test('relative in @import', async () => {
+    expect(await getBg('.css-url-relative-at-imported')).toMatch(
+      cssBgAssetMatch
+    )
+  })
+
+  test('absolute', async () => {
+    expect(await getBg('.css-url-absolute')).toMatch(cssBgAssetMatch)
+  })
+
+  test('from /public', async () => {
+    expect(await getBg('.css-url-public')).toMatch(iconMatch)
+  })
+
+  test('multiple urls on the same line', async () => {
+    const bg = await getBg('.css-url-same-line')
+    expect(bg).toMatch(cssBgAssetMatch)
+    expect(bg).toMatch(iconMatch)
+  })
+
+  test('aliased', async () => {
+    const bg = await getBg('.css-url-aliased')
+    expect(bg).toMatch(cssBgAssetMatch)
+  })
+})
+
+describe.runIf(isBuild)('index.css URLs', () => {
+  let css: string
+  beforeAll(() => {
+    css = findAssetFile(/index.*\.css$/, '', 'other-assets')
+  })
+
+  test('relative asset URL', () => {
+    expect(css).toMatch(`./asset.`)
+  })
+
+  test('preserve postfix query/hash', () => {
+    expect(css).toMatch(`woff2?#iefix`)
+  })
+})
+
+describe('image', () => {
+  test('srcset', async () => {
+    const img = await page.$('.img-src-set')
+    const srcset = await img.getAttribute('srcset')
+    srcset.split(', ').forEach((s) => {
+      expect(s).toMatch(
+        isBuild
+          ? /other-assets\/asset\.\w{8}\.png \d{1}x/
+          : /\.\/nested\/asset\.png \d{1}x/
+      )
+    })
+  })
+})
+
+describe('svg fragments', () => {
+  // 404 is checked already, so here we just ensure the urls end with #fragment
+  test('img url', async () => {
+    const img = await page.$('.svg-frag-img')
+    expect(await img.getAttribute('src')).toMatch(/svg#icon-clock-view$/)
+  })
+
+  test('via css url()', async () => {
+    const bg = await page.evaluate(() => {
+      return getComputedStyle(document.querySelector('.icon')).backgroundImage
+    })
+    expect(bg).toMatch(/svg#icon-clock-view"\)$/)
+  })
+
+  test('from js import', async () => {
+    const img = await page.$('.svg-frag-import')
+    expect(await img.getAttribute('src')).toMatch(/svg#icon-heart-view$/)
+  })
+})
+
+test('?raw import', async () => {
+  expect(await page.textContent('.raw')).toMatch('SVG')
+})
+
+test('?url import', async () => {
+  expect(await page.textContent('.url')).toMatch(
+    isBuild ? /http.*\/other-assets\/foo\.\w{8}\.js/ : `/foo.js`
+  )
+})
+
+test('?url import on css', async () => {
+  const txt = await page.textContent('.url-css')
+  expect(txt).toMatch(
+    isBuild ? /http.*\/other-assets\/icons\.\w{8}\.css/ : '/css/icons.css'
+  )
+})
+
+test('new URL(..., import.meta.url)', async () => {
+  expect(await page.textContent('.import-meta-url')).toMatch(absoluteAssetMatch)
+})
+
+test('new URL(`${dynamic}`, import.meta.url)', async () => {
+  const dynamic1 = await page.textContent('.dynamic-import-meta-url-1')
+  expect(dynamic1).toMatch(absoluteIconMatch)
+  const dynamic2 = await page.textContent('.dynamic-import-meta-url-2')
+  expect(dynamic2).toMatch(absoluteAssetMatch)
+})
+
+test('new URL(`non-existent`, import.meta.url)', async () => {
+  expect(await page.textContent('.non-existent-import-meta-url')).toMatch(
+    '/non-existent'
+  )
+})
+
+test('inline style test', async () => {
+  expect(await getBg('.inline-style')).toMatch(cssBgAssetMatch)
+  expect(await getBg('.style-url-assets')).toMatch(cssBgAssetMatch)
+})
+
+test('html import word boundary', async () => {
+  expect(await page.textContent('.obj-import-express')).toMatch(
+    'ignore object import prop'
+  )
+  expect(await page.textContent('.string-import-express')).toMatch('no load')
+})
+
+test('relative path in html asset', async () => {
+  expect(await page.textContent('.relative-js')).toMatch('hello')
+  expect(await getColor('.relative-css')).toMatch('red')
+})
diff --git a/playground/assets/__tests__/relative-base/vite.config.js b/playground/assets/__tests__/relative-base/vite.config.js
new file mode 100644
index 00000000000000..6837b8ef975a3d
--- /dev/null
+++ b/playground/assets/__tests__/relative-base/vite.config.js
@@ -0,0 +1 @@
+module.exports = require('../../vite.config-relative-base')
diff --git "a/playground/assets/nested/\343\203\206\343\202\271\343\203\210-\346\270\254\350\251\246-white space.png" "b/playground/assets/nested/\343\203\206\343\202\271\343\203\210-\346\270\254\350\251\246-white space.png"
index 4388bfdca3d4d778d2f25a5861599f8f19a1177c..a8d1e52510c41ceeaf3515ee2f594a82557d1685 100644
GIT binary patch
literal 4986
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
b37?V{t|cgkE9S{uec08Nb(D$~%%1%R{RRHc

literal 3395
zcmaJ^dpy(o8y`aCQb$M{Gf69KbDPa&mJzw-a@=pT&3zZ!m|LaXQi-Stqav};(cC3M
zM}?d^vCOT0I;N7*N=fvaPM!1n<NVI|_4<B4pXYf!@Avb5F8_S954#+cm)$7~00872
z?6K~m(?awbZ<Z2$M{oLTiVih~tq;S462@TSXhZ;pKnW#+97wouqB{{sNQ`|z6d@$E
zBRzc>KF&@kJcVR{+lVnpAW=nV5g|H(io-_}8K6*NcqG{pEa>P0gCYr*U~dy=m^0Oe
z7!hfoL?e16xp?A}qVY%q7;OczNI;1QNJIt>lt79h(@_bQ;BUMr(S5@W1%tkYFrqEN
ze~R*PJ`A#<(1;)t15<rG+{g@sKpMbJkY<L)dLTm>+!P8!LgB{xFgOZ^M8V*o?+;j%
zjYbGVxnu3V=Mq_#;0OkTih@F!Or`<T$bdo%hr*FaBot-{H8j*0Md;HL$qZbAKAEol
zg8@sV<7tspMkIv{+F-<mQsNkvV3E>4OCV95o&O>x)4w-L)G}xSjtYevz@Q}3MqS^c
z=?r(`-!lF&n(moMB|_babV?izFPcY~_7AYAcmJMfBT%FUg{9!*NJKKj0c!~sc?<}V
z1e6KP(DZ<b9mWh{djJl%#b7WthFFA&kuluP4q<|@{eg8L(-}B2p7;YB`8O8%uUM1~
zjfi7VXr2^G%#Z0Ej-W6o^au(SWMc!`>x{!kk~eI~MsL4MCDJ0}i3B?ug#`N698}~#
z2*4l^2$-pjof!hNA>QZ!0*1A<g&BSG!VQhU-?4;$DEv<>7WRL!P>~qu#$^9z(m!0H
z_1U=owYMVUugxctMe9xz?e+DZ*aiSVrr80D@l4=N_`ae9j3}c&b|M6c^Scw&#v42`
zs@=W24^$JB&ZnFHq$6hgI?L<)7qPYdpMFDMm5r*2NZZ#;hNLU%;UMB}lBX&zgLa?a
z^q;(Rv!#SE3*p7_>9&tfp}FA;>iv!v_p|!wd;>mn_^936qi>ng*>kFww|a^}qJTRK
znA`1@E!Y|;+Yc3d2h!d=ZZPN&V<0ppw;;&<bxFu=0dze<Ah_VJ%nExNyVv%icZzE;
zt?J!4flUK&Dm)k2bqAG3iG`t0jNrD(b~PWlB@Vg}D_xdLxYVk({BP#~UsJ?C>qMLk
zs8GnX$?aj;Y<GQ>SC%6t7ryd|Y^9Qc9F|ZTi%4o)Pe;3_TsRPSb<*4*B>QW0CG(vI
z>y^yW0M4}!mMf3!4z1fO+L~w1pRfz#LUd11)b_hvE5tyLhoKw+{E?+obcpiN*0LU8
z+U$wi{2kPnH5r4PMp&T>SNDmqNn*??;K@i|?J!$E9U15d+24QdeF^V4qsj`m?4KR1
zo+530cOpA+R_oI`YVpGHn|g}#XF^ggiIq#Q$r!(y$dA${=6vmyc6@muL~LaHK9;_U
zM6ianv&69LoqCIN7iY5Nk~w}(YQ_@J^_HeBva+0R_9?+f_e~4spT$RYhq*aCNMrO$
zANmbE3u(ID)?XQ7A$ZW2RXgnhnaPNg>o$T&swba`imtoDTfX-ox*^fNY~&|)r*EP9
zDjZoQYgH3!&1P!g6r^)r`PMo_8VTHjZZPV`=6oa69GQI3%5zMi(iWaa;uA~o4%J^)
zTvx7E_z4|v`9%k4yvRr!>a=q&CRMXs)EtsGU0BaC=tm1rZCwe$9zABiZcVuVM#f_O
zEcY<x0X*u3+Lz3PnA$5Lj?e{-%qm=cX0j3M`lExJ)SJXJ@mG$e8MIaox|RlJJIH@L
zJUkVP_x|$EZc^phts{xmdyAZ<aW`}E%VcfLv{8_+WZ2r|7of#kkkj+mz%2^|ofE3F
zotCS=+RJAG%1`b?J`URIq{|ZvgLjH0-GvZm8pO6L=%yE*Y3{w~^DwqK@A2$nos#1~
zj^*Ve-otLozcvO;OY`u+z>-xE#-a$$qK0SptY*~;s&%&{MxjMyzUJK)Ro2HOShN#i
zdmd(sJrh3Lv2smAU0Uf)tzU1B4BTO~oK-hJav|YH;*QbtQMXN4?1g)YYj*9zWn;WS
zf1=g6CNYN>p%StDbcLOA=ocrq)8-NU#|p81bRF3}y8w-f<_em-45$3L1@~e-{F^+_
zxkl==Ne8Vus0W)|3%}tC9-OE+5bT+_6f|Q*jZeS-JXh8E3%`TziByq04bJ6a1d7>H
z;RYj*F8l4WsVG<Q_@#z>R4UERkbN(jGxSrPD|EDl*hJV;*`c%6d`F)1W~@pz_2+lh
zX8Y6jap-cIJ8qTxvL@N3GJ-7LiuUjog<%wMNATus+JP&V$uD}fv7BWwUYMmGCIMGj
z<e&fhh3ok@qg<D!Jufde->{8~4f?dWx0LX>Y-qi=!s6hE7+ubMW78h!`|R=KV%8FK
zd9Sek(lv`S^5+9xYR`{X>yATq2OfeBt(}qyYA3{aLq|2d#^vB$R4#D)8lf9t!Y;+P
z_6W7^{$}!gg?;4KjI39niyeEj#~ble%M>uw{nu#b`CHdh{gg9q+d8BrP^@~lDBI@d
z7PMHwiV3pH(=wk3x<4;S!E(K=DJ>2!RAm*jrN_O@8jfGh%FKDK2Jufl-PsHs+4lH9
zDVKmh4;9;;<n$!3o<m<Zoo~xh2?~zYe<)!g|5<g;gD*4aIFea2_c&*>mTf^PV;hRc
zGZ1`0sMNGF2Q#}5#R#bM)tW_A=dSME$5(a2i}Ihk4u>_zBv%vI*myG)hHABMyPQj@
zM)WDfPOZ2LDPxwQFP3s9qT2x$(n(71$z;Qxd;tB$vX<;ZX<>Nsq(dQ>mhaX*MIFCf
zb0p{bXj}2S`bD#rpHdTdNv!#{OR);Jsq8JJ*l1;(96~iudG#aZgj0Qo3WuL}YVZek
z(SM)#(x7!4_(saUC6(W&b$isUNe3O4T~w_02Y#{Bs)T0h-r|>RiXN`FZb$o39EXiL
z*RJ#X)VH`&nA(%q0JE_w3>ZQUex|DOv-oS<qFb+UVW;26UmlD1jdOb)3k*n!nMgMa
zd=Mj9MJqUy)}vl$9OA|LSb3+Gd3LCbB;BAtg*e&BAqZdi@vJIB<4kdSS0cDD<pm%t
zc}31@V1%d?G(|7w83GU;($aixArM&9Fga*HsChO9${u4KeqG$CRBc!q2oMBe>u#vm
zNS0_maoG$tauoZ;v)jT-<zsMsb6Q?_c;PnJE{WWZ=)OL;1)rkNK7k#V-g?E_Y;S8t
zcr})Fmd!Si9`^M1I}+EE0Q8YnC(gl_wZ5(T9%*c{CbnoFZ)ZC$8iyZm(1)i9mfc!M
zyllMv>lc=;EaufphG>)@S1@N~a5rr)*{bw*r-?o*rX6>8&zHcc*`CR~1#1jSw~d|R
zwXi;)w4*Di+agG^bKz87RbPQwK<lwo@t5~@Mpm4ASxOq;zMu~4i+0MtN;l$g{~-HC
zcL&=es1GOKYyVE2Id%Qh{T+#G_InLX?Kwvj)1M0GiezwA5Z%db{YClaU9H<v6K_N1
z$xKLZnW~x(Rh3;c*(;^TzpvGEcrh&wJAZe^SWxe@kaP?w2UT4}My8c95VFNNEraV(
z4K)#+2>!stmYMB_=wK@dlhtu9wFD@&T*Rq=*u7gj@78PR;rI9VW}r3UUH0!vA30jS
z9UC??hXtMukpyu2>X*~v8;@W;`1_RbZHs(`$_8)1P;u9mwi4Rc0`sT=V!Y1o!I{Qq
zTuHw3d^RR%uB5r{Ro1<>F8RPbj_b`$75gQNggjNu*H}~8;-HRVpN?w*H+KzOf}(^U
z)d8)S!qI%E&Bf@3i1yh^Px1-jguC#MCUGbC&Rv0bg=h2Ms1B6?sLoFXEM>DdK;(^h
zBZ=9iZF8CfgvLGLDUDAC>!hByzwDss&zxy_dFFE+ps2snc=RE+p+zrQ*E_9YM0{{Y
z!fhZyCOLFWcsB~(RGiu+Zuz#hisx<PIxyw001H={*uQQ*M^k+R9pK?_eY_|!@xJ*O
z;K<ZH-Y}6wGEws*b(eYo3;U)&XmcBDkuH;rMsjHP&=R*)ZoazK_d|nMYS-@7g8P?D
zr&;F&cW$!)!sq2iiY=GWdee{JN`1;tHMgQHv<?Qg1I2`&pmQsU<>iIQ_CT@V-K)JH
skXH~y@{pZ%H2RLzTI|$xG-@5%4N!D?9MV?={PtVpVC#adKM-=_zfn5szW@LL

diff --git a/playground/assets/package.json b/playground/assets/package.json
index c591a432bbaf7d..7af81c1bd61c2d 100644
--- a/playground/assets/package.json
+++ b/playground/assets/package.json
@@ -7,8 +7,8 @@
     "build": "vite build",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
     "preview": "vite preview",
-    "dev:portable": "vite --config ./vite.config-portable.js dev",
-    "build:portable": "vite --config ./vite.config-portable.js build",
-    "preview:portable": "vite --config ./vite.config-portable.js preview"
+    "dev:relative-base": "vite --config ./vite.config-relative-base.js dev",
+    "build:relative-base": "vite --config ./vite.config-relative-base.js build",
+    "preview:relative-base": "vite --config ./vite.config-relative-base.js preview"
   }
 }
diff --git a/playground/assets/vite.config-portable.js b/playground/assets/vite.config-portable.js
deleted file mode 100644
index dbfa9f6dee5ee0..00000000000000
--- a/playground/assets/vite.config-portable.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * @type {import('vite').UserConfig}
- */
-
-const baseConfig = require('./vite.config.js')
-module.exports = {
-  ...baseConfig,
-  base: './', // relative base to make dist portable
-  build: {
-    ...baseConfig.build,
-    outDir: 'dist',
-    watch: false
-  }
-}
diff --git a/playground/assets/vite.config-relative-base.js b/playground/assets/vite.config-relative-base.js
new file mode 100644
index 00000000000000..ba624964d3e0e3
--- /dev/null
+++ b/playground/assets/vite.config-relative-base.js
@@ -0,0 +1,23 @@
+/**
+ * @type {import('vite').UserConfig}
+ */
+
+const baseConfig = require('./vite.config.js')
+module.exports = {
+  ...baseConfig,
+  base: './', // relative base to make dist portable
+  build: {
+    ...baseConfig.build,
+    outDir: 'dist',
+    watch: false,
+    minify: false,
+    assetsInlineLimit: 0,
+    rollupOptions: {
+      output: {
+        entryFileNames: 'entries/[name].js',
+        chunkFileNames: 'chunks/[name].[hash].js',
+        assetFileNames: 'other-assets/[name].[hash][extname]'
+      }
+    }
+  }
+}
diff --git a/playground/test-utils.ts b/playground/test-utils.ts
index 987ecb5e950a23..58648e14657e84 100644
--- a/playground/test-utils.ts
+++ b/playground/test-utils.ts
@@ -114,8 +114,12 @@ export function listAssets(base = ''): string[] {
   return fs.readdirSync(assetsDir)
 }
 
-export function findAssetFile(match: string | RegExp, base = ''): string {
-  const assetsDir = path.join(testDir, 'dist', base, 'assets')
+export function findAssetFile(
+  match: string | RegExp,
+  base = '',
+  assets = 'assets'
+): string {
+  const assetsDir = path.join(testDir, 'dist', base, assets)
   const files = fs.readdirSync(assetsDir)
   const file = files.find((file) => {
     return file.match(match)

From 96bc8c5629dc9dba593163138b8ba68e5efde85f Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 10:24:41 +0200
Subject: [PATCH 25/33] test: fix serve

---
 .../__tests__/relative-base/relative-base-assets.spec.ts      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts b/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts
index f7b0d89b3b3a85..a09116c88a7ea6 100644
--- a/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts
+++ b/playground/assets/__tests__/relative-base/relative-base-assets.spec.ts
@@ -18,7 +18,9 @@ const cssBgAssetMatch = absoluteAssetMatch
 
 const iconMatch = `/icon.png`
 
-const absoluteIconMatch = isBuild ? /http.*\/icon\.\w{8}\.png/ : './icon.png'
+const absoluteIconMatch = isBuild
+  ? /http.*\/icon\.\w{8}\.png/
+  : '/nested/icon.png'
 
 const absolutePublicIconMatch = isBuild ? /http.*\/icon\.png/ : '/icon.png'
 

From 8afe78e4dacf360f27138110e0a2b4defb05f8ca Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 11:29:13 +0200
Subject: [PATCH 26/33] test: bump assetsInlineLimit to 8kb

---
 playground/assets/vite.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/playground/assets/vite.config.js b/playground/assets/vite.config.js
index 1ecd3318627521..e44ddda7995185 100644
--- a/playground/assets/vite.config.js
+++ b/playground/assets/vite.config.js
@@ -13,6 +13,7 @@ module.exports = {
   },
   build: {
     outDir: 'dist/foo',
+    assetsInlineLimit: 8192, // 8kb
     manifest: true,
     watch: {}
   }

From 3a09a2c9b0c9838803e7f076c9a13b851800d4ca Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 11:52:47 +0200
Subject: [PATCH 27/33] chore: improve asset paths in CSS handling

---
 packages/vite/src/node/plugins/css.ts | 98 +++++++++++----------------
 1 file changed, 38 insertions(+), 60 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 5f5f891f838f8c..e37b6e157c1efe 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -293,16 +293,16 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
   const relativeBase = isRelativeBase(config.base)
 
   // TODO: Could we call assetFileNames here with dummy info to know in what
-  // directory this asset to support the functional form?
+  // directory the CSS assets are emitted to support the functional form
+  // without assuming that build.assetsDir is correct in this case
   const { rollupOptions } = config.build
   const assetFileNames = (
     Array.isArray(rollupOptions) ? rollupOptions[0] : rollupOptions
   )?.assetFileNames
-  const cssDir =
+  const cssAssetsDir =
     typeof assetFileNames === 'string'
       ? path.dirname(assetFileNames)
       : config.build.assetsDir
-  const relativePathToPublicFromCSS = path.relative(cssDir, '')
 
   return {
     name: 'vite:css-post',
@@ -436,38 +436,37 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         return null
       }
 
-      // resolve asset URL placeholders to their built file URLs and perform
-      // minification if necessary
-      const processChunkCSS = async (
-        css: string,
-        {
-          inlined,
-          minify
-        }: {
-          inlined: boolean
-          minify: boolean
-        }
-      ) => {
+      const publicAssetUrlMap = publicAssetUrlCache.get(config)!
+
+      // resolve asset URL placeholders to their built file URLs
+      // TODO: We can lift assumptions about where CSS assets are emitted if we pass
+      // to this function the cssAssetFilename instead of the cssAssetsDir. Adding
+      // the parameter explicitily now as a step in that direction
+      function resolveAssetUrlsInCss(chunkCSS: string, cssAssetsDir: string) {
         // replace asset url references with resolved url.
-        css = css.replace(assetUrlRE, (_, fileHash, postfix = '') => {
+        chunkCSS = chunkCSS.replace(assetUrlRE, (_, fileHash, postfix = '') => {
           const filename = getAssetFilename(fileHash, config) + postfix
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
-          // TODO: inlined with relative base, should it use import.meta.url?
-          if (inlined || !relativeBase) {
-            // absolute base or relative base but inlined (injected as style tag into
-            // index.html) use the base as-is
+          if (relativeBase) {
+            // relative base + extracted CSS
+            return path.relative(cssAssetsDir, filename)
+          } else {
+            // absolute base
             return config.base + filename
           }
-          // relative base + extracted CSS - asset file will be in the same dir
-          return `./${path.posix.basename(filename)}`
         })
-        // only external @imports and @charset should exist at this point
-        css = await finalizeCss(css, minify, config)
-        return css
+        // resolve public URL from CSS paths
+        if (relativeBase) {
+          const relativePathToPublicFromCSS = path.relative(cssAssetsDir, '')
+          chunkCSS = chunkCSS.replace(
+            publicAssetUrlRE,
+            (_, hash) =>
+              relativePathToPublicFromCSS + publicAssetUrlMap.get(hash)!
+          )
+        }
+        return chunkCSS
       }
 
-      const publicAssetUrlMap = publicAssetUrlCache.get(config)!
-
       if (config.build.cssCodeSplit) {
         if (isPureCssChunk) {
           // this is a shared CSS-only chunk that is empty.
@@ -478,18 +477,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           opts.format === 'cjs' ||
           opts.format === 'system'
         ) {
-          chunkCSS = await processChunkCSS(chunkCSS, {
-            inlined: false,
-            minify: true
-          })
-          // resolve public URL from CSS paths
-          if (relativeBase) {
-            chunkCSS = chunkCSS.replace(
-              publicAssetUrlRE,
-              (_, hash) =>
-                relativePathToPublicFromCSS + publicAssetUrlMap.get(hash)!
-            )
-          }
+          chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetsDir)
+          chunkCSS = await finalizeCss(chunkCSS, true, config)
+
           // emit corresponding css file
           const fileHandle = this.emitFile({
             name: chunk.name + '.css',
@@ -498,18 +488,17 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           })
           chunk.viteMetadata.importedCss.add(this.getFileName(fileHandle))
         } else if (!config.build.ssr) {
-          // legacy build, inline css
-          chunkCSS = await processChunkCSS(chunkCSS, {
-            inlined: true,
-            minify: true
-          })
+          // legacy build and inline css
+
+          // __VITE_ASSET__ and __VITE_PUBLIC_ASSET__ urls are processed by
+          // the vite:asset plugin, don't call resolveAssetUrlsInCss here
+          chunkCSS = await finalizeCss(chunkCSS, true, config)
+
           const style = `__vite_style__`
           const injectCode =
             `var ${style} = document.createElement('style');` +
             `${style}.innerHTML = ${JSON.stringify(chunkCSS)};` +
             `document.head.appendChild(${style});`
-          // __VITE_ASSET__ and __VITE_PUBLIC_ASSET__ urls are processed by
-          // the vite:asset plugin
           if (config.build.sourcemap) {
             const s = new MagicString(code)
             s.prepend(injectCode)
@@ -523,11 +512,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           }
         }
       } else {
-        // non-split extracted CSS will be minified together
-        chunkCSS = await processChunkCSS(chunkCSS, {
-          inlined: false,
-          minify: false
-        })
+        chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetsDir)
+        // finalizeCss is called for the aggregated chunk in generateBundle
+
         outputToExtractedCSSMap.set(
           opts,
           (outputToExtractedCSSMap.get(opts) || '') + chunkCSS
@@ -590,15 +577,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       if (extractedCss && !hasEmitted) {
         hasEmitted = true
         extractedCss = await finalizeCss(extractedCss, true, config)
-        // resolve public URL from CSS paths
-        if (isRelativeBase(config.base)) {
-          const publicAssetUrlMap = publicAssetUrlCache.get(config)!
-          extractedCss = extractedCss.replace(
-            publicAssetUrlRE,
-            (_, hash) =>
-              relativePathToPublicFromCSS + publicAssetUrlMap.get(hash)!
-          )
-        }
         this.emitFile({
           name: 'style.css',
           type: 'asset',

From 79240a7b213e1de24fe26c31b8a6f49a1957f79e Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 12:46:38 +0200
Subject: [PATCH 28/33] fix: relative CSS path

---
 packages/vite/src/node/plugins/css.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index e37b6e157c1efe..44851a0ad79a95 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -295,9 +295,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
   // TODO: Could we call assetFileNames here with dummy info to know in what
   // directory the CSS assets are emitted to support the functional form
   // without assuming that build.assetsDir is correct in this case
-  const { rollupOptions } = config.build
+  const rollupOptionsOutput = config.build.rollupOptions.output
   const assetFileNames = (
-    Array.isArray(rollupOptions) ? rollupOptions[0] : rollupOptions
+    Array.isArray(rollupOptionsOutput)
+      ? rollupOptionsOutput[0]
+      : rollupOptionsOutput
   )?.assetFileNames
   const cssAssetsDir =
     typeof assetFileNames === 'string'
@@ -449,7 +451,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
           if (relativeBase) {
             // relative base + extracted CSS
-            return path.relative(cssAssetsDir, filename)
+            const relativePath = path.relative(cssAssetsDir, filename)
+            return relativePath.startsWith('.')
+              ? relativePath
+              : './' + relativePath
           } else {
             // absolute base
             return config.base + filename

From 46c15af47285e143196ac1b1d182375d207dadf4 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 13:05:26 +0200
Subject: [PATCH 29/33] feat: support assetFileNames functional form

---
 packages/vite/src/node/plugins/css.ts | 47 +++++++++++++++++----------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 44851a0ad79a95..b031f3c7b0bb2b 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -109,6 +109,8 @@ const inlineCSSRE = /(\?|&)inline-css\b/
 const usedRE = /(\?|&)used\b/
 const varRE = /^var\(/i
 
+const cssBundleName = 'style.css'
+
 const enum PreprocessLang {
   less = 'less',
   sass = 'sass',
@@ -292,19 +294,27 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
   const relativeBase = isRelativeBase(config.base)
 
-  // TODO: Could we call assetFileNames here with dummy info to know in what
-  // directory the CSS assets are emitted to support the functional form
-  // without assuming that build.assetsDir is correct in this case
   const rollupOptionsOutput = config.build.rollupOptions.output
   const assetFileNames = (
     Array.isArray(rollupOptionsOutput)
       ? rollupOptionsOutput[0]
       : rollupOptionsOutput
   )?.assetFileNames
-  const cssAssetsDir =
-    typeof assetFileNames === 'string'
-      ? path.dirname(assetFileNames)
-      : config.build.assetsDir
+  const getCssAssetsDir = (cssAssetName: string) => {
+    if (!assetFileNames) {
+      return config.build.assetsDir
+    } else if (typeof assetFileNames === 'string') {
+      return path.dirname(assetFileNames)
+    } else {
+      return path.dirname(
+        assetFileNames({
+          name: cssAssetName,
+          type: 'asset',
+          source: '/* vite internal call, ignore */'
+        })
+      )
+    }
+  }
 
   return {
     name: 'vite:css-post',
@@ -441,17 +451,18 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       const publicAssetUrlMap = publicAssetUrlCache.get(config)!
 
       // resolve asset URL placeholders to their built file URLs
-      // TODO: We can lift assumptions about where CSS assets are emitted if we pass
-      // to this function the cssAssetFilename instead of the cssAssetsDir. Adding
-      // the parameter explicitily now as a step in that direction
-      function resolveAssetUrlsInCss(chunkCSS: string, cssAssetsDir: string) {
+      function resolveAssetUrlsInCss(chunkCSS: string, cssAssetName: string) {
+        const cssAssetsDir = relativeBase
+          ? getCssAssetsDir(cssAssetName)
+          : undefined
+
         // replace asset url references with resolved url.
         chunkCSS = chunkCSS.replace(assetUrlRE, (_, fileHash, postfix = '') => {
           const filename = getAssetFilename(fileHash, config) + postfix
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
           if (relativeBase) {
             // relative base + extracted CSS
-            const relativePath = path.relative(cssAssetsDir, filename)
+            const relativePath = path.relative(cssAssetsDir!, filename)
             return relativePath.startsWith('.')
               ? relativePath
               : './' + relativePath
@@ -462,7 +473,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         })
         // resolve public URL from CSS paths
         if (relativeBase) {
-          const relativePathToPublicFromCSS = path.relative(cssAssetsDir, '')
+          const relativePathToPublicFromCSS = path.relative(cssAssetsDir!, '')
           chunkCSS = chunkCSS.replace(
             publicAssetUrlRE,
             (_, hash) =>
@@ -482,12 +493,14 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           opts.format === 'cjs' ||
           opts.format === 'system'
         ) {
-          chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetsDir)
+          const cssAssetName = chunk.name + '.css'
+
+          chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName)
           chunkCSS = await finalizeCss(chunkCSS, true, config)
 
           // emit corresponding css file
           const fileHandle = this.emitFile({
-            name: chunk.name + '.css',
+            name: cssAssetName,
             type: 'asset',
             source: chunkCSS
           })
@@ -517,7 +530,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           }
         }
       } else {
-        chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetsDir)
+        chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssBundleName)
         // finalizeCss is called for the aggregated chunk in generateBundle
 
         outputToExtractedCSSMap.set(
@@ -583,7 +596,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         hasEmitted = true
         extractedCss = await finalizeCss(extractedCss, true, config)
         this.emitFile({
-          name: 'style.css',
+          name: cssBundleName,
           type: 'asset',
           source: extractedCss
         })

From 762935217850ca02c9ae410dfa58f285b1d7177f Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 13:26:34 +0200
Subject: [PATCH 30/33] chore: naming

---
 packages/vite/src/node/plugins/css.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index b031f3c7b0bb2b..2dae3a92a173dc 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -300,7 +300,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       ? rollupOptionsOutput[0]
       : rollupOptionsOutput
   )?.assetFileNames
-  const getCssAssetsDir = (cssAssetName: string) => {
+  const getCssAssetDirname = (cssAssetName: string) => {
     if (!assetFileNames) {
       return config.build.assetsDir
     } else if (typeof assetFileNames === 'string') {
@@ -452,8 +452,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
       // resolve asset URL placeholders to their built file URLs
       function resolveAssetUrlsInCss(chunkCSS: string, cssAssetName: string) {
-        const cssAssetsDir = relativeBase
-          ? getCssAssetsDir(cssAssetName)
+        const cssAssetDirname = relativeBase
+          ? getCssAssetDirname(cssAssetName)
           : undefined
 
         // replace asset url references with resolved url.
@@ -462,7 +462,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
           if (relativeBase) {
             // relative base + extracted CSS
-            const relativePath = path.relative(cssAssetsDir!, filename)
+            const relativePath = path.relative(cssAssetDirname!, filename)
             return relativePath.startsWith('.')
               ? relativePath
               : './' + relativePath
@@ -473,7 +473,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         })
         // resolve public URL from CSS paths
         if (relativeBase) {
-          const relativePathToPublicFromCSS = path.relative(cssAssetsDir!, '')
+          const relativePathToPublicFromCSS = path.relative(
+            cssAssetDirname!,
+            ''
+          )
           chunkCSS = chunkCSS.replace(
             publicAssetUrlRE,
             (_, hash) =>

From f785bed5d2d6c5726dd329f48f6744c415c7e6d0 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 23:26:26 +0200
Subject: [PATCH 31/33] test: worker with relative base

---
 packages/vite/src/node/plugins/worker.ts      |   7 +-
 .../relative-base-worker.spec.ts              | 127 ++++++++++++++++++
 .../__tests__/relative-base/vite.config.js    |   1 +
 playground/worker/classic-shared-worker.js    |   5 +-
 playground/worker/classic-worker.js           |   5 +-
 playground/worker/package.json                |   3 +
 .../worker/vite.config-relative-base.js       |  42 ++++++
 7 files changed, 186 insertions(+), 4 deletions(-)
 create mode 100644 playground/worker/__tests__/relative-base/relative-base-worker.spec.ts
 create mode 100644 playground/worker/__tests__/relative-base/vite.config.js
 create mode 100644 playground/worker/vite.config-relative-base.js

diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 8ff0963d321692..7b321828341c6d 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -156,7 +156,7 @@ function encodeWorkerAssetFileName(
 ): string {
   const { fileNameHash } = workerCache
   const hash = getHash(fileName)
-  if (!fileNameHash.get(fileName)) {
+  if (!fileNameHash.get(hash)) {
     fileNameHash.set(hash, fileName)
   }
   return `__VITE_WORKER_ASSET__${hash}__`
@@ -297,10 +297,13 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
         while ((match = workerAssetUrlRE.exec(code))) {
           const [full, hash] = match
           const filename = fileNameHash.get(hash)!
-          const outputFilepath = path.relative(
+          let outputFilepath = path.relative(
             path.dirname(chunk.fileName),
             filename
           )
+          if (!outputFilepath.startsWith('.')) {
+            outputFilepath = './' + outputFilepath
+          }
           const replacement = JSON.stringify(outputFilepath).slice(1, -1)
           s.overwrite(match.index, match.index + full.length, replacement, {
             contentOnly: true
diff --git a/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts b/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts
new file mode 100644
index 00000000000000..ff633f66b05ea2
--- /dev/null
+++ b/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts
@@ -0,0 +1,127 @@
+import fs from 'fs'
+import path from 'path'
+import type { Page } from 'playwright-chromium'
+import { isBuild, page, testDir, untilUpdated } from '~utils'
+
+test('normal', async () => {
+  await page.click('.ping')
+  await untilUpdated(() => page.textContent('.pong'), 'pong')
+  await untilUpdated(
+    () => page.textContent('.mode'),
+    isBuild ? 'production' : 'development'
+  )
+  await untilUpdated(
+    () => page.textContent('.bundle-with-plugin'),
+    'worker bundle with plugin success!'
+  )
+})
+
+test('TS output', async () => {
+  await page.click('.ping-ts-output')
+  await untilUpdated(() => page.textContent('.pong-ts-output'), 'pong')
+})
+
+test('inlined', async () => {
+  await page.click('.ping-inline')
+  await untilUpdated(() => page.textContent('.pong-inline'), 'pong')
+})
+
+const waitSharedWorkerTick = (
+  (resolvedSharedWorkerCount: number) => async (page: Page) => {
+    await untilUpdated(async () => {
+      const count = await page.textContent('.tick-count')
+      // ignore the initial 0
+      return count === '1' ? 'page loaded' : ''
+    }, 'page loaded')
+    // test.concurrent sequential is not guaranteed
+    // force page to wait to ensure two pages overlap in time
+    resolvedSharedWorkerCount++
+    if (resolvedSharedWorkerCount < 2) return
+
+    await untilUpdated(() => {
+      return resolvedSharedWorkerCount === 2 ? 'all pages loaded' : ''
+    }, 'all pages loaded')
+  }
+)(0)
+
+test.each([[true], [false]])('shared worker', async (doTick) => {
+  if (doTick) {
+    await page.click('.tick-shared')
+  }
+  await waitSharedWorkerTick(page)
+})
+
+test('worker emitted and import.meta.url in nested worker (serve)', async () => {
+  expect(await page.textContent('.nested-worker')).toMatch(
+    'worker-nested-worker'
+  )
+  expect(await page.textContent('.nested-worker-module')).toMatch('sub-worker')
+  expect(await page.textContent('.nested-worker-constructor')).toMatch(
+    '"type":"constructor"'
+  )
+})
+
+describe.runIf(isBuild)('build', () => {
+  // assert correct files
+  test('inlined code generation', async () => {
+    const chunksDir = path.resolve(testDir, 'dist/chunks')
+    const files = fs.readdirSync(chunksDir)
+    const index = files.find((f) => f.includes('main-module'))
+    const content = fs.readFileSync(path.resolve(chunksDir, index), 'utf-8')
+    const workerEntriesDir = path.resolve(testDir, 'dist/worker-entries')
+    const workerFiles = fs.readdirSync(workerEntriesDir)
+    const worker = workerFiles.find((f) => f.includes('worker_entry.my-worker'))
+    const workerContent = fs.readFileSync(
+      path.resolve(workerEntriesDir, worker),
+      'utf-8'
+    )
+
+    // worker should have all imports resolved and no exports
+    expect(workerContent).not.toMatch(`import`)
+    expect(workerContent).not.toMatch(`export`)
+    // chunk
+    expect(content).toMatch(`new Worker("../worker-entries/`)
+    expect(content).toMatch(`new SharedWorker("../worker-entries/`)
+    // inlined
+    expect(content).toMatch(`(window.URL||window.webkitURL).createObjectURL`)
+    expect(content).toMatch(`window.Blob`)
+  })
+
+  test('worker emitted and import.meta.url in nested worker (build)', async () => {
+    expect(await page.textContent('.nested-worker-module')).toMatch(
+      '"type":"module"'
+    )
+    expect(await page.textContent('.nested-worker-constructor')).toMatch(
+      '"type":"constructor"'
+    )
+  })
+})
+
+test('module worker', async () => {
+  expect(await page.textContent('.shared-worker-import-meta-url')).toMatch(
+    'A string'
+  )
+})
+
+// TODO: Maybe we can modify classic-worker.js and classic-shared-worker.js to take into account the different asset paths
+test('classic worker', async () => {
+  expect(await page.textContent('.classic-worker')).toMatch('A classic')
+  expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
+})
+
+test('emit chunk', async () => {
+  expect(await page.textContent('.emit-chunk-worker')).toMatch(
+    '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]'
+  )
+  expect(await page.textContent('.emit-chunk-dynamic-import-worker')).toMatch(
+    '"A string./"'
+  )
+})
+
+test('import.meta.glob in worker', async () => {
+  expect(await page.textContent('.importMetaGlob-worker')).toMatch('["')
+})
+
+test('import.meta.glob with eager in worker', async () => {
+  expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
+})
diff --git a/playground/worker/__tests__/relative-base/vite.config.js b/playground/worker/__tests__/relative-base/vite.config.js
new file mode 100644
index 00000000000000..6837b8ef975a3d
--- /dev/null
+++ b/playground/worker/__tests__/relative-base/vite.config.js
@@ -0,0 +1 @@
+module.exports = require('../../vite.config-relative-base')
diff --git a/playground/worker/classic-shared-worker.js b/playground/worker/classic-shared-worker.js
index e629208f05cf0a..eed61e028f1e01 100644
--- a/playground/worker/classic-shared-worker.js
+++ b/playground/worker/classic-shared-worker.js
@@ -1,4 +1,7 @@
-importScripts(`/${self.location.pathname.split('/')[1]}/classic.js`)
+let base = `/${self.location.pathname.split('/')[1]}`
+if (base === `/worker-entries`) base = '' // relative base
+
+importScripts(`${base}/classic.js`)
 
 self.onconnect = (event) => {
   const port = event.ports[0]
diff --git a/playground/worker/classic-worker.js b/playground/worker/classic-worker.js
index 238857acf00a58..55486818a8ada7 100644
--- a/playground/worker/classic-worker.js
+++ b/playground/worker/classic-worker.js
@@ -1,4 +1,7 @@
-importScripts(`/${self.location.pathname.split("/")[1]}/classic.js`)
+let base = `/${self.location.pathname.split('/')[1]}`
+if (base === `/worker-entries`) base = '' // relative base
+
+importScripts(`${base}/classic.js`)
 
 self.addEventListener('message', () => {
   self.postMessage(self.constant)
diff --git a/playground/worker/package.json b/playground/worker/package.json
index 52cdac8c27c051..d66a96e84d59f2 100644
--- a/playground/worker/package.json
+++ b/playground/worker/package.json
@@ -18,6 +18,9 @@
     "dev:sourcemap-inline": "cross-env WORKER_MODE=inline vite --config ./vite.config-sourcemap.js dev",
     "build:sourcemap-inline": "cross-env WORKER_MODE=inline vite --config ./vite.config-sourcemap.js build",
     "preview:sourcemap-inline": "cross-env WORKER_MODE=inline vite --config ./vite.config-sourcemap.js preview",
+    "dev:relative-base": "cross-env WORKER_MODE=inline vite --config ./vite.config-relative-base.js dev",
+    "build:relative-base": "cross-env WORKER_MODE=inline vite --config ./vite.config-relative-base.js build",
+    "preview:relative-base": "cross-env WORKER_MODE=inline vite --config ./vite.config-relative-base.js preview",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite"
   },
   "devDependencies": {
diff --git a/playground/worker/vite.config-relative-base.js b/playground/worker/vite.config-relative-base.js
new file mode 100644
index 00000000000000..dd10caa205f60b
--- /dev/null
+++ b/playground/worker/vite.config-relative-base.js
@@ -0,0 +1,42 @@
+const vueJsx = require('@vitejs/plugin-vue-jsx')
+const vite = require('vite')
+const path = require('path')
+
+module.exports = vite.defineConfig({
+  base: './',
+  enforce: 'pre',
+  worker: {
+    format: 'es',
+    plugins: [vueJsx()],
+    rollupOptions: {
+      output: {
+        assetFileNames: 'worker-assets/worker_asset.[name]-[hash].[ext]',
+        chunkFileNames: 'worker-chunks/worker_chunk.[name]-[hash].js',
+        entryFileNames: 'worker-entries/worker_entry.[name]-[hash].js'
+      }
+    }
+  },
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      output: {
+        assetFileNames: 'other-assets/[name]-[hash].[ext]',
+        chunkFileNames: 'chunks/[name]-[hash].js',
+        entryFileNames: 'entries/[name]-[hash].js'
+      }
+    }
+  },
+  plugins: [
+    {
+      name: 'resolve-format-es',
+      transform(code, id) {
+        if (id.includes('main.js')) {
+          return code.replace(
+            `/* flag: will replace in vite config import("./format-es.js") */`,
+            `import("./main-format-es")`
+          )
+        }
+      }
+    }
+  ]
+})

From 7f7d76319c5c4bf914f0ac25335964f96b1b2953 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 23:38:06 +0200
Subject: [PATCH 32/33] test: skip invalid serve tests for relative base

---
 .../__tests__/relative-base/relative-base-worker.spec.ts     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts b/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts
index ff633f66b05ea2..90c1e55798b51f 100644
--- a/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts
+++ b/playground/worker/__tests__/relative-base/relative-base-worker.spec.ts
@@ -103,13 +103,12 @@ test('module worker', async () => {
   )
 })
 
-// TODO: Maybe we can modify classic-worker.js and classic-shared-worker.js to take into account the different asset paths
-test('classic worker', async () => {
+test.runIf(isBuild)('classic worker', async () => {
   expect(await page.textContent('.classic-worker')).toMatch('A classic')
   expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
 })
 
-test('emit chunk', async () => {
+test.runIf(isBuild)('emit chunk', async () => {
   expect(await page.textContent('.emit-chunk-worker')).toMatch(
     '["A string",{"type":"emit-chunk-sub-worker","data":"A string"},{"type":"module-and-worker:worker","data":"A string"},{"type":"module-and-worker:module","data":"module and worker"},{"type":"emit-chunk-sub-worker","data":{"module":"module and worker","msg1":"module1","msg2":"module2","msg3":"module3"}}]'
   )

From 277f967bdf14de9968c7188d0a92f6cfe7135c75 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Tue, 17 May 2022 23:56:19 +0200
Subject: [PATCH 33/33] fix: urls in windows

---
 packages/vite/src/node/plugins/asset.ts  | 2 +-
 packages/vite/src/node/plugins/css.ts    | 4 ++--
 packages/vite/src/node/plugins/worker.ts | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index e8e7f80089804b..4c1bcfea0fd50b 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -85,7 +85,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
 
       const absoluteUrlPathInterpolation = (filename: string) =>
         `"+new URL(${JSON.stringify(
-          path.relative(path.dirname(chunk.fileName), filename)
+          path.posix.relative(path.dirname(chunk.fileName), filename)
         )},import.meta.url).href+"`
 
       // Urls added with JS using e.g.
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 6d948e4de83a8d..eeafc46feafee0 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -463,7 +463,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
           if (relativeBase) {
             // relative base + extracted CSS
-            const relativePath = path.relative(cssAssetDirname!, filename)
+            const relativePath = path.posix.relative(cssAssetDirname!, filename)
             return relativePath.startsWith('.')
               ? relativePath
               : './' + relativePath
@@ -474,7 +474,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         })
         // resolve public URL from CSS paths
         if (relativeBase) {
-          const relativePathToPublicFromCSS = path.relative(
+          const relativePathToPublicFromCSS = path.posix.relative(
             cssAssetDirname!,
             ''
           )
diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 7b321828341c6d..21d61b579adbb0 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -297,7 +297,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
         while ((match = workerAssetUrlRE.exec(code))) {
           const [full, hash] = match
           const filename = fileNameHash.get(hash)!
-          let outputFilepath = path.relative(
+          let outputFilepath = path.posix.relative(
             path.dirname(chunk.fileName),
             filename
           )