feat!: relative base

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"
   }
 }

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
+  }
+}

packages/playground/css/vite.config.js

@@ -4,6 +4,7 @@ const path = require('path')
  * @type {import('vite').UserConfig}
  */
 module.exports = {
+  base: './',
   build: {
     cssTarget: 'chrome61'
   },

packages/playground/html/vite.config.js

@@ -4,6 +4,7 @@ const { resolve } = require('path')
  * @type {import('vite').UserConfig}
  */
 module.exports = {
+  base: './',
   build: {
     rollupOptions: {
       input: {

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'

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"/
     )
   })
 }

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')
 ]

packages/vite/src/node/build.ts

@@ -274,11 +274,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 coalescing
     ]
   } else if (resolved.target === 'esnext' && resolved.minify === 'terser') {
     // esnext + terser: limit to es2019 so it can be minified by terser
@@ -780,3 +780,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)
+  }
+}

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, stringifyAsTemplateLiteral } 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,20 +81,21 @@ 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 ${stringifyAsTemplateLiteral(url)}`
     },
 
     renderChunk(code, chunk) {
       let match: RegExpExecArray | null
       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)

packages/vite/src/node/plugins/assetImportMetaUrl.ts

@@ -3,6 +3,8 @@ 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 { emptyString } from '../cleanString'
 
 /**
@@ -21,6 +23,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`)
       ) {
@@ -75,7 +78,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
           s.overwrite(
             index,
             index + exp.length,
-            `new URL(${JSON.stringify(builtUrl)}, self.location)`,
+            `new URL(${stringifyAsTemplateLiteral(builtUrl)}, self.location)`,
             { contentOnly: true }
           )
         }

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'
@@ -48,6 +49,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 +182,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) {
@@ -361,11 +363,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       let code: string
       if (usedRE.test(id)) {
         if (inlined) {
-          code = `export default ${JSON.stringify(
+          code = `export default ${stringifyAsTemplateLiteral(
             await minifyCSS(css, config)
           )}`
         } else {
-          code = modulesCode || `export default ${JSON.stringify(css)}`
+          code =
+            modulesCode || `export default ${stringifyAsTemplateLiteral(css)}`
         }
       } else {
         code = `export default ''`
@@ -414,18 +417,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 and @charset should exist at this point
         // hoist them to the top of the CSS chunk per spec (#1845 and #6333)
@@ -464,7 +463,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 = ${stringifyAsTemplateLiteral(chunkCSS)};` +
             `document.head.appendChild(${style});`
           if (config.build.sourcemap) {
             const s = new MagicString(code)