From dcbb0c899fa666af0f2c7ea9a5e7ec3da94bac44 Mon Sep 17 00:00:00 2001
From: ydcjeff <32727188+ydcjeff@users.noreply.github.com>
Date: Fri, 18 Feb 2022 17:39:14 +0630
Subject: [PATCH 1/4] test: add a failed test case

---
 packages/playground/assets/index.html | 31 +++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index f3b9a0b372a608..4c280b930ef35d 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -137,6 +137,10 @@ <h2>new URL('...', import.meta.url)</h2>
 <img class="import-meta-url-img" />
 <code class="import-meta-url"></code>
 
+<h2>new URL('...', import.meta.url,) (with comma)</h2>
+<img class="import-meta-url-img-comma" />
+<code class="import-meta-url-comma"></code>
+
 <h2>new URL(`./${dynamic}`, import.meta.url)</h2>
 <p>
   <img class="dynamic-import-meta-url-img-1" />
@@ -147,6 +151,16 @@ <h2>new URL(`./${dynamic}`, import.meta.url)</h2>
   <code class="dynamic-import-meta-url-2"></code>
 </p>
 
+<h2>new URL(`./${dynamic}`, import.meta.url,) (with comma)</h2>
+<p>
+  <img class="dynamic-import-meta-url-img-1-comma" />
+  <code class="dynamic-import-meta-url-1-comma"></code>
+</p>
+<p>
+  <img class="dynamic-import-meta-url-img-2-comma" />
+  <code class="dynamic-import-meta-url-2-comma"></code>
+</p>
+
 <h2>simple script tag import-expression</h2>
 <code class="import-expression"></code>
 <script>
@@ -215,6 +229,12 @@ <h3 class="import-css">@import</h3>
   const metaUrl = new URL('./nested/asset.png', import.meta.url)
   text('.import-meta-url', metaUrl)
   document.querySelector('.import-meta-url-img').src = metaUrl
+
+  // prettier-ignore
+  const metaUrlWithComma = new URL('./nested/asset.png', import.meta.url,)
+  text('.import-meta-url-comma', metaUrlWithComma)
+  document.querySelector('.import-meta-url-img-comma').src = metaUrlWithComma
+
   /**
    * don't process the code in the comment
    * const url = new URL('non_existent_file.png', import.meta.url)
@@ -229,6 +249,17 @@ <h3 class="import-css">@import</h3>
   testDynamicImportMetaUrl('icon', 1)
   testDynamicImportMetaUrl('asset', 2)
 
+  function testDynamicImportMetaUrlWithComma(name, i) {
+    // prettier-ignore
+    const metaUrl = new URL(`./nested/${name}.png`, import.meta.url,)
+    text(`.dynamic-import-meta-url-${i}-comma`, metaUrl)
+    document.querySelector(`.dynamic-import-meta-url-img-${i}-comma`).src =
+      metaUrl
+  }
+
+  testDynamicImportMetaUrlWithComma('icon', 1)
+  testDynamicImportMetaUrlWithComma('asset', 2)
+
   function text(el, text) {
     document.querySelector(el).textContent = text
   }

From d15b43ae52e5b0c5700f9352824034904dbc6ad0 Mon Sep 17 00:00:00 2001
From: ydcjeff <32727188+ydcjeff@users.noreply.github.com>
Date: Fri, 18 Feb 2022 17:52:44 +0630
Subject: [PATCH 2/4] fix: add optional trailing comma

---
 packages/playground/assets/index.html                | 8 ++++----
 packages/vite/src/node/plugins/assetImportMetaUrl.ts | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index 4c280b930ef35d..4f467d1b1cab06 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -230,8 +230,8 @@ <h3 class="import-css">@import</h3>
   text('.import-meta-url', metaUrl)
   document.querySelector('.import-meta-url-img').src = metaUrl
 
-  // prettier-ignore
-  const metaUrlWithComma = new URL('./nested/asset.png', import.meta.url,)
+  // prettier-ignore (need trailing comma in the next line)
+  const metaUrlWithComma = new URL('./nested/asset.png', import.meta.url)
   text('.import-meta-url-comma', metaUrlWithComma)
   document.querySelector('.import-meta-url-img-comma').src = metaUrlWithComma
 
@@ -250,8 +250,8 @@ <h3 class="import-css">@import</h3>
   testDynamicImportMetaUrl('asset', 2)
 
   function testDynamicImportMetaUrlWithComma(name, i) {
-    // prettier-ignore
-    const metaUrl = new URL(`./nested/${name}.png`, import.meta.url,)
+    // prettier-ignore (need trailing comma in the next line)
+    const metaUrl = new URL(`./nested/${name}.png`, import.meta.url)
     text(`.dynamic-import-meta-url-${i}-comma`, metaUrl)
     document.querySelector(`.dynamic-import-meta-url-img-${i}-comma`).src =
       metaUrl
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index 9b7249fe4ff35c..8805ca1bb863f6 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -21,7 +21,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
     async transform(code, id, options) {
       if (code.includes('new URL') && code.includes(`import.meta.url`)) {
         const importMetaUrlRE =
-          /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*\)/g
+          /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*,?\)/g
         const noCommentsCode = code
           .replace(multilineCommentsRE, (m) => ' '.repeat(m.length))
           .replace(singlelineCommentsRE, (m) => ' '.repeat(m.length))

From 512ea8e2d4984145d53052d6da52da6b750305bc Mon Sep 17 00:00:00 2001
From: ydcjeff <32727188+ydcjeff@users.noreply.github.com>
Date: Fri, 18 Feb 2022 17:53:37 +0630
Subject: [PATCH 3/4] chore: remove comments

---
 packages/playground/assets/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index 4f467d1b1cab06..4c280b930ef35d 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -230,8 +230,8 @@ <h3 class="import-css">@import</h3>
   text('.import-meta-url', metaUrl)
   document.querySelector('.import-meta-url-img').src = metaUrl
 
-  // prettier-ignore (need trailing comma in the next line)
-  const metaUrlWithComma = new URL('./nested/asset.png', import.meta.url)
+  // prettier-ignore
+  const metaUrlWithComma = new URL('./nested/asset.png', import.meta.url,)
   text('.import-meta-url-comma', metaUrlWithComma)
   document.querySelector('.import-meta-url-img-comma').src = metaUrlWithComma
 
@@ -250,8 +250,8 @@ <h3 class="import-css">@import</h3>
   testDynamicImportMetaUrl('asset', 2)
 
   function testDynamicImportMetaUrlWithComma(name, i) {
-    // prettier-ignore (need trailing comma in the next line)
-    const metaUrl = new URL(`./nested/${name}.png`, import.meta.url)
+    // prettier-ignore
+    const metaUrl = new URL(`./nested/${name}.png`, import.meta.url,)
     text(`.dynamic-import-meta-url-${i}-comma`, metaUrl)
     document.querySelector(`.dynamic-import-meta-url-img-${i}-comma`).src =
       metaUrl

From a1d6f7c34ecbd0d0b5d08ec5e2c7abe604e6db0c Mon Sep 17 00:00:00 2001
From: ydcjeff <32727188+ydcjeff@users.noreply.github.com>
Date: Fri, 18 Feb 2022 18:35:32 +0630
Subject: [PATCH 4/4] fix: allow whitespace characters after trailing comma

add a new test

Co-authored-by: bluwy <bluwy@users.noreply.github.com>
---
 packages/playground/assets/index.html              | 14 ++++++++++++++
 .../vite/src/node/plugins/assetImportMetaUrl.ts    |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index 4c280b930ef35d..ef673053abad27 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -141,6 +141,10 @@ <h2>new URL('...', import.meta.url,) (with comma)</h2>
 <img class="import-meta-url-img-comma" />
 <code class="import-meta-url-comma"></code>
 
+<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(`./${dynamic}`, import.meta.url)</h2>
 <p>
   <img class="dynamic-import-meta-url-img-1" />
@@ -235,6 +239,16 @@ <h3 class="import-css">@import</h3>
   text('.import-meta-url-comma', metaUrlWithComma)
   document.querySelector('.import-meta-url-img-comma').src = metaUrlWithComma
 
+  // testing trailing comma and new line
+  // prettier-ignore
+  const metaUrlWithCommaNL = new URL(
+    './nested/asset.png',
+    import.meta.url,
+  )
+  text('.import-meta-url-comma-nl', metaUrlWithCommaNL)
+  document.querySelector('.import-meta-url-img-comma-nl').src =
+    metaUrlWithCommaNL
+
   /**
    * don't process the code in the comment
    * const url = new URL('non_existent_file.png', import.meta.url)
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index 8805ca1bb863f6..c34259bf48a0e9 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -21,7 +21,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
     async transform(code, id, options) {
       if (code.includes('new URL') && code.includes(`import.meta.url`)) {
         const importMetaUrlRE =
-          /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*,?\)/g
+          /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*,?\s*\)/g
         const noCommentsCode = code
           .replace(multilineCommentsRE, (m) => ' '.repeat(m.length))
           .replace(singlelineCommentsRE, (m) => ' '.repeat(m.length))