From 52bfae4bc8a5d6b721bc66fe07c679a30a7b7aec Mon Sep 17 00:00:00 2001
From: fi3ework <fi3ework@gmail.com>
Date: Wed, 28 Dec 2022 15:24:56 +0800
Subject: [PATCH] fix: merge module script and module preload link regex

---
 packages/vite/src/node/plugins/html.ts | 35 ++++++++++++--------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 81f6ede47edbdd..9521f8b89bf2e1 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -51,7 +51,12 @@ const importMapRE =
 const moduleScriptRE =
   /[ \t]*<script[^>]*type\s*=\s*(?:"module"|'module'|module)[^>]*>/i
 const modulePreloadLinkRE =
-  /[ \t]*<link[^>]*rel\s*=\s*(?:"modulepreload"|'modulepreload'|modulepreload).*?\/>/is
+  /[ \t]*<link[^>]*rel\s*=\s*(?:"modulepreload"|'modulepreload'|modulepreload)[\s\S]*?\/>/i
+
+const importMapDependenciesRE = new RegExp(
+  [moduleScriptRE, modulePreloadLinkRE].map((r) => r.source).join('|'),
+  'i',
+)
 
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 
@@ -893,17 +898,17 @@ export function preImportMapHook(
     const importMapIndex = html.match(importMapRE)?.index
     if (importMapIndex === undefined) return
 
-    const moduleScriptIndex = html.match(moduleScriptRE)?.index
-    if (moduleScriptIndex === undefined) return
+    const importMapDepIndex = html.match(importMapDependenciesRE)?.index
+    if (importMapDepIndex === undefined) return
 
-    if (moduleScriptIndex < importMapIndex) {
+    if (importMapDepIndex < importMapIndex) {
       const relativeHtml = normalizePath(
         path.relative(config.root, ctx.filename),
       )
       config.logger.warnOnce(
         colors.yellow(
           colors.bold(
-            `(!) <script type="importmap"> should come before <script type="module"> in /${relativeHtml}`,
+            `(!) <script type="importmap"> should come before <script type="module"> and <link rel="modulepreload"> in /${relativeHtml}`,
           ),
         ),
       )
@@ -916,7 +921,7 @@ export function preImportMapHook(
  */
 export function postImportMapHook(): IndexHtmlTransformHook {
   return (html) => {
-    if (!moduleScriptRE.test(html)) return
+    if (!importMapDependenciesRE.test(html)) return
 
     let importMap: string | undefined
     html = html.replace(importMapRE, (match) => {
@@ -924,19 +929,11 @@ export function postImportMapHook(): IndexHtmlTransformHook {
       return ''
     })
 
-    if (!importMap) return html
-
-    const firstModuleScriptIndex = html.match(moduleScriptRE)?.index
-    const firstModulePreloadIndex = html.match(modulePreloadLinkRE)?.index
-    const ImportMapInsertionIndex = Math.min(
-      firstModuleScriptIndex ?? Infinity,
-      firstModulePreloadIndex ?? Infinity,
-    )
-    if (ImportMapInsertionIndex === Infinity) return html
-
-    html = `${html.slice(0, ImportMapInsertionIndex)}${importMap}\n${html.slice(
-      ImportMapInsertionIndex,
-    )}`
+    if (importMap) {
+      html = html.replace(importMapDependenciesRE, (match) => {
+        return `${importMap}\n${match}`
+      })
+    }
 
     return html
   }