From ba5ac172de6acb8025b9fcd8213e51144c0b4d36 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 9 Dec 2021 12:11:02 +0800
Subject: [PATCH 01/35] test: add url import assets in style tag / inline style
 tests

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

diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index 9983d7fc4a5da7..241fba6fad7f0c 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -139,6 +139,15 @@ <h2>new URL(`./${dynamic}`, import.meta.url)</h2>
   <code class="dynamic-import-meta-url-2"></code>
 </p>
 
+<h2>url in style tag</h2>
+<h1 style="background: url(/icon.png);">hai</h1>
+<style>
+  .style-url-assets {
+    background: url('/icon.png');
+  }
+</style>
+<p class="style-url-assets">hai</p>
+
 <script type="module">
   import './css/fonts.css'
   import './css/css-url.css'

From 93ef3f3830e56546dfd3135befbd9b89e7bd0add Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 9 Dec 2021 22:22:40 +0800
Subject: [PATCH 02/35] fix: compile style / inline style in index.html

---
 packages/playground/assets/index.html  | 12 +++++--
 packages/vite/src/node/plugins/css.ts  | 36 ++++++++++++++++++-
 packages/vite/src/node/plugins/html.ts | 49 ++++++++++++++++++++++++--
 3 files changed, 92 insertions(+), 5 deletions(-)

diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index 241fba6fad7f0c..80f8a2ef51ef2c 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -140,10 +140,18 @@ <h2>new URL(`./${dynamic}`, import.meta.url)</h2>
 </p>
 
 <h2>url in style tag</h2>
-<h1 style="background: url(/icon.png);">hai</h1>
+<h1 style="background: url(./nested/asset.png);">hai</h1>
+<!-- base64 -->
+<h1 style="background: url(./static/icon.png);">hai</h1>
 <style>
   .style-url-assets {
-    background: url('/icon.png');
+    background: url('./nested/asset.png');
+  }
+</style>
+<!-- base64 -->
+<style>
+  .style-url-assets {
+    background: url('./static/icon.png');
   }
 </style>
 <p class="style-url-assets">hai</p>
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 2a66e7b5cb4b93..1dda026b7a68cf 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -20,7 +20,8 @@ import {
   OutputChunk,
   RenderedChunk,
   RollupError,
-  SourceMap
+  SourceMap,
+  PluginContext
 } from 'rollup'
 import { dataToEsm } from '@rollup/pluginutils'
 import chalk from 'chalk'
@@ -778,6 +779,39 @@ async function compileCSS(
   }
 }
 
+export function compileHTMLCSS (
+  id: string,
+  code: string,
+  config: ResolvedConfig,
+  ctx: PluginContext
+) {
+  const resolveUrl = config.createResolver({
+    preferRelative: true,
+    tryIndex: false,
+    extensions: []
+  })
+  const atImportResolvers = createCSSResolvers(config)
+
+  const urlReplacer: CssUrlReplacer = async (url, importer) => {
+    if (checkPublicFile(url, config)) {
+      return config.base + url.slice(1)
+    }
+    const resolved = await resolveUrl(url, importer)
+    if (resolved) {
+      return fileToUrl(resolved, config, ctx)
+    }
+    return url
+  }
+
+  return compileCSS(
+    id,
+    code,
+    config,
+    urlReplacer,
+    atImportResolvers,
+  )
+}
+
 interface PostCSSConfigResult {
   options: Postcss.ProcessOptions
   plugins: Postcss.Plugin[]
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 9aa4e4f4a289e0..a6d403e60f93b4 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -1,7 +1,7 @@
 import path from 'path'
 import { Plugin } from '../plugin'
 import { ViteDevServer } from '../server'
-import { OutputAsset, OutputBundle, OutputChunk } from 'rollup'
+import { OutputAsset, OutputBundle, OutputChunk, PluginContext } from 'rollup'
 import {
   cleanUrl,
   generateCodeFrame,
@@ -25,8 +25,10 @@ import {
   AttributeNode,
   NodeTransform,
   NodeTypes,
-  ElementNode
+  ElementNode,
+  TextNode
 } from '@vue/compiler-dom'
+import { compileHTMLCSS } from "./css"
 
 const htmlProxyRE = /\?html-proxy&index=(\d+)\.js$/
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
@@ -161,6 +163,19 @@ function formatParseError(e: any, id: string, html: string): Error {
   return e
 }
 
+/**
+ * compile style / inline-style with css plugin
+ */
+async function getAssetsFromStyle (code: string, config: ResolvedConfig, ctx: PluginContext): Promise<string> {
+  const compileCSSResult = await compileHTMLCSS(
+    "index.html.css",
+    code,
+    config,
+    ctx
+  )
+  return compileCSSResult.code
+}
+
 /**
  * Compiles index.html into an entry js module
  */
@@ -198,6 +213,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         let someScriptsAreAsync = false
         let someScriptsAreDefer = false
 
+        const resolveStyleAssetsTask: Array<Promise<any>> = []
         await traverseHtml(html, id, (node) => {
           if (node.type !== NodeTypes.ELEMENT) {
             return
@@ -282,6 +298,34 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               }
             }
           }
+          // for style tag and inline style use url(...) for assets references, also generate an import
+          const inlineStyle = node.props.find(prop => (prop.name === 'style' && prop.type === NodeTypes.ATTRIBUTE)) as AttributeNode
+          if (inlineStyle && inlineStyle.value) {
+            const styleNode = inlineStyle.value
+            resolveStyleAssetsTask.push(
+              getAssetsFromStyle(styleNode.content, config, this)
+                .then(newStyleCode => {
+                  s.overwrite(
+                    styleNode.loc.start.offset,
+                    styleNode.loc.end.offset,
+                    `"${newStyleCode}"`
+                  )
+                })
+            )
+          }
+          if (node.tag === 'style' && node.children.length) {
+            const styleNode = node.children.pop() as TextNode
+            resolveStyleAssetsTask.push(
+              getAssetsFromStyle(styleNode.content, config, this)
+                .then(newStyleCode => {
+                  s.overwrite(
+                    styleNode.loc.start.offset,
+                    styleNode.loc.end.offset,
+                    newStyleCode
+                  )
+                })
+            )
+          }
 
           if (shouldRemove) {
             // remove the script tag from the html. we are going to inject new
@@ -289,6 +333,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             s.remove(node.loc.start.offset, node.loc.end.offset)
           }
         })
+        await Promise.all(resolveStyleAssetsTask)
 
         isAsyncScriptMap.get(config)!.set(id, everyScriptIsAsync)
 

From 4736fe891e6bacc8d46681853304546d97cb6780 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 9 Dec 2021 22:27:26 +0800
Subject: [PATCH 03/35] test: @import test

---
 packages/playground/assets/index.html  |  8 ++++++--
 packages/vite/src/node/plugins/css.ts  | 10 ++-------
 packages/vite/src/node/plugins/html.ts | 28 +++++++++++++++++---------
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index 80f8a2ef51ef2c..aa68a17f4d19ed 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -140,9 +140,9 @@ <h2>new URL(`./${dynamic}`, import.meta.url)</h2>
 </p>
 
 <h2>url in style tag</h2>
-<h1 style="background: url(./nested/asset.png);">hai</h1>
+<h1 style="background: url(./nested/asset.png)">hai</h1>
 <!-- base64 -->
-<h1 style="background: url(./static/icon.png);">hai</h1>
+<h1 style="background: url(./static/icon.png)">hai</h1>
 <style>
   .style-url-assets {
     background: url('./nested/asset.png');
@@ -154,6 +154,10 @@ <h1 style="background: url(./static/icon.png);">hai</h1>
     background: url('./static/icon.png');
   }
 </style>
+<!-- @import -->
+<style>
+  @import url('./css//css-url.css');
+</style>
 <p class="style-url-assets">hai</p>
 
 <script type="module">
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 1dda026b7a68cf..83d15e4d6721ec 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -779,7 +779,7 @@ async function compileCSS(
   }
 }
 
