feat: explicit the word boundary

packages/playground/assets/index.html

@@ -176,9 +176,24 @@ <h2>new URL(`non-existent`, import.meta.url)</h2>
 
 <h2>simple script tag import-expression</h2>
 <code class="import-expression"></code>
+<code class="obj-import-express"></code>
+<code class="string-import-express"></code>
 <script>
+  const obj = {
+    import(t) {
+      text('.obj-import-express', t)
+    }
+  }
+  const stringImport = "import('package')"
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
   import('./static/import-expression.js')
   import('/import-expression.js')
+  // import('./static/raw.js')
+  /* import('./static/raw.js') */
+  obj.import('ignore object import prop')
+  text('.string-import-express', t)
 </script>
 <h2>url in style tag</h2>
 <h3>url</h3>

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

@@ -13,8 +13,10 @@ import {
   generateCodeFrame,
   isDataUrl,
   isExternalUrl,
+  multilineCommentsRE,
   normalizePath,
   processSrcSet,
+  singlelineCommentsRE,
   slash
 } from '../utils'
 import type { ResolvedConfig } from '../config'
@@ -44,8 +46,9 @@ interface ScriptAssetsUrl {
 
 const htmlProxyRE = /\?html-proxy=?[&inline\-css]*&index=(\d+)\.(js|css)$/
 const inlineCSSRE = /__VITE_INLINE_CSS__([^_]+_\d+)__/g
+// Do not allow preceding '.', but do allow preceding '...' for spread operations
+const inlineImportRE = /(?<!(?<!\.\.)\.)\bimport\s*\(("[^"]*"|'[^']*')\)/g
 const htmlLangRE = /\.(html|htm)$/
-const inlineImportRE = /\bimport\s*\(("[^"]*"|'[^']*')\)/g
 
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 
@@ -304,13 +307,24 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             } else if (node.children.length) {
               const scriptNode = node.children.pop()! as TextNode
               const code = scriptNode.content
+                .replace(multilineCommentsRE, (m) => ' '.repeat(m.length))
+                .replace(singlelineCommentsRE, (m) => ' '.repeat(m.length))
+                .replace(
+                  /"[^"]*"|'[^']*'|`[^`]*`/g,
+                  (m) => `'${' '.repeat(m.length - 2)}'`
+                )
+
               let match: RegExpExecArray | null
               while ((match = inlineImportRE.exec(code))) {
                 const { 0: full, 1: url, index } = match
                 const startUrl = full.indexOf(url)
-                const start = scriptNode.loc.start.offset + index + startUrl + 1
+                const start = index + startUrl + 1
                 const end = start + url.length - 2
-                scriptUrls.push({ start, end, url: url.slice(1, -1) })
+                scriptUrls.push({
+                  start: start + scriptNode.loc.start.offset,
+                  end: end + scriptNode.loc.start.offset,
+                  url: scriptNode.content.slice(index + startUrl + 1, end)
+                })
               }
             }
           }