fix: legacy no resolve asset urls

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

@@ -467,7 +467,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       const publicAssetUrlMap = publicAssetUrlCache.get(config)!
 
       // resolve asset URL placeholders to their built file URLs
-      function resolveAssetUrlsInCss(chunkCSS: string, cssAssetName: string) {
+      function resolveAssetUrlsInCss(
+        chunkCSS: string,
+        cssAssetName: string,
+        relativeFromPage: boolean = false
+      ) {
         const encodedPublicUrls = encodePublicUrlsInCSS(config)
 
         const relative = config.base === './' || config.base === ''
@@ -479,14 +483,17 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         const toRelative = (filename: string, importer: string) => {
           // relative base + extracted CSS
           const relativePath = path.posix.relative(cssAssetDirname!, filename)
-          return relativePath.startsWith('.')
+          const resolvedRelativePath = relativePath.startsWith('.')
             ? relativePath
             : './' + relativePath
+          return relativeFromPage
+            ? `\${relativeFromPage('${filename}')}`
+            : resolvedRelativePath
         }
 
         // replace asset url references with resolved url.
         chunkCSS = chunkCSS.replace(assetUrlRE, (_, fileHash, postfix = '') => {
-          const filename = getAssetFilename(fileHash, config) + postfix
+          const filename = getAssetFilename(fileHash, config)! + postfix
           chunk.viteMetadata.importedAssets.add(cleanUrl(filename))
           return toOutputFilePathInCss(
             filename,
@@ -556,16 +563,19 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           })
           chunk.viteMetadata.importedCss.add(this.getFileName(fileHandle))
         } else if (!config.build.ssr) {
-          // legacy build and inline css
-
-          // __VITE_ASSET__ and __VITE_PUBLIC_ASSET__ urls are processed by
-          // the vite:asset plugin, don't call resolveAssetUrlsInCss here
+          // legacy build, inline css
+          // the entry css(style.css) will be inlined in the html template
+          // so don't need to generate the css insert script
+          if (chunk.isEntry) {
+            return { code }
+          }
+          chunkCSS = resolveAssetUrlsInCss(chunkCSS, chunk.name, true)
           chunkCSS = await finalizeCss(chunkCSS, true, config)
-
           const style = `__vite_style__`
           const injectCode =
             `var ${style} = document.createElement('style');` +
-            `${style}.innerHTML = ${JSON.stringify(chunkCSS)};` +
+            `var relativeFromPage = (u) => new URL(u, self.location).href;` +
+            `${style}.innerHTML = \`${chunkCSS}\`;` +
             `document.head.appendChild(${style});`
           if (config.build.sourcemap) {
             const s = new MagicString(code)

playground/vue-legacy/Main.vue

@@ -0,0 +1,32 @@
+<script>
+import { defineComponent } from 'vue'
+import css from './inline.css?inline'
+
+export default defineComponent({
+  components: {
+    module: () => import('./module.vue')
+  },
+  setup() {
+    return {
+      css
+    }
+  }
+})
+</script>
+<template>
+  <div class="container">
+    <p>hello</p>
+    <module />
+    <code>
+      {{ css }}
+    </code>
+  </div>
+</template>
+<style scoped>
+.container {
+  height: 100vh;
+  background: url('@/assets/asset.png') no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+</style>

playground/vue-legacy/__tests__/vue-legacy.spec.ts

@@ -0,0 +1,5 @@
+import { untilUpdated } from '~utils'
+
+test('vue legacy assets', async () => {
+  untilUpdated(() => '.container', 'asset')
+})

playground/vue-legacy/env.d.ts

@@ -0,0 +1 @@
+declare module '*.png'

playground/vue-legacy/index.html

@@ -0,0 +1,7 @@
+<div id="app" style="background: 'white'"></div>
+<script type="module">
+  import { createApp } from 'vue'
+  import App from './Main.vue'
+
+  createApp(App).mount('#app')
+</script>

playground/vue-legacy/inline.css

@@ -0,0 +1,3 @@
+.inline-css {
+  color: #0088ff;
+}

playground/vue-legacy/module.vue

@@ -0,0 +1,9 @@
+<template>module.vue</template>
+<style scoped>
+.container {
+  height: 100vh;
+  background: url('@/assets/asset2.png') no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+</style>

playground/vue-legacy/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "test-vue-legacy",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.37"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "workspace:*",
+    "@vitejs/plugin-legacy": "workspace:*"
+  }
+}

playground/vue-legacy/vite.config.ts

@@ -0,0 +1,35 @@
+import path from 'node:path'
+import fs from 'node:fs'
+import { defineConfig } from 'vite'
+import vuePlugin from '@vitejs/plugin-vue'
+import legacyPlugin from '@vitejs/plugin-legacy'
+
+export default defineConfig({
+  base: '',
+  resolve: {
+    alias: {
+      '@': __dirname
+    }
+  },
+  plugins: [
+    legacyPlugin({
+      targets: ['defaults', 'not IE 11', 'chrome > 48']
+    }),
+    vuePlugin()
+  ],
+  build: {
+    minify: false
+  },
+  // special test only hook
+  // for tests, remove `<script type="module">` tags and remove `nomodule`
+  // attrs so that we run the legacy bundle instead.
+  // @ts-ignore
+  __test__() {
+    const indexPath = path.resolve(__dirname, './dist/index.html')
+    let index = fs.readFileSync(indexPath, 'utf-8')
+    index = index
+      .replace(/<script type="module".*?<\/script>/g, '')
+      .replace(/<script nomodule/g, '<script')
+    fs.writeFileSync(indexPath, index)
+  }
+})