-export function compileHTMLCSS (
+export function compileHTMLCSS(
   id: string,
   code: string,
   config: ResolvedConfig,
@@ -803,13 +803,7 @@ export function compileHTMLCSS (
     return url
   }
 
-  return compileCSS(
-    id,
-    code,
-    config,
-    urlReplacer,
-    atImportResolvers,
-  )
+  return compileCSS(id, code, config, urlReplacer, atImportResolvers)
 }
 
 interface PostCSSConfigResult {
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index a6d403e60f93b4..a5715505e2b5b2 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -28,7 +28,7 @@ import {
   ElementNode,
   TextNode
 } from '@vue/compiler-dom'
-import { compileHTMLCSS } from "./css"
+import { compileHTMLCSS } from './css'
 
 const htmlProxyRE = /\?html-proxy&index=(\d+)\.js$/
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
@@ -166,9 +166,13 @@ function formatParseError(e: any, id: string, html: string): Error {
 /**
  * compile style / inline-style with css plugin
  */
-async function getAssetsFromStyle (code: string, config: ResolvedConfig, ctx: PluginContext): Promise<string> {
+async function getAssetsFromStyle(
+  code: string,
+  config: ResolvedConfig,
+  ctx: PluginContext
+): Promise<string> {
   const compileCSSResult = await compileHTMLCSS(
-    "index.html.css",
+    'index.html.css',
     code,
     config,
     ctx
@@ -299,31 +303,35 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             }
           }
           // for style tag and inline style use url(...) for assets references, also generate an import
-          const inlineStyle = node.props.find(prop => (prop.name === 'style' && prop.type === NodeTypes.ATTRIBUTE)) as AttributeNode
+          const inlineStyle = node.props.find(
+            (prop) => prop.name === 'style' && prop.type === NodeTypes.ATTRIBUTE
+          ) as AttributeNode
           if (inlineStyle && inlineStyle.value) {
             const styleNode = inlineStyle.value
             resolveStyleAssetsTask.push(
-              getAssetsFromStyle(styleNode.content, config, this)
-                .then(newStyleCode => {
+              getAssetsFromStyle(styleNode.content, config, this).then(
+                (newStyleCode) => {
                   s.overwrite(
                     styleNode.loc.start.offset,
                     styleNode.loc.end.offset,
                     `"${newStyleCode}"`
                   )
-                })
+                }
+              )
             )
           }
           if (node.tag === 'style' && node.children.length) {
             const styleNode = node.children.pop() as TextNode
             resolveStyleAssetsTask.push(
-              getAssetsFromStyle(styleNode.content, config, this)
-                .then(newStyleCode => {
+              getAssetsFromStyle(styleNode.content, config, this).then(
+                (newStyleCode) => {
                   s.overwrite(
                     styleNode.loc.start.offset,
                     styleNode.loc.end.offset,
                     newStyleCode
                   )
-                })
+                }
+              )
             )
           }
 

From 5004fc335e37f1f5f322096f3582762e0663a66f Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Fri, 10 Dec 2021 09:41:17 +0800
Subject: [PATCH 04/35] chore: test unit

---
 packages/playground/assets/index.html | 33 ++++++++++++++++++---------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index aa68a17f4d19ed..0d06c76d173c75 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -140,25 +140,36 @@ <h2>new URL(`./${dynamic}`, import.meta.url)</h2>
 </p>
 
 <h2>url in style tag</h2>
-<h1 style="background: url(./nested/asset.png)">hai</h1>
-<!-- base64 -->
-<h1 style="background: url(./static/icon.png)">hai</h1>
-<style>
+<h3>url</h3>
+<style class="style-url">
   .style-url-assets {
     background: url('./nested/asset.png');
+    background-size: 10px 10px;
   }
 </style>
-<!-- base64 -->
-<style>
-  .style-url-assets {
+<div
+  class="inline-style-url"
+  style="background: url('./nested/asset.png'); background-size: 10px 10px"
+>
+  inline style
+</div>
+<div class="style-url-assets">use style class</div>
+
+<h3>base64</h3>
+<style class="style-base64">
+  .style-base64-assets {
     background: url('./static/icon.png');
   }
 </style>
-<!-- @import -->
-<style>
-  @import url('./css//css-url.css');
+<p class="inline-style-base64" style="background: url(./static/icon.png)">
+  inline style
+</p>
+<p class="style-base64-assets">use style class</p>
+
+<h3>@import</h3>
+<style class="style-import">
+  @import url('./css/css-url.css');
 </style>
-<p class="style-url-assets">hai</p>
 
 <script type="module">
   import './css/fonts.css'

From 6bc8dfabed278edc7754a8e4474e29b42d5617b7 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Fri, 10 Dec 2021 09:58:02 +0800
Subject: [PATCH 05/35] feat: ignore repeat to create resolve

---
 packages/vite/src/node/plugins/css.ts  | 31 ++++++++++-----------
 packages/vite/src/node/plugins/html.ts | 38 ++++++++------------------
 2 files changed, 25 insertions(+), 44 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 83d15e4d6721ec..7743db0bc1df98 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -779,31 +779,28 @@ async function compileCSS(
   }
 }
 
-export function compileHTMLCSS(
-  id: string,
-  code: string,
-  config: ResolvedConfig,
-  ctx: PluginContext
-) {
+export function createHTMLCSSCompiler(config: ResolvedConfig) {
   const resolveUrl = config.createResolver({
     preferRelative: true,
     tryIndex: false,
     extensions: []
   })
   const atImportResolvers = createCSSResolvers(config)
-
-  const urlReplacer: CssUrlReplacer = async (url, importer) => {
-    if (checkPublicFile(url, config)) {
-      return config.base + url.slice(1)
-    }
-    const resolved = await resolveUrl(url, importer)
-    if (resolved) {
-      return fileToUrl(resolved, config, ctx)
+  return {
+    compile: (id: string, code: string, ctx: PluginContext) => {
+      const urlReplacer: CssUrlReplacer = async (url, importer) => {
+        if (checkPublicFile(url, config)) {
+          return config.base + url.slice(1)
+        }
+        const resolved = await resolveUrl(url, importer)
+        if (resolved) {
+          return fileToUrl(resolved, config, ctx)
+        }
+        return url
+      }
+      return compileCSS(id, code, config, urlReplacer, atImportResolvers)
     }
-    return url
   }
-
-  return compileCSS(id, code, config, urlReplacer, atImportResolvers)
 }
 
 interface PostCSSConfigResult {
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index a5715505e2b5b2..2f9f42de507b3a 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -28,7 +28,7 @@ import {
   ElementNode,
   TextNode
 } from '@vue/compiler-dom'
-import { compileHTMLCSS } from './css'
+import { createHTMLCSSCompiler } from './css'
 
 const htmlProxyRE = /\?html-proxy&index=(\d+)\.js$/
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
@@ -163,23 +163,6 @@ function formatParseError(e: any, id: string, html: string): Error {
   return e
 }
 
-/**
- * compile style / inline-style with css plugin
- */
-async function getAssetsFromStyle(
-  code: string,
-  config: ResolvedConfig,
-  ctx: PluginContext
-): Promise<string> {
-  const compileCSSResult = await compileHTMLCSS(
-    'index.html.css',
-    code,
-    config,
-    ctx
-  )
-  return compileCSSResult.code
-}
-
 /**
  * Compiles index.html into an entry js module
  */
@@ -191,6 +174,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
     isExternalUrl(url) ||
     isDataUrl(url) ||
     checkPublicFile(url, config)
+  const cssCompiler = createHTMLCSSCompiler(config)
 
   return {
     name: 'vite:build-html',
@@ -304,17 +288,17 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           }
           // for style tag and inline style use url(...) for assets references, also generate an import
           const inlineStyle = node.props.find(
-            (prop) => prop.name === 'style' && prop.type === NodeTypes.ATTRIBUTE
+            (prop) => prop.name === 'style' && prop.type === NodeTypes.ATTRIBUTE && prop.value
           ) as AttributeNode
-          if (inlineStyle && inlineStyle.value) {
-            const styleNode = inlineStyle.value
+          if (inlineStyle) {
+            const styleNode = inlineStyle.value!
             resolveStyleAssetsTask.push(
-              getAssetsFromStyle(styleNode.content, config, this).then(
-                (newStyleCode) => {
+              cssCompiler.compile("index.html.css", styleNode.content, this).then(
+                (compileResult) => {
                   s.overwrite(
                     styleNode.loc.start.offset,
                     styleNode.loc.end.offset,
-                    `"${newStyleCode}"`
+                    `"${compileResult.code}"`
                   )
                 }
               )
@@ -323,12 +307,12 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           if (node.tag === 'style' && node.children.length) {
             const styleNode = node.children.pop() as TextNode
             resolveStyleAssetsTask.push(
-              getAssetsFromStyle(styleNode.content, config, this).then(
-                (newStyleCode) => {
+              cssCompiler.compile("index.html.css", styleNode.content, this).then(
+                (compileResult) => {
                   s.overwrite(
                     styleNode.loc.start.offset,
                     styleNode.loc.end.offset,
-                    newStyleCode
+                    compileResult.code
                   )
                 }
               )

From 26dc10017016a6034f5efd65bfcf3eae2eb49e42 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Fri, 10 Dec 2021 09:59:24 +0800
Subject: [PATCH 06/35] chore: format

---
 packages/vite/src/node/plugins/html.ts | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 2f9f42de507b3a..29e800fc5d0f48 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -288,34 +288,37 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           }
           // for style tag and inline style use url(...) for assets references, also generate an import
           const inlineStyle = node.props.find(
-            (prop) => prop.name === 'style' && prop.type === NodeTypes.ATTRIBUTE && prop.value
+            (prop) =>
+              prop.name === 'style' &&
+              prop.type === NodeTypes.ATTRIBUTE &&
+              prop.value
           ) as AttributeNode
           if (inlineStyle) {
             const styleNode = inlineStyle.value!
             resolveStyleAssetsTask.push(
-              cssCompiler.compile("index.html.css", styleNode.content, this).then(
-                (compileResult) => {
+              cssCompiler
+                .compile('index.html.css', styleNode.content, this)
+                .then((compileResult) => {
                   s.overwrite(
                     styleNode.loc.start.offset,
                     styleNode.loc.end.offset,
                     `"${compileResult.code}"`
                   )
-                }
-              )
+                })
             )
           }
           if (node.tag === 'style' && node.children.length) {
             const styleNode = node.children.pop() as TextNode
             resolveStyleAssetsTask.push(
-              cssCompiler.compile("index.html.css", styleNode.content, this).then(
-                (compileResult) => {
+              cssCompiler
+                .compile('index.html.css', styleNode.content, this)
+                .then((compileResult) => {
                   s.overwrite(
                     styleNode.loc.start.offset,
                     styleNode.loc.end.offset,
                     compileResult.code
                   )
-                }
-              )
+                })
             )
           }
 

From 1005c067aca6db3f15d5ab5481639f10fbbea279 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Fri, 10 Dec 2021 10:04:29 +0800
Subject: [PATCH 07/35] fix: never used import

---
 packages/vite/src/node/plugins/html.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 29e800fc5d0f48..a6ac1c5dd7e9be 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -1,7 +1,7 @@
 import path from 'path'
 import { Plugin } from '../plugin'
 import { ViteDevServer } from '../server'
-import { OutputAsset, OutputBundle, OutputChunk, PluginContext } from 'rollup'
+import { OutputAsset, OutputBundle, OutputChunk } from 'rollup'
 import {
   cleanUrl,
   generateCodeFrame,

From 827e94dcaa86c022fd9e0f3f187f9054de178de6 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Fri, 10 Dec 2021 13:34:04 +0800
Subject: [PATCH 08/35] fix: fix resolve importer id

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

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index a6ac1c5dd7e9be..619c3231da2f3e 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -297,7 +297,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             const styleNode = inlineStyle.value!
             resolveStyleAssetsTask.push(
               cssCompiler
-                .compile('index.html.css', styleNode.content, this)
+                .compile(id + '.css', styleNode.content, this)
                 .then((compileResult) => {
                   s.overwrite(
                     styleNode.loc.start.offset,
@@ -311,7 +311,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             const styleNode = node.children.pop() as TextNode
             resolveStyleAssetsTask.push(
               cssCompiler
-                .compile('index.html.css', styleNode.content, this)
+                .compile(id + '.css', styleNode.content, this)
                 .then((compileResult) => {
                   s.overwrite(
                     styleNode.loc.start.offset,

From f1ef7533b6174df0d1bb1f754fbc5829a095851e Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sat, 11 Dec 2021 21:25:04 +0800
Subject: [PATCH 09/35] feat: define `createHTMLCSSCompiler` return type

---
 packages/vite/src/node/plugins/css.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 7743db0bc1df98..862d0ab977e80c 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -779,7 +779,13 @@ async function compileCSS(
   }
 }
 
-export function createHTMLCSSCompiler(config: ResolvedConfig) {
+export function createHTMLCSSCompiler(config: ResolvedConfig): {
+  compile: (
+    id: string,
+    code: string,
+    ctx: PluginContext
+  ) => ReturnType<typeof compileCSS>
+} {
   const resolveUrl = config.createResolver({
     preferRelative: true,
     tryIndex: false,

From 610d9f8381a44d4cb56766fb9beb8c547a8fb766 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 12 Dec 2021 08:09:33 +0800
Subject: [PATCH 10/35] feat: find the css plugin instance re-using transform
 method

---
 packages/vite/src/node/plugins/css.ts  | 33 +---------------
 packages/vite/src/node/plugins/html.ts | 53 ++++++++++++++++++++------
 2 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 862d0ab977e80c..2a66e7b5cb4b93 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -20,8 +20,7 @@ import {
   OutputChunk,
   RenderedChunk,
   RollupError,
-  SourceMap,
-  PluginContext
+  SourceMap
 } from 'rollup'
 import { dataToEsm } from '@rollup/pluginutils'
 import chalk from 'chalk'
@@ -779,36 +778,6 @@ async function compileCSS(
   }
 }
 
-export function createHTMLCSSCompiler(config: ResolvedConfig): {
-  compile: (
-    id: string,
-    code: string,
-    ctx: PluginContext
-  ) => ReturnType<typeof compileCSS>
-} {
-  const resolveUrl = config.createResolver({
-    preferRelative: true,
-    tryIndex: false,
-    extensions: []
-  })
-  const atImportResolvers = createCSSResolvers(config)
-  return {
-    compile: (id: string, code: string, ctx: PluginContext) => {
-      const urlReplacer: CssUrlReplacer = async (url, importer) => {
-        if (checkPublicFile(url, config)) {
-          return config.base + url.slice(1)
-        }
-        const resolved = await resolveUrl(url, importer)
-        if (resolved) {
-          return fileToUrl(resolved, config, ctx)
-        }
-        return url
-      }
-      return compileCSS(id, code, config, urlReplacer, atImportResolvers)
-    }
-  }
-}
-
 interface PostCSSConfigResult {
   options: Postcss.ProcessOptions
   plugins: Postcss.Plugin[]
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 619c3231da2f3e..2c9400ccdfb498 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -28,7 +28,6 @@ import {
   ElementNode,
   TextNode
 } from '@vue/compiler-dom'
-import { createHTMLCSSCompiler } from './css'
 
 const htmlProxyRE = /\?html-proxy&index=(\d+)\.js$/
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
@@ -163,6 +162,18 @@ function formatParseError(e: any, id: string, html: string): Error {
   return e
 }
 
+function findCssPlugin(config: ResolvedConfig) {
+  const pluginName = 'vite:css'
+  const plugin = config.plugins.find((p) => p.name === pluginName)
+  if (!plugin) {
+    throw new Error(`failed to find plugin ${pluginName}`)
+  }
+  if (!plugin.transform) {
+    throw new Error(`plugin ${pluginName} has no transform`)
+  }
+  return plugin
+}
+
 /**
  * Compiles index.html into an entry js module
  */
@@ -174,7 +185,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
     isExternalUrl(url) ||
     isDataUrl(url) ||
     checkPublicFile(url, config)
-  const cssCompiler = createHTMLCSSCompiler(config)
+  let cssPlugin: Plugin | null = null
 
   return {
     name: 'vite:build-html',
@@ -294,31 +305,49 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               prop.value
           ) as AttributeNode
           if (inlineStyle) {
+            if (!cssPlugin) {
+              cssPlugin = findCssPlugin(config)
+            }
             const styleNode = inlineStyle.value!
             resolveStyleAssetsTask.push(
-              cssCompiler
-                .compile(id + '.css', styleNode.content, this)
-                .then((compileResult) => {
+              Promise.resolve(
+                cssPlugin.transform!.call(this, styleNode.content, id + '.css')
+              ).then((compileResult) => {
+                if (compileResult) {
+                  const code =
+                    typeof compileResult === 'string'
+                      ? compileResult
+                      : compileResult.code || ''
                   s.overwrite(
                     styleNode.loc.start.offset,
                     styleNode.loc.end.offset,
-                    `"${compileResult.code}"`
+                    `"${code}"`
                   )
-                })
+                }
+              })
             )
           }
           if (node.tag === 'style' && node.children.length) {
+            if (!cssPlugin) {
+              cssPlugin = findCssPlugin(config)
+            }
             const styleNode = node.children.pop() as TextNode
             resolveStyleAssetsTask.push(
-              cssCompiler
-                .compile(id + '.css', styleNode.content, this)
-                .then((compileResult) => {
+              Promise.resolve(
+                cssPlugin.transform!.call(this, styleNode.content, id + '.css')
+              ).then((compileResult) => {
+                if (compileResult) {
+                  const code =
+                    typeof compileResult === 'string'
+                      ? compileResult
+                      : compileResult.code || ''
                   s.overwrite(
                     styleNode.loc.start.offset,
                     styleNode.loc.end.offset,
-                    compileResult.code
+                    code
                   )
-                })
+                }
+              })
             )
           }
 

From 8cf63a340e5f1276b97ece21e4eea8f2ba0fd9d5 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Fri, 17 Dec 2021 15:55:47 +0800
Subject: [PATCH 11/35] refactor: `import` proxy handle css tag in html

---
 packages/playground/assets/css/import.css |   3 +
 packages/playground/assets/index.html     |   9 +-
 packages/vite/src/node/plugins/html.ts    | 102 ++++++++++------------
 packages/vite/src/node/plugins/index.ts   |   4 +-
 4 files changed, 53 insertions(+), 65 deletions(-)
 create mode 100644 packages/playground/assets/css/import.css

diff --git a/packages/playground/assets/css/import.css b/packages/playground/assets/css/import.css
new file mode 100644
index 00000000000000..2dad6b70987ddd
--- /dev/null
+++ b/packages/playground/assets/css/import.css
@@ -0,0 +1,3 @@
+.import-css {
+  color: #0088ff;
+}
diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
index 0d06c76d173c75..def42e2236a151 100644
--- a/packages/playground/assets/index.html
+++ b/packages/playground/assets/index.html
@@ -147,10 +147,7 @@ <h3>url</h3>
     background-size: 10px 10px;
   }
 </style>
-<div
-  class="inline-style-url"
-  style="background: url('./nested/asset.png'); background-size: 10px 10px"
->
+<div style="background: url('./nested/asset.png'); background-size: 10px 10px">
   inline style
 </div>
 <div class="style-url-assets">use style class</div>
@@ -166,9 +163,9 @@ <h3>base64</h3>
 </p>
 <p class="style-base64-assets">use style class</p>
 
-<h3>@import</h3>
+<h3 class="import-css">@import</h3>
 <style class="style-import">
-  @import url('./css/css-url.css');
+  @import url('./css/import.css');
 </style>
 
 <script type="module">
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 2c9400ccdfb498..b937b7ae04b51b 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -29,7 +29,7 @@ import {
   TextNode
 } from '@vue/compiler-dom'
 
-const htmlProxyRE = /\?html-proxy&index=(\d+)\.js$/
+const htmlProxyRE = /\?html-proxy&index=(\d+)\.(js|css)$/
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 
 // HTML Proxy Caches are stored by config -> filePath -> index
@@ -38,9 +38,9 @@ export const htmlProxyMap = new WeakMap<
   Map<string, Array<string>>
 >()
 
-export function htmlInlineScriptProxyPlugin(config: ResolvedConfig): Plugin {
+export function htmlInlineScriptStyleProxyPlugin(config: ResolvedConfig): Plugin {
   return {
-    name: 'vite:html-inline-script-proxy',
+    name: 'vite:html-inline-script-style-proxy',
 
     resolveId(id) {
       if (htmlProxyRE.test(id)) {
@@ -162,18 +162,6 @@ function formatParseError(e: any, id: string, html: string): Error {
   return e
 }
 
-function findCssPlugin(config: ResolvedConfig) {
-  const pluginName = 'vite:css'
-  const plugin = config.plugins.find((p) => p.name === pluginName)
-  if (!plugin) {
-    throw new Error(`failed to find plugin ${pluginName}`)
-  }
-  if (!plugin.transform) {
-    throw new Error(`plugin ${pluginName} has no transform`)
-  }
-  return plugin
-}
-
 /**
  * Compiles index.html into an entry js module
  */
@@ -185,7 +173,6 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
     isExternalUrl(url) ||
     isDataUrl(url) ||
     checkPublicFile(url, config)
-  let cssPlugin: Plugin | null = null
 
   return {
     name: 'vite:build-html',
@@ -212,7 +199,6 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         let someScriptsAreAsync = false
         let someScriptsAreDefer = false
 
-        const resolveStyleAssetsTask: Array<Promise<any>> = []
         await traverseHtml(html, id, (node) => {
           if (node.type !== NodeTypes.ELEMENT) {
             return
@@ -302,53 +288,56 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             (prop) =>
               prop.name === 'style' &&
               prop.type === NodeTypes.ATTRIBUTE &&
-              prop.value
+              prop.value &&
+              prop.value.content.includes('url(')
           ) as AttributeNode
           if (inlineStyle) {
-            if (!cssPlugin) {
-              cssPlugin = findCssPlugin(config)
-            }
+            inlineModuleIndex++
+            const classPropsNode = node.props.find(
+              (prop) =>
+                prop.name === 'class' &&
+                prop.type === NodeTypes.ATTRIBUTE &&
+                prop.value
+            ) as AttributeNode
             const styleNode = inlineStyle.value!
-            resolveStyleAssetsTask.push(
-              Promise.resolve(
-                cssPlugin.transform!.call(this, styleNode.content, id + '.css')
-              ).then((compileResult) => {
-                if (compileResult) {
-                  const code =
-                    typeof compileResult === 'string'
-                      ? compileResult
-                      : compileResult.code || ''
-                  s.overwrite(
-                    styleNode.loc.start.offset,
-                    styleNode.loc.end.offset,
-                    `"${code}"`
-                  )
-                }
-              })
+            const code = styleNode.content!
+            const filePath = id.replace(normalizePath(config.root), '')
+            const scopedName = `__vite_inline${inlineModuleIndex}`
+            addToHTMLProxyCache(
+              config,
+              filePath,
+              inlineModuleIndex,
+              `.${scopedName}{ ${code} }`
             )
+            js += `\nimport "${id}?html-proxy&index=${inlineModuleIndex}.css"`
+            if (classPropsNode) {
+              const classPropValue = classPropsNode.value!
+              s.remove(inlineStyle.loc.start.offset, inlineStyle.loc.end.offset)
+              s.overwrite(
+                classPropValue.loc.start.offset,
+                classPropValue.loc.end.offset,
+                `"${classPropValue.content} ${scopedName}"`
+              )
+            } else {
+              s.overwrite(
+                inlineStyle.loc.start.offset,
+                inlineStyle.loc.end.offset,
+                `class="${scopedName}"`
+              )
+            }
           }
           if (node.tag === 'style' && node.children.length) {
-            if (!cssPlugin) {
-              cssPlugin = findCssPlugin(config)
-            }
             const styleNode = node.children.pop() as TextNode
-            resolveStyleAssetsTask.push(
-              Promise.resolve(
-                cssPlugin.transform!.call(this, styleNode.content, id + '.css')
-              ).then((compileResult) => {
-                if (compileResult) {
-                  const code =
-                    typeof compileResult === 'string'
-                      ? compileResult
-                      : compileResult.code || ''
-                  s.overwrite(
-                    styleNode.loc.start.offset,
-                    styleNode.loc.end.offset,
-                    code
-                  )
-                }
-              })
+            const filePath = id.replace(normalizePath(config.root), '')
+            inlineModuleIndex++
+            addToHTMLProxyCache(
+              config,
+              filePath,
+              inlineModuleIndex,
+              styleNode.content
             )
+            js += `\nimport "${id}?html-proxy&index=${inlineModuleIndex}.css"`
+            shouldRemove = true
           }
 
           if (shouldRemove) {
@@ -357,7 +346,6 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             s.remove(node.loc.start.offset, node.loc.end.offset)
           }
         })
-        await Promise.all(resolveStyleAssetsTask)
 
         isAsyncScriptMap.get(config)!.set(id, everyScriptIsAsync)
 
diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
index 54a7ae8589b2a6..2bf5d3419e21cb 100644
--- a/packages/vite/src/node/plugins/index.ts
+++ b/packages/vite/src/node/plugins/index.ts
@@ -8,7 +8,7 @@ import { importAnalysisPlugin } from './importAnalysis'
 import { cssPlugin, cssPostPlugin } from './css'
 import { assetPlugin } from './asset'
 import { clientInjectionsPlugin } from './clientInjections'
-import { htmlInlineScriptProxyPlugin } from './html'
+import { htmlInlineScriptStyleProxyPlugin } from './html'
 import { wasmPlugin } from './wasm'
 import { modulePreloadPolyfillPlugin } from './modulePreloadPolyfill'
 import { webWorkerPlugin } from './worker'
@@ -45,7 +45,7 @@ export async function resolvePlugins(
       asSrc: true
     }),
     config.build.ssr ? ssrRequireHookPlugin(config) : null,
-    htmlInlineScriptProxyPlugin(config),
+    htmlInlineScriptStyleProxyPlugin(config),
     cssPlugin(config),
     config.esbuild !== false ? esbuildPlugin(config.esbuild) : null,
     jsonPlugin(

From 676b01b792e97abfd4d8e452ba902ba3863703df Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Fri, 17 Dec 2021 16:12:06 +0800
Subject: [PATCH 12/35] chore: format

---
 packages/vite/src/node/plugins/html.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 216927c5db3314..770657614aaac0 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -38,7 +38,9 @@ export const htmlProxyMap = new WeakMap<
   Map<string, Array<string>>
 >()
 
-export function htmlInlineScriptStyleProxyPlugin(config: ResolvedConfig): Plugin {
+export function htmlInlineScriptStyleProxyPlugin(
+  config: ResolvedConfig
+): Plugin {
   return {
     name: 'vite:html-inline-script-style-proxy',
 

From 013071f0a935db2215e0eb700ec46b77e3bdde1d Mon Sep 17 00:00:00 2001
From: poyoho <36070057+poyoho@users.noreply.github.com>
Date: Fri, 17 Dec 2021 21:17:04 +0800
Subject: [PATCH 13/35] feat commit for style tag in html emit asset pipline

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
---
 packages/vite/src/node/plugins/html.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 770657614aaac0..e78ff2ae1d4b79 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -312,6 +312,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               `.${scopedName}{ ${code} }`
             )
             js += `\nimport "${id}?html-proxy&index=${inlineModuleIndex}.css"`
+            // Add the scopedName class to the tag
             if (classPropsNode) {
               const classPropValue = classPropsNode.value!
               s.remove(inlineStyle.loc.start.offset, inlineStyle.loc.end.offset)

From c16aec7cd4424678d55e9073eb3e1d89bd2d4e4b Mon Sep 17 00:00:00 2001
From: poyoho <36070057+poyoho@users.noreply.github.com>
Date: Fri, 17 Dec 2021 21:17:29 +0800
Subject: [PATCH 14/35] feat: commit for style tag in html emit asset pipline

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
---
 packages/vite/src/node/plugins/html.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index e78ff2ae1d4b79..281da0a071b133 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -285,7 +285,8 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               }
             }
           }
-          // for style tag and inline style use url(...) for assets references, also generate an import
+          // <tag style="... url(...) ..."></tag>
+          // extract inline styles as virtual css and add class attribute to tag for selecting
           const inlineStyle = node.props.find(
             (prop) =>
               prop.name === 'style' &&

From 6e02f9b26defbd91e4753c69f3d0f3dd5b4cba0e Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Fri, 17 Dec 2021 21:25:01 +0800
Subject: [PATCH 15/35] feat: comment

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

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 281da0a071b133..f801998e81f77d 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -292,16 +292,12 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               prop.name === 'style' &&
               prop.type === NodeTypes.ATTRIBUTE &&
               prop.value &&
-              prop.value.content.includes('url(')
+              prop.value.content.includes('url(') // only url(...) in css need to emit file
           ) as AttributeNode
           if (inlineStyle) {
             inlineModuleIndex++
-            const classPropsNode = node.props.find(
-              (prop) =>
-                prop.name === 'class' &&
-                prop.type === NodeTypes.ATTRIBUTE &&
-                prop.value
-            ) as AttributeNode
+            // replace `inline style` to class
+            // and import css in js code
             const styleNode = inlineStyle.value!
             const code = styleNode.content!
             const filePath = id.replace(normalizePath(config.root), '')
@@ -313,7 +309,14 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               `.${scopedName}{ ${code} }`
             )
             js += `\nimport "${id}?html-proxy&index=${inlineModuleIndex}.css"`
+
             // Add the scopedName class to the tag
+            const classPropsNode = node.props.find(
+              (prop) =>
+                prop.name === 'class' &&
+                prop.type === NodeTypes.ATTRIBUTE &&
+                prop.value
+            ) as AttributeNode
             if (classPropsNode) {
               const classPropValue = classPropsNode.value!
               s.remove(inlineStyle.loc.start.offset, inlineStyle.loc.end.offset)
@@ -330,6 +333,8 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
               )
             }
           }
+
+          // <style>...</style>
           if (node.tag === 'style' && node.children.length) {
             const styleNode = node.children.pop() as TextNode
             const filePath = id.replace(normalizePath(config.root), '')

From b41e001b2a7616ed21f175379d3ba9a25c0fb7ee Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 19 Dec 2021 07:51:19 +0800
Subject: [PATCH 16/35] fix: html-inline-script-style-proxy ->
 html-inline-proxy

Co-authored-by: Shinigami <chrissi92@hotmail.de>
---
 packages/vite/src/node/plugins/html.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index f801998e81f77d..111d99b732650b 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -42,7 +42,7 @@ export function htmlInlineScriptStyleProxyPlugin(
   config: ResolvedConfig
 ): Plugin {
   return {
-    name: 'vite:html-inline-script-style-proxy',
+    name: 'vite:html-inline-proxy',
 
     resolveId(id) {
       if (htmlProxyRE.test(id)) {

From d533d2a1fbd6d85809fa168dba30a41ee66a6092 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 19 Dec 2021 07:51:27 +0800
Subject: [PATCH 17/35] fix: html-inline-script-style-proxy ->
 html-inline-proxy

Co-authored-by: Shinigami <chrissi92@hotmail.de>
---
 packages/vite/src/node/plugins/html.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 111d99b732650b..b44ac732c6d7e5 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -38,7 +38,7 @@ export const htmlProxyMap = new WeakMap<
   Map<string, Array<string>>
 >()
 
-export function htmlInlineScriptStyleProxyPlugin(
+export function htmlInlineProxyPlugin(
   config: ResolvedConfig
 ): Plugin {
   return {

From b2c6756ea33a8b0383cd7c1467e6f04389e3a93f Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 19 Dec 2021 07:51:36 +0800
Subject: [PATCH 18/35] fix: html-inline-script-style-proxy ->
 html-inline-proxy

Co-authored-by: Shinigami <chrissi92@hotmail.de>
---
 packages/vite/src/node/plugins/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
index 2bf5d3419e21cb..15ab4009b8e0b5 100644
--- a/packages/vite/src/node/plugins/index.ts
+++ b/packages/vite/src/node/plugins/index.ts
@@ -8,7 +8,7 @@ import { importAnalysisPlugin } from './importAnalysis'
 import { cssPlugin, cssPostPlugin } from './css'
 import { assetPlugin } from './asset'
 import { clientInjectionsPlugin } from './clientInjections'
-import { htmlInlineScriptStyleProxyPlugin } from './html'
+import { htmlInlineProxyPlugin } from './html'
 import { wasmPlugin } from './wasm'
 import { modulePreloadPolyfillPlugin } from './modulePreloadPolyfill'
 import { webWorkerPlugin } from './worker'

From a19bdda8f3efbfccd3e26b766bcdd9aae1ed4a0b Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 19 Dec 2021 07:51:42 +0800
Subject: [PATCH 19/35] fix: html-inline-script-style-proxy ->
 html-inline-proxy

Co-authored-by: Shinigami <chrissi92@hotmail.de>
---
 packages/vite/src/node/plugins/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
index 15ab4009b8e0b5..b2d9fe28328ec6 100644
--- a/packages/vite/src/node/plugins/index.ts
+++ b/packages/vite/src/node/plugins/index.ts
@@ -45,7 +45,7 @@ export async function resolvePlugins(
       asSrc: true
     }),
     config.build.ssr ? ssrRequireHookPlugin(config) : null,
-    htmlInlineScriptStyleProxyPlugin(config),
+    htmlInlineProxyPlugin(config),
     cssPlugin(config),
     config.esbuild !== false ? esbuildPlugin(config.esbuild) : null,
     jsonPlugin(

From 1a0400caeb420bc12a5b9baf36bc20158a0e7dcb Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 19 Dec 2021 08:55:48 +0800
Subject: [PATCH 20/35] chore: format

---
 packages/vite/src/node/plugins/html.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index b44ac732c6d7e5..aa007be33be46d 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -38,9 +38,7 @@ export const htmlProxyMap = new WeakMap<
   Map<string, Array<string>>
 >()
 
-export function htmlInlineProxyPlugin(
-  config: ResolvedConfig
-): Plugin {
+export function htmlInlineProxyPlugin(config: ResolvedConfig): Plugin {
   return {
     name: 'vite:html-inline-proxy',
 

From fc82dec4ce2a6245237188b3e0cadff05b8d10c4 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 19 Dec 2021 20:27:35 +0800
Subject: [PATCH 21/35] refactor: use map to resolve inline style

---
 packages/vite/src/node/plugins/css.ts    | 16 ++++-
 packages/vite/src/node/plugins/html.ts   | 76 ++++++++++++++----------
 packages/vite/src/node/plugins/index.ts  |  3 +-
 packages/vite/src/node/plugins/worker.ts | 15 +----
 packages/vite/src/node/utils.ts          |  9 +++
 5 files changed, 73 insertions(+), 46 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 2a66e7b5cb4b93..957b1a49e73748 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -10,7 +10,8 @@ import {
   isDataUrl,
   isObject,
   normalizePath,
-  processSrcSet
+  processSrcSet,
+  parseRequest
 } from '../utils'
 import { Plugin } from '../plugin'
 import { ResolvedConfig } from '../config'
@@ -43,6 +44,7 @@ import type Less from 'less'
 import { Alias } from 'types/alias'
 import type { ModuleNode } from '../server/moduleGraph'
 import { transform, formatMessages } from 'esbuild'
+import { addToHTMLProxyTransformResult } from './html'
 
 // const debug = createDebugger('vite:css')
 
@@ -86,6 +88,7 @@ const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`
 const cssLangRE = new RegExp(cssLangs)
 const cssModuleRE = new RegExp(`\\.module${cssLangs}`)
 const directRequestRE = /(\?|&)direct\b/
+const htmlProxyRE = /(\?|&)html-proxy\b/
 const commonjsProxyRE = /\?commonjs-proxy/
 const inlineRE = /(\?|&)inline\b/
 const usedRE = /(\?|&)used\b/
@@ -279,7 +282,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         return
       }
 
+      const query = parseRequest(id)
       const inlined = inlineRE.test(id)
+      const isHTMLProxy = htmlProxyRE.test(id)
       const modules = cssModulesCache.get(config)!.get(id)
       const modulesCode =
         modules && dataToEsm(modules, { namedExports: true, preferConst: true })
@@ -312,6 +317,15 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       // build CSS handling ----------------------------------------------------
 
       // record css
+      // cache css compile result to map
+      if (inlined && isHTMLProxy) {
+        addToHTMLProxyTransformResult(
+          `${cleanUrl(id)}_${Number.parseInt(query!.index)}`,
+          css
+        )
+        // and replace inline style when `renderChunk` in vite:html-inline-proxy plugin
+        return `export default ''`
+      }
       if (!inlined) {
         styles.set(id, css)
       }
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index aa007be33be46d..43b8cb94c45b98 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -29,7 +29,8 @@ import {
   TextNode
 } from '@vue/compiler-dom'
 
-const htmlProxyRE = /\?html-proxy&index=(\d+)\.(js|css)$/
+const htmlProxyRE = /\?html-proxy[&inline]*&index=(\d+)\.(js|css)$/
+const inlineCSSRE = /__VITE_INLINECSS__([^_]+_\d+)__/g
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 
 // HTML Proxy Caches are stored by config -> filePath -> index
@@ -38,6 +39,9 @@ export const htmlProxyMap = new WeakMap<
   Map<string, Array<string>>
 >()
 
+//  HTML Proxy Transform result are stored by config config -> hash
+export const htmlProxyResult = new Map<string, string>()
+
 export function htmlInlineProxyPlugin(config: ResolvedConfig): Plugin {
   return {
     name: 'vite:html-inline-proxy',
@@ -69,7 +73,18 @@ export function htmlInlineProxyPlugin(config: ResolvedConfig): Plugin {
   }
 }
 
-/** Add script to cache */
+export function htmlInlineProxyPostPlugin(config: ResolvedConfig): Plugin {
+  return {
+    name: 'vite:html-inline-proxy-post',
+
+    renderChunk(code) {
+      console.log(code);
+      return code
+    }
+  }
+}
+
+/** Add html proxy to cache */
 export function addToHTMLProxyCache(
   config: ResolvedConfig,
   filePath: string,
@@ -85,6 +100,11 @@ export function addToHTMLProxyCache(
   htmlProxyMap.get(config)!.get(filePath)![index] = code
 }
 
+/* Add transform result to cache */
+export function addToHTMLProxyTransformResult(hash: string, code: string) {
+  htmlProxyResult.set(hash, code)
+}
+
 // this extends the config in @vue/compiler-sfc with <link href>
 export const assetAttrsConfig: Record<string, string[]> = {
   link: ['href'],
@@ -299,37 +319,16 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             const styleNode = inlineStyle.value!
             const code = styleNode.content!
             const filePath = id.replace(normalizePath(config.root), '')
-            const scopedName = `__vite_inline${inlineModuleIndex}`
-            addToHTMLProxyCache(
-              config,
-              filePath,
-              inlineModuleIndex,
-              `.${scopedName}{ ${code} }`
+            addToHTMLProxyCache(config, filePath, inlineModuleIndex, code)
+            // will transform with css plugin and cache result with css-post plugin
+            js += `\nimport "${id}?html-proxy&inline&index=${inlineModuleIndex}.css"`
+
+            // will transfrom in `applyHtmlTransforms`
+            s.overwrite(
+              styleNode.loc.start.offset,
+              styleNode.loc.end.offset,
+              `"__VITE_INLINECSS__${cleanUrl(id)}_${inlineModuleIndex}__"`
             )
-            js += `\nimport "${id}?html-proxy&index=${inlineModuleIndex}.css"`
-
-            // Add the scopedName class to the tag
-            const classPropsNode = node.props.find(
-              (prop) =>
-                prop.name === 'class' &&
-                prop.type === NodeTypes.ATTRIBUTE &&
-                prop.value
-            ) as AttributeNode
-            if (classPropsNode) {
-              const classPropValue = classPropsNode.value!
-              s.remove(inlineStyle.loc.start.offset, inlineStyle.loc.end.offset)
-              s.overwrite(
-                classPropValue.loc.start.offset,
-                classPropValue.loc.end.offset,
-                `"${classPropValue.content} ${scopedName}"`
-              )
-            } else {
-              s.overwrite(
-                inlineStyle.loc.start.offset,
-                inlineStyle.loc.end.offset,
-                `class="${scopedName}"`
-              )
-            }
           }
 
           // <style>...</style>
@@ -642,6 +641,19 @@ export async function applyHtmlTransforms(
   const bodyTags: HtmlTagDescriptor[] = []
   const bodyPrependTags: HtmlTagDescriptor[] = []
 
+  // no use assets plugin because it will emit file
+  let match: RegExpExecArray | null
+  let s: MagicString | undefined
+  while ((match = inlineCSSRE.exec(html))) {
+    s = s || (s = new MagicString(html))
+    const { 0: full, 1: scopedName } = match
+    const cssTransformedCode = htmlProxyResult.get(scopedName)!
+    s.overwrite(match.index, match.index + full.length, cssTransformedCode)
+  }
+  if (s) {
+    html = s.toString()
+  }
+
   for (const hook of hooks) {
     const res = await hook(html, ctx)
     if (!res) {
diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
index b2d9fe28328ec6..d4ddf0caa26374 100644
--- a/packages/vite/src/node/plugins/index.ts
+++ b/packages/vite/src/node/plugins/index.ts
@@ -8,7 +8,7 @@ import { importAnalysisPlugin } from './importAnalysis'
 import { cssPlugin, cssPostPlugin } from './css'
 import { assetPlugin } from './asset'
 import { clientInjectionsPlugin } from './clientInjections'
-import { htmlInlineProxyPlugin } from './html'
+import { htmlInlineProxyPlugin, htmlInlineProxyPostPlugin } from './html'
 import { wasmPlugin } from './wasm'
 import { modulePreloadPolyfillPlugin } from './modulePreloadPolyfill'
 import { webWorkerPlugin } from './worker'
@@ -61,6 +61,7 @@ export async function resolvePlugins(
     ...normalPlugins,
     definePlugin(config),
     cssPostPlugin(config),
+    htmlInlineProxyPostPlugin(config),
     ...buildPlugins.pre,
     ...postPlugins,
     ...buildPlugins.post,
diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 799233088d6b13..6c1388c11611de 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -1,22 +1,13 @@
 import { ResolvedConfig } from '../config'
 import { Plugin } from '../plugin'
 import { resolvePlugins } from '../plugins'
-import { parse as parseUrl, URLSearchParams } from 'url'
 import { fileToUrl, getAssetHash } from './asset'
-import { cleanUrl, injectQuery } from '../utils'
+import { cleanUrl, injectQuery, parseRequest } from '../utils'
 import Rollup from 'rollup'
 import { ENV_PUBLIC_PATH } from '../constants'
 import path from 'path'
 import { onRollupWarning } from '../build'
 
-function parseWorkerRequest(id: string): Record<string, string> | null {
-  const { search } = parseUrl(id)
-  if (!search) {
-    return null
-  }
-  return Object.fromEntries(new URLSearchParams(search.slice(1)))
-}
-
 const WorkerFileId = 'worker_file'
 
 export function webWorkerPlugin(config: ResolvedConfig): Plugin {
@@ -27,7 +18,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
 
     load(id) {
       if (isBuild) {
-        const parsedQuery = parseWorkerRequest(id)
+        const parsedQuery = parseRequest(id)
         if (
           parsedQuery &&
           (parsedQuery.worker ?? parsedQuery.sharedworker) != null
@@ -38,7 +29,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
     },
 
     async transform(_, id) {
-      const query = parseWorkerRequest(id)
+      const query = parseRequest(id)
       if (query && query[WorkerFileId] != null) {
         return {
           code: `import '${ENV_PUBLIC_PATH}'\n` + _
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 4f005f21c3cf54..3f078f0bbff9cd 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -20,6 +20,7 @@ import {
   RawSourceMap
 } from '@ampproject/remapping/dist/types/types'
 import { performance } from 'perf_hooks'
+import { parse as parseUrl, URLSearchParams } from 'url'
 
 export function slash(p: string): string {
   return p.replace(/\\/g, '/')
@@ -631,3 +632,11 @@ export const usingDynamicImport = typeof jest === 'undefined'
 export const dynamicImport = usingDynamicImport
   ? new Function('file', 'return import(file)')
   : require
+
+export function parseRequest(id: string): Record<string, string> | null {
+  const { search } = parseUrl(id)
+  if (!search) {
+    return null
+  }
+  return Object.fromEntries(new URLSearchParams(search.slice(1)))
+}

From 5229ab34dca0c325dcfa80fced04c29575ed8630 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 19 Dec 2021 21:23:27 +0800
Subject: [PATCH 22/35] fix: overwrite inlineCSSRE

---
 packages/vite/src/node/plugins/html.ts  | 43 +++++++++----------------
 packages/vite/src/node/plugins/index.ts |  3 +-
 2 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 43b8cb94c45b98..f1aaca3792ea44 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -73,17 +73,6 @@ export function htmlInlineProxyPlugin(config: ResolvedConfig): Plugin {
   }
 }
 
-export function htmlInlineProxyPostPlugin(config: ResolvedConfig): Plugin {
-  return {
-    name: 'vite:html-inline-proxy-post',
-
-    renderChunk(code) {
-      console.log(code);
-      return code
-    }
-  }
-}
-
 /** Add html proxy to cache */
 export function addToHTMLProxyCache(
   config: ResolvedConfig,
@@ -488,9 +477,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         const isAsync = isAsyncScriptMap.get(config)!.get(id)!
 
         // resolve asset url references
-        let result = html.replace(assetUrlRE, (_, fileHash, postfix = '') => {
-          return config.base + getAssetFilename(fileHash, config) + postfix
-        })
+        let result = html
 
         // find corresponding entry chunk
         const chunk = Object.values(bundle).find(
@@ -542,12 +529,27 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         }
 
         const shortEmitName = path.posix.relative(config.root, id)
+        // no use assets plugin because it will emit file
+        let match: RegExpExecArray | null
+        let s: MagicString | undefined
+        while ((match = inlineCSSRE.exec(html))) {
+          s = s || (s = new MagicString(html))
+          const { 0: full, 1: scopedName } = match
+          const cssTransformedCode = htmlProxyResult.get(scopedName)!
+          s.overwrite(match.index, match.index + full.length, cssTransformedCode)
+        }
+        if (s) {
+          result = s.toString()
+        }
         result = await applyHtmlTransforms(result, postHooks, {
           path: '/' + shortEmitName,
           filename: id,
           bundle,
           chunk
         })
+        result = result.replace(assetUrlRE, (_, fileHash, postfix = '') => {
+          return config.base + getAssetFilename(fileHash, config) + postfix
+        })
 
         if (chunk && canInlineEntry) {
           // all imports from entry have been inlined to html, prevent rollup from outputting it
@@ -641,19 +643,6 @@ export async function applyHtmlTransforms(
   const bodyTags: HtmlTagDescriptor[] = []
   const bodyPrependTags: HtmlTagDescriptor[] = []
 
-  // no use assets plugin because it will emit file
-  let match: RegExpExecArray | null
-  let s: MagicString | undefined
-  while ((match = inlineCSSRE.exec(html))) {
-    s = s || (s = new MagicString(html))
-    const { 0: full, 1: scopedName } = match
-    const cssTransformedCode = htmlProxyResult.get(scopedName)!
-    s.overwrite(match.index, match.index + full.length, cssTransformedCode)
-  }
-  if (s) {
-    html = s.toString()
-  }
-
   for (const hook of hooks) {
     const res = await hook(html, ctx)
     if (!res) {
diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
index d4ddf0caa26374..b2d9fe28328ec6 100644
--- a/packages/vite/src/node/plugins/index.ts
+++ b/packages/vite/src/node/plugins/index.ts
@@ -8,7 +8,7 @@ import { importAnalysisPlugin } from './importAnalysis'
 import { cssPlugin, cssPostPlugin } from './css'
 import { assetPlugin } from './asset'
 import { clientInjectionsPlugin } from './clientInjections'
-import { htmlInlineProxyPlugin, htmlInlineProxyPostPlugin } from './html'
+import { htmlInlineProxyPlugin } from './html'
 import { wasmPlugin } from './wasm'
 import { modulePreloadPolyfillPlugin } from './modulePreloadPolyfill'
 import { webWorkerPlugin } from './worker'
@@ -61,7 +61,6 @@ export async function resolvePlugins(
     ...normalPlugins,
     definePlugin(config),
     cssPostPlugin(config),
-    htmlInlineProxyPostPlugin(config),
     ...buildPlugins.pre,
     ...postPlugins,
     ...buildPlugins.post,

From ed42247f8af5314cb48f307880ab8eb68e29e46c Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 19 Dec 2021 21:38:25 +0800
Subject: [PATCH 23/35] chore: format

---
 packages/vite/src/node/plugins/html.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index f1aaca3792ea44..23a0ca2eb0ed03 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -536,7 +536,11 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           s = s || (s = new MagicString(html))
           const { 0: full, 1: scopedName } = match
           const cssTransformedCode = htmlProxyResult.get(scopedName)!
-          s.overwrite(match.index, match.index + full.length, cssTransformedCode)
+          s.overwrite(
+            match.index,
+            match.index + full.length,
+            cssTransformedCode
+          )
         }
         if (s) {
           result = s.toString()

From 30255a5b5f47ae305f62c14f23e4b305dd11ce2d Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 19 Dec 2021 23:20:06 +0800
Subject: [PATCH 24/35] fix: use error variable to overwrite

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

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 23a0ca2eb0ed03..e53697ca70f352 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -532,8 +532,8 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         // no use assets plugin because it will emit file
         let match: RegExpExecArray | null
         let s: MagicString | undefined
-        while ((match = inlineCSSRE.exec(html))) {
-          s = s || (s = new MagicString(html))
+        while ((match = inlineCSSRE.exec(result))) {
+          s = s || (s = new MagicString(result))
           const { 0: full, 1: scopedName } = match
           const cssTransformedCode = htmlProxyResult.get(scopedName)!
           s.overwrite(

From c2d050828025ef23f1f1f351ac9c3a62fd088f0f Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Mon, 20 Dec 2021 23:09:03 +0800
Subject: [PATCH 25/35] chore: nice naming

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

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index c32c3c1526692e..e52dac7b867d4d 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -36,7 +36,7 @@ import type {
 import { NodeTypes } from '@vue/compiler-dom'
 
 const htmlProxyRE = /\?html-proxy[&inline]*&index=(\d+)\.(js|css)$/
-const inlineCSSRE = /__VITE_INLINECSS__([^_]+_\d+)__/g
+const inlineCSSRE = /__VITE_INLINE_CSS__([^_]+_\d+)__/g
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 
 // HTML Proxy Caches are stored by config -> filePath -> index
@@ -342,7 +342,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             s.overwrite(
               styleNode.loc.start.offset,
               styleNode.loc.end.offset,
-              `"__VITE_INLINECSS__${cleanUrl(id)}_${inlineModuleIndex}__"`
+              `"__VITE_INLINE_CSS__${cleanUrl(id)}_${inlineModuleIndex}__"`
             )
           }
 

From fd5ed804e6d5da2e147d1079fe9abf82b3819202 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 23 Dec 2021 18:19:21 +0800
Subject: [PATCH 26/35] fix: use diff name and rewrite comment

---
 packages/vite/src/node/plugins/css.ts  | 4 +++-
 packages/vite/src/node/plugins/html.ts | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 8142bd902d7119..98323439c859c2 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -91,6 +91,7 @@ const directRequestRE = /(\?|&)direct\b/
 const htmlProxyRE = /(\?|&)html-proxy\b/
 const commonjsProxyRE = /\?commonjs-proxy/
 const inlineRE = /(\?|&)inline\b/
+const inlineCSSRE = /(\?|&)inline-css\b/
 const usedRE = /(\?|&)used\b/
 
 const enum PreprocessLang {
@@ -284,6 +285,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
       const query = parseRequest(id)
       const inlined = inlineRE.test(id)
+      const inlineCSS = inlineCSSRE.test(id)
       const isHTMLProxy = htmlProxyRE.test(id)
       const modules = cssModulesCache.get(config)!.get(id)
       const modulesCode =
@@ -318,7 +320,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
       // record css
       // cache css compile result to map
-      if (inlined && isHTMLProxy) {
+      if (inlineCSS && isHTMLProxy) {
         addToHTMLProxyTransformResult(
           `${cleanUrl(id)}_${Number.parseInt(query!.index)}`,
           css
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index e52dac7b867d4d..e24620fca1cea5 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -45,7 +45,8 @@ export const htmlProxyMap = new WeakMap<
   Map<string, Array<string>>
 >()
 
-//  HTML Proxy Transform result are stored by config config -> hash
+// HTML Proxy Transform result are stored by config
+// `${importer}_${query.index}` -> transformed css code
 export const htmlProxyResult = new Map<string, string>()
 
 export function htmlInlineProxyPlugin(config: ResolvedConfig): Plugin {
@@ -336,7 +337,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
             const filePath = id.replace(normalizePath(config.root), '')
             addToHTMLProxyCache(config, filePath, inlineModuleIndex, code)
             // will transform with css plugin and cache result with css-post plugin
-            js += `\nimport "${id}?html-proxy&inline&index=${inlineModuleIndex}.css"`
+            js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.css"`
 
             // will transfrom in `applyHtmlTransforms`
             s.overwrite(

From def28358b77e6b500b27248ce42de4e132c7da92 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 23 Dec 2021 18:23:50 +0800
Subject: [PATCH 27/35] chore: remove useless comment

---
 packages/vite/src/node/plugins/html.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index e24620fca1cea5..6f27362c80127a 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -80,7 +80,6 @@ export function htmlInlineProxyPlugin(config: ResolvedConfig): Plugin {
   }
 }
 
-/** Add html proxy to cache */
 export function addToHTMLProxyCache(
   config: ResolvedConfig,
   filePath: string,
@@ -96,7 +95,6 @@ export function addToHTMLProxyCache(
   htmlProxyMap.get(config)!.get(filePath)![index] = code
 }
 
-/* Add transform result to cache */
 export function addToHTMLProxyTransformResult(hash: string, code: string) {
   htmlProxyResult.set(hash, code)
 }

From 57499add38439febccdb622b9c5260e496ae4b78 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 23 Dec 2021 18:25:39 +0800
Subject: [PATCH 28/35] fix: error comment

---
 packages/vite/src/node/plugins/html.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 6f27362c80127a..1659ece4e290b9 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -501,7 +501,6 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
       for (const [id, html] of processedHtml) {
         const isAsync = isAsyncScriptMap.get(config)!.get(id)!
 
-        // resolve asset url references
         let result = html
 
         // find corresponding entry chunk
@@ -576,6 +575,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           bundle,
           chunk
         })
+        // resolve asset url references
         result = result.replace(assetUrlRE, (_, fileHash, postfix = '') => {
           return config.base + getAssetFilename(fileHash, config) + postfix
         })

From 57cb5ce3021e027e70dad4f5479735a4e32296d2 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 23 Dec 2021 19:13:31 +0800
Subject: [PATCH 29/35] fix: htmlProxyRE

---
 packages/vite/src/node/plugins/html.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 1659ece4e290b9..4ff345de25b2c7 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -35,7 +35,7 @@ import type {
 } from '@vue/compiler-dom'
 import { NodeTypes } from '@vue/compiler-dom'
 
-const htmlProxyRE = /\?html-proxy[&inline]*&index=(\d+)\.(js|css)$/
+const htmlProxyRE = /\?html-proxy[&inline\-css]*&index=(\d+)\.(js|css)$/
 const inlineCSSRE = /__VITE_INLINE_CSS__([^_]+_\d+)__/g
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 

From 071fc65311c0dd6a8d7eac85c8d2609d11cdfde1 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 23 Dec 2021 22:01:50 +0800
Subject: [PATCH 30/35] chore: comment

---
 packages/vite/src/node/plugins/css.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 98323439c859c2..ab7f90afce2820 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -320,12 +320,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
 
       // record css
       // cache css compile result to map
+      // and then use the cache replace inline-style-flag when `generateBundle` in vite:build-html plugin
       if (inlineCSS && isHTMLProxy) {
         addToHTMLProxyTransformResult(
           `${cleanUrl(id)}_${Number.parseInt(query!.index)}`,
           css
         )
-        // and replace inline style when `renderChunk` in vite:html-inline-proxy plugin
         return `export default ''`
       }
       if (!inlined) {

From e0e59e6c746bcc272962ab621f7cb683a857bca2 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 23 Dec 2021 23:43:50 +0800
Subject: [PATCH 31/35] feat: add a comment for handling scripts

---
 packages/vite/src/node/plugins/html.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 4ff345de25b2c7..1a5bbb1b0fc799 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -47,6 +47,7 @@ export const htmlProxyMap = new WeakMap<
 
 // HTML Proxy Transform result are stored by config
 // `${importer}_${query.index}` -> transformed css code
+// PS: key like `/vite/packages/playground/assets/index.html_1`
 export const htmlProxyResult = new Map<string, string>()
 
 export function htmlInlineProxyPlugin(config: ResolvedConfig): Plugin {

From b57905c90e7308d9ffe6776c614f5429bee3c826 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 26 Dec 2021 20:57:08 +0800
Subject: [PATCH 32/35] perf: move these regex-tests down a bit, we could
 potentially safe some nanoseconds

---
 packages/vite/src/node/plugins/css.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index ab7f90afce2820..8e8fca997d58b9 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -283,10 +283,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         return
       }
 
-      const query = parseRequest(id)
       const inlined = inlineRE.test(id)
-      const inlineCSS = inlineCSSRE.test(id)
-      const isHTMLProxy = htmlProxyRE.test(id)
       const modules = cssModulesCache.get(config)!.get(id)
       const modulesCode =
         modules && dataToEsm(modules, { namedExports: true, preferConst: true })
@@ -321,6 +318,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       // record css
       // cache css compile result to map
       // 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)}`,

From 2264c0c6229d02d80cd7b6fc0ee119882251b240 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 26 Dec 2021 21:02:31 +0800
Subject: [PATCH 33/35] chore: use new syntax

---
 packages/vite/src/node/plugins/html.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 1a5bbb1b0fc799..1f46e6bef264b0 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -558,7 +558,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         let match: RegExpExecArray | null
         let s: MagicString | undefined
         while ((match = inlineCSSRE.exec(result))) {
-          s = s || (s = new MagicString(result))
+          s ||= new MagicString(result)
           const { 0: full, 1: scopedName } = match
           const cssTransformedCode = htmlProxyResult.get(scopedName)!
           s.overwrite(

From a639f1c3e1a37d9f06444624abb949e8231f0ae3 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 26 Dec 2021 21:05:51 +0800
Subject: [PATCH 34/35] feat: `addToHTMLProxyTransformResult` export type

---
 packages/vite/src/node/plugins/html.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 1f46e6bef264b0..82f27ee709b060 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -96,7 +96,7 @@ export function addToHTMLProxyCache(
   htmlProxyMap.get(config)!.get(filePath)![index] = code
 }
 
-export function addToHTMLProxyTransformResult(hash: string, code: string) {
+export function addToHTMLProxyTransformResult(hash: string, code: string): void {
   htmlProxyResult.set(hash, code)
 }
 

From 9237d9ff234ab24b3363f426fa8565b388bfa0cd Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 26 Dec 2021 21:15:02 +0800
Subject: [PATCH 35/35] chore: format

---
 packages/vite/src/node/plugins/html.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 82f27ee709b060..346d56d0a1f112 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -96,7 +96,10 @@ export function addToHTMLProxyCache(
   htmlProxyMap.get(config)!.get(filePath)![index] = code
 }
 
-export function addToHTMLProxyTransformResult(hash: string, code: string): void {
+export function addToHTMLProxyTransformResult(
+  hash: string,
+  code: string
+): void {
   htmlProxyResult.set(hash, code)
 }