fix: support multiline new URL(..., import.meta.url) expressions

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

@@ -3,6 +3,7 @@ import { parseAst } from 'rollup/parseAst'
 import { assetImportMetaUrlPlugin } from '../../plugins/assetImportMetaUrl'
 import { resolveConfig } from '../../config'
 import { PartialEnvironment } from '../../baseEnvironment'
+import { createCodeFilter } from '../../plugins/pluginFilter'
 
 async function createAssetImportMetaurlPluginTransform() {
   const config = await resolveConfig({ configFile: false }, 'serve')
@@ -62,4 +63,42 @@ describe('assetImportMetaUrlPlugin', async () => {
       await transform('new URL(`${file}.js`, import.meta.url)'),
     ).toMatchInlineSnapshot(`"new URL(\`\${file}.js\`, import.meta.url)"`)
   })
+
+  test('filter should match single line new URL(..., import.meta.url)', () => {
+    const codeFilter = createCodeFilter(/new\s+URL.+import\.meta\.url/)
+    const singleLineCode = 'new URL("./foo.png", import.meta.url)'
+    expect(codeFilter(singleLineCode)).toBe(true)
+  })
+
+  test('filter should NOT match multiline new URL(..., import.meta.url) without s flag', () => {
+    const codeFilter = createCodeFilter(/new\s+URL.+import\.meta\.url/)
+    const multilineCode = `new URL(
+  './foo.png',
+  import.meta.url
+)`
+    expect(codeFilter(multilineCode)).toBe(false)
+  })
+
+  test('filter should match multiline new URL(..., import.meta.url) with s flag', () => {
+    const codeFilter = createCodeFilter(/new\s+URL.+import\.meta\.url/s)
+    const multilineCode = `new URL(
+  './foo.png',
+  import.meta.url
+)`
+    expect(codeFilter(multilineCode)).toBe(true)
+  })
+
+  test('multiline new URL(..., import.meta.url) transformation', async () => {
+    const multilineCode = `new URL(
+  './foo.png',
+  import.meta.url
+)`
+    const result = await transform(multilineCode)
+
+    // After fixing the filter with the 's' flag, this should be transformed
+    expect(result).toContain('new URL')
+    expect(result).toContain('import.meta.url')
+    // Check that it's been transformed (should contain quotes around the path)
+    expect(result).toContain('"/foo.png"')
+  })
 })

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

@@ -56,7 +56,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
         id: {
           exclude: [exactRegex(preloadHelperId), exactRegex(CLIENT_ENTRY)],
         },
-        code: /new\s+URL.+import\.meta\.url/,
+        code: /new\s+URL.+import\.meta\.url/s,
       },
       async handler(code, id) {
         let s: MagicString | undefined

playground/assets/__tests__/assets.spec.ts

@@ -596,6 +596,16 @@ test('new URL(..., import.meta.url)', async () => {
   }
 })
 
+test('new URL(..., import.meta.url) (multiline)', async () => {
+  const assetMatch = isBuild
+    ? /\/foo\/bar\/assets\/asset-[-\w]{8}\.png/
+    : '/foo/bar/nested/asset.png'
+
+  expect(await page.textContent('.import-meta-url-multiline')).toMatch(
+    assetMatch,
+  )
+})
+
 test('new URL("@/...", import.meta.url)', async () => {
   expect(await page.textContent('.import-meta-url-dep')).toMatch(assetMatch)
 })

playground/assets/index.html

@@ -324,6 +324,10 @@ <h2>new URL('...', import.meta.url,) (with comma + new line)</h2>
 <img class="import-meta-url-img-comma-nl" />
 <code class="import-meta-url-comma-nl"></code>
 
+<h2>new URL('...', import.meta.url) (multiline)</h2>
+<img class="import-meta-url-img-multiline" />
+<code class="import-meta-url-multiline"></code>
+
 <h2>new URL(`./${dynamic}`, import.meta.url)</h2>
 <p>
   <img class="dynamic-import-meta-url-img-1" />
@@ -638,6 +642,12 @@ <h3>assets in template</h3>
   document.querySelector('.import-meta-url-img-comma-nl').src =
     metaUrlWithCommaNL
 
+  // testing multiline new URL without trailing comma (issue #20631)
+  const metaUrlMultiline = new URL('./nested/asset.png', import.meta.url)
+  text('.import-meta-url-multiline', metaUrlMultiline)
+  document.querySelector('.import-meta-url-img-multiline').src =
+    metaUrlMultiline
+
   import classNames from './css/foo.module.css'
   document.querySelector('#foo').className = classNames['foo-module']