fix: revert #7052, hmr style tag no support in html

packages/playground/assets/__tests__/assets.spec.ts

@@ -8,8 +8,7 @@ import {
   readManifest,
   readFile,
   editFile,
-  notifyRebuildComplete,
-  untilUpdated
+  notifyRebuildComplete
 } from '../../testUtils'
 
 const assetMatch = isBuild
@@ -38,7 +37,7 @@ describe('injected scripts', () => {
 
   test('html-proxy', async () => {
     const hasHtmlProxy = await page.$(
-      'script[type="module"][src^="/foo/index.html?html-proxy"]'
+      'script[type="module"][src="/foo/index.html?html-proxy&index=0.js"]'
     )
     if (isBuild) {
       expect(hasHtmlProxy).toBeFalsy()
@@ -259,15 +258,3 @@ describe('css and assets in css in build watch', () => {
     })
   }
 })
-
-if (!isBuild) {
-  test('@import in html style tag hmr', async () => {
-    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 136, 255)')
-    editFile(
-      './css/import.css',
-      (code) => code.replace('#0088ff', '#00ff88'),
-      true
-    )
-    await untilUpdated(() => getColor('.import-css'), 'rgb(0, 255, 136)')
-  })
-}

packages/vite/src/node/server/middlewares/indexHtml.ts

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import MagicString from 'magic-string'
-import type { AttributeNode, ElementNode } from '@vue/compiler-dom'
+import type { AttributeNode } from '@vue/compiler-dom'
 import { NodeTypes } from '@vue/compiler-dom'
 import type { Connect } from 'types/connect'
 import type { IndexHtmlTransformHook } from '../../plugins/html'
@@ -94,39 +94,9 @@ const devHtmlHook: IndexHtmlTransformHook = async (
   const base = config.base || '/'
 
   const s = new MagicString(html)
-  let inlineModuleIndex = -1
+  let scriptModuleIndex = -1
   const filePath = cleanUrl(htmlPath)
 
-  const addInlineModule = (node: ElementNode, ext: 'js' | 'css') => {
-    inlineModuleIndex++
-
-    const url = filePath.replace(normalizePath(config.root), '')
-
-    const contents = node.children
-      .map((child: any) => child.content || '')
-      .join('')
-
-    // add HTML Proxy to Map
-    addToHTMLProxyCache(config, url, inlineModuleIndex, contents)
-
-    // inline js module. convert to src="proxy"
-    const modulePath = `${
-      config.base + htmlPath.slice(1)
-    }?html-proxy&index=${inlineModuleIndex}.${ext}`
-
-    // invalidate the module so the newly cached contents will be served
-    const module = server?.moduleGraph.getModuleById(modulePath)
-    if (module) {
-      server?.moduleGraph.invalidateModule(module)
-    }
-
-    s.overwrite(
-      node.loc.start.offset,
-      node.loc.end.offset,
-      `<script type="module" src="${modulePath}"></script>`
-    )
-  }
-
   await traverseHtml(html, htmlPath, (node) => {
     if (node.type !== NodeTypes.ELEMENT) {
       return
@@ -135,16 +105,39 @@ const devHtmlHook: IndexHtmlTransformHook = async (
     // script tags
     if (node.tag === 'script') {
       const { src, isModule } = getScriptInfo(node)
+      if (isModule) {
+        scriptModuleIndex++
+      }
 
       if (src) {
         processNodeUrl(src, s, config, htmlPath, originalUrl, moduleGraph)
       } else if (isModule) {
-        addInlineModule(node, 'js')
-      }
-    }
+        const url = filePath.replace(normalizePath(config.root), '')
+
+        const contents = node.children
+          .map((child: any) => child.content || '')
+          .join('')
 
-    if (node.tag === 'style' && node.children.length) {
-      addInlineModule(node, 'css')
+        // add HTML Proxy to Map
+        addToHTMLProxyCache(config, url, scriptModuleIndex, contents)
+
+        // inline js module. convert to src="proxy"
+        const modulePath = `${
+          config.base + htmlPath.slice(1)
+        }?html-proxy&index=${scriptModuleIndex}.js`
+
+        // invalidate the module so the newly cached contents will be served
+        const module = server?.moduleGraph.getModuleById(modulePath)
+        if (module) {
+          server?.moduleGraph.invalidateModule(module)
+        }
+
+        s.overwrite(
+          node.loc.start.offset,
+          node.loc.end.offset,
+          `<script type="module" src="${modulePath}"></script>`
+        )
+      }
     }
 
     // elements with [href/src] attrs