From a61c8a2ea6f8b7d1751a3e5ce45454b612f30d61 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Fri, 20 Jan 2023 19:00:49 +0900
Subject: [PATCH] fix: rewrite assets url in <noscript>

---
 packages/vite/src/node/plugins/html.ts     | 1 +
 playground/assets/__tests__/assets.spec.ts | 7 +++++++
 playground/assets/index.html               | 6 ++++++
 3 files changed, 14 insertions(+)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index e85cef2fe32070..52e1ef43c1a365 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -169,6 +169,7 @@ export async function traverseHtml(
   // lazy load compiler
   const { parse } = await import('parse5')
   const ast = parse(html, {
+    scriptingEnabled: false, // parse inside <noscript>
     sourceCodeLocationInfo: true,
     onParseError: (e: ParserError) => {
       handleParseError(e, html, filePath)
diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index 433dc161352b98..3aa3a9ab3189dd 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -409,3 +409,10 @@ test.skip('url() contains file in publicDir, as inline style', async () => {
   // (I built the playground to verify)
   expect(await getBg('.inline-style-public')).toContain(iconMatch)
 })
+
+test.runIf(isBuild)('assets inside <noscript> is rewrote', async () => {
+  const indexHtml = readFile('./dist/foo/index.html')
+  expect(indexHtml).toMatch(
+    /<img class="noscript" src="\/foo\/assets\/asset-\w+\.png" \/>/,
+  )
+})
diff --git a/playground/assets/index.html b/playground/assets/index.html
index a8dc818b25daee..6b9c2f87a96d3c 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -314,6 +314,12 @@ <h3>style in svg</h3>
     />
   </g>
 </svg>
+
+<h3>assets in noscript</h3>
+<noscript>
+  <img class="noscript" src="./nested/asset.png" />
+</noscript>
+
 <link rel="stylesheet" href="asset/style.css" />
 <div class="relative-css">link style</div>
 <div class="relative-js"></div>