fix: relative path html (#8122)

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

@@ -174,7 +174,11 @@ export function resolvePlugin(baseOptions: InternalResolveOptions): Plugin {
       }
 
       // relative
-      if (id.startsWith('.') || (preferRelative && /^\w/.test(id))) {
+      if (
+        id.startsWith('.') ||
+        (preferRelative && /^\w/.test(id)) ||
+        importer?.endsWith('.html')
+      ) {
         const basedir = importer ? path.dirname(importer) : process.cwd()
         const fsPath = path.resolve(basedir, id)
         // handle browser field mapping for relative imports

playground/assets/__tests__/assets.spec.ts

@@ -347,3 +347,8 @@ test('html import word boundary', async () => {
   )
   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')
+})

playground/assets/asset/main.js

@@ -0,0 +1,4 @@
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
+text('.relative-js', 'hello')

playground/assets/asset/style.css

@@ -0,0 +1,3 @@
+.relative-css {
+  color: red;
+}

playground/assets/index.html

@@ -290,7 +290,10 @@ <h3>style in svg</h3>
     />
   </g>
 </svg>
-
+<link rel="stylesheet" href="asset/style.css" />
+<div class="relative-css">link style</div>
+<div class="relative-js"></div>
+<script src="asset/main.js" type="module"></script>
 <style>
   @import '/foo.css';
 </style>

playground/html/__tests__/html.spec.ts

@@ -66,6 +66,13 @@ function testPage(isNested: boolean) {
     expect(await getColor('h1')).toBe(isNested ? 'red' : 'blue')
     expect(await getColor('p')).toBe('grey')
   })
+
+  if (isNested) {
+    test('relative path in html asset', async () => {
+      expect(await page.textContent('.relative-js')).toMatch('hello')
+      expect(await getColor('.relative-css')).toMatch('red')
+    })
+  }
 }
 
 describe('main', () => {

playground/html/nested/asset/main.js

@@ -0,0 +1,4 @@
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
+text('.relative-js', 'hello')

playground/html/nested/asset/style.css

@@ -0,0 +1,3 @@
+.relative-css {
+  color: red;
+}

playground/html/nested/index.html

@@ -1,3 +1,9 @@
 <link rel="stylesheet" href="./nested.css" />
 <h1>Nested</h1>
 <script type="module" src="./nested.js"></script>
+
+<h1>no base path nested</h1>
+<link rel="stylesheet" href="asset/style.css" />
+<div class="relative-css">link style</div>
+<div class="relative-js"></div>
+<script src="asset/main.js" type="module"></script>