fix: style update logic

vitejs · Apr 22, 2022 · 95e1a8c · 95e1a8c
1 parent 1d468c8
commit 95e1a8c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -300,6 +300,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
       const inlined = inlineRE.test(id)
       const modules = cssModulesCache.get(config)!.get(id)
+      const isHTMLProxy = htmlProxyRE.test(id)
       const modulesCode =
         modules && dataToEsm(modules, { namedExports: true, preferConst: true })
 
@@ -311,7 +312,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
           if (options?.ssr) {
             return modulesCode || `export default ${JSON.stringify(css)}`
           }
-          if (inlined) {
+          if (inlined || isHTMLProxy) {
             return `export default ${JSON.stringify(css)}`
           }
 
@@ -346,7 +347,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       // and then use the cache replace inline-style-flag when `generateBundle` in vite:build-html plugin
       const inlineCSS = inlineCSSRE.test(id)
       const query = parseRequest(id)
-      const isHTMLProxy = htmlProxyRE.test(id)
       if (inlineCSS && isHTMLProxy) {
         addToHTMLProxyTransformResult(
           `${cleanUrl(id)}_${Number.parseInt(query!.index)}`,

diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -128,13 +128,17 @@ const devHtmlHook: IndexHtmlTransformHook = async (
     if (module) {
       server?.moduleGraph.invalidateModule(module)
     }
-
-    s.overwrite(
-      node.loc.start.offset,
-      node.loc.end.offset,
-      `<script type="module" src="${modulePath}"></script>`,
-      { contentOnly: true }
-    )
+    if (ext === 'js') {
+      s.overwrite(
+        node.loc.start.offset,
+        node.loc.end.offset,
+        `<script type="module" src="${modulePath}"></script>`,
+        { contentOnly: true }
+      )
+    } else if (ext === 'css') {
+      // just use the style update hmr don't render css
+      s.append(`<script type="module" src="${modulePath}"></script>`)
+    }
   }
 
   await traverseHtml(html, htmlPath, (node) => {