feat: explicit the word boundary (#6876)

vitejs · Apr 12, 2022 · 7ddbf96 · 7ddbf96
1 parent 23fdef1
commit 7ddbf96
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 7 deletions.
diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
@@ -307,3 +307,10 @@ if (!isBuild) {
     await untilUpdated(() => getColor('.import-css'), 'rgb(0, 255, 136)')
   })
 }
+
+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')
+})
diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
@@ -176,9 +176,28 @@ <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 = "const t = 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')
+  try {
+    text('.string-import-express', t)
+  } catch {
+    text('.string-import-express', 'no load')
+  }
 </script>
 <h2>url in style tag</h2>
 <h3>url</h3>

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
@@ -35,6 +35,7 @@ import type {
   TextNode
 } from '@vue/compiler-dom'
 import { NodeTypes } from '@vue/compiler-dom'
+import { emptyString } from '../cleanString'
 
 interface ScriptAssetsUrl {
   start: number
@@ -44,8 +45,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)
 
@@ -303,14 +305,19 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               }
             } else if (node.children.length) {
               const scriptNode = node.children.pop()! as TextNode
-              const code = scriptNode.content
+              const cleanCode = emptyString(scriptNode.content)
+
               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
+              while ((match = inlineImportRE.exec(cleanCode))) {
+                const { 1: url, index } = match
+                const startUrl = cleanCode.indexOf(url, index)
+                const start = 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(start, end)
+                })
               }
             }
           }