From 30f413a3f8d1c07c64d0474a85a6aeed5e023b94 Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Mon, 30 May 2022 23:02:46 +0800
Subject: [PATCH 1/9] feat: css preprocessor for index.html

---
 packages/vite/src/node/plugins/html.ts           | 14 ++++++++++++--
 .../src/node/server/middlewares/indexHtml.ts     | 16 +++++++++++++---
 playground/css/__tests__/css.spec.ts             |  4 ++++
 playground/css/index.html                        |  7 ++++++-
 playground/css/scss/_app.scss                    |  3 +++
 5 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 playground/css/scss/_app.scss

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 9d06d6e168f2e1..726547da67f7aa 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -45,7 +45,8 @@ interface ScriptAssetsUrl {
   url: string
 }
 
-const htmlProxyRE = /\?html-proxy=?[&inline\-css]*&index=(\d+)\.(js|css)$/
+const htmlProxyRE =
+  /\?html-proxy=?[&inline\-css]*&index=(\d+)\.(js|css|less|sass|scss|styl|stylus|pcss|postcss)$/
 const inlineCSSRE = /__VITE_INLINE_CSS__([a-z\d]{8}_\d+)__/g
 // Do not allow preceding '.', but do allow preceding '...' for spread operations
 const inlineImportRE =
@@ -396,13 +397,22 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
           // <style>...</style>
           if (node.tag === 'style' && node.children.length) {
+            const lang =
+              (
+                node.props.find(
+                  (prop) =>
+                    prop.name === 'lang' &&
+                    prop.type === NodeTypes.ATTRIBUTE &&
+                    prop.value
+                ) as AttributeNode
+              )?.value?.content || 'css'
             const styleNode = node.children.pop() as TextNode
             const filePath = id.replace(normalizePath(config.root), '')
             inlineModuleIndex++
             addToHTMLProxyCache(config, filePath, inlineModuleIndex, {
               code: styleNode.content
             })
-            js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.css"`
+            js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.${lang}"`
             const hash = getHash(cleanUrl(id))
             // will transform in `applyHtmlTransforms`
             s.overwrite(
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
index 161c2c9065924d..7376f2163762ed 100644
--- a/packages/vite/src/node/server/middlewares/indexHtml.ts
+++ b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -36,6 +36,7 @@ interface AssetNode {
   start: number
   end: number
   code: string
+  lang: string
 }
 
 export function createDevHtmlTransformFn(
@@ -202,7 +203,16 @@ const devHtmlHook: IndexHtmlTransformHook = async (
       styleUrl.push({
         start: children.loc.start.offset,
         end: children.loc.end.offset,
-        code: children.content
+        code: children.content,
+        lang:
+          (
+            node.props.find(
+              (prop) =>
+                prop.name === 'lang' &&
+                prop.type === NodeTypes.ATTRIBUTE &&
+                prop.value
+            ) as AttributeNode
+          )?.value?.content || 'css'
       })
     }
 
@@ -222,8 +232,8 @@ const devHtmlHook: IndexHtmlTransformHook = async (
   })
 
   await Promise.all(
-    styleUrl.map(async ({ start, end, code }, index) => {
-      const url = `${proxyModulePath}?html-proxy&direct&index=${index}.css`
+    styleUrl.map(async ({ start, end, code, lang }, index) => {
+      const url = `${proxyModulePath}?html-proxy&direct&index=${index}.${lang}`
 
       // ensure module in graph after successful load
       const mod = await moduleGraph.ensureEntryFromUrl(url, false)
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index e9d1fccac61d6e..fd53aba7198bf9 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -417,3 +417,7 @@ test('PostCSS source.input.from includes query', async () => {
   // should resolve assets
   expect(code).toContain('/postcss-source-input.css?query=foo')
 })
+
+test('css preprocessor in index.html', async () => {
+  expect(await getColor('.scss-index-html')).toBe('red')
+})
diff --git a/playground/css/index.html b/playground/css/index.html
index 15e81192cec7f1..935915cbf40123 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -139,5 +139,10 @@ <h1>CSS</h1>
   <p>PostCSS source.input.from. Should include query</p>
   <pre class="postcss-source-input"></pre>
 </div>
-
+<style lang="scss">
+  @use 'scss/app';
+</style>
+<div class="scss-index-html">
+  (index.html inline css) scss pre-processor test (tobe red)
+</div>
 <script type="module" src="./main.js"></script>
diff --git a/playground/css/scss/_app.scss b/playground/css/scss/_app.scss
new file mode 100644
index 00000000000000..3a6038d8a56bb1
--- /dev/null
+++ b/playground/css/scss/_app.scss
@@ -0,0 +1,3 @@
+.scss-index-html {
+  color: red;
+}

From 88eadbb20334eb0ca27bb141b13776402276c1e5 Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Wed, 1 Jun 2022 17:07:38 +0800
Subject: [PATCH 2/9] chore: revert

---
 packages/vite/src/node/plugins/html.ts           | 14 ++------------
 .../src/node/server/middlewares/indexHtml.ts     | 16 +++-------------
 playground/css/index.html                        |  4 +---
 3 files changed, 6 insertions(+), 28 deletions(-)

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
index 726547da67f7aa..91efdd02e1413f 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -45,8 +45,7 @@ interface ScriptAssetsUrl {
   url: string
 }
 
-const htmlProxyRE =
-  /\?html-proxy=?[&inline\-css]*&index=(\d+)\.(js|css|less|sass|scss|styl|stylus|pcss|postcss)$/
+const htmlProxyRE = /\?html-proxy=?[&inline\-css]*&index=(\d+)\.css$/
 const inlineCSSRE = /__VITE_INLINE_CSS__([a-z\d]{8}_\d+)__/g
 // Do not allow preceding '.', but do allow preceding '...' for spread operations
 const inlineImportRE =
@@ -397,22 +396,13 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
           // <style>...</style>
           if (node.tag === 'style' && node.children.length) {
-            const lang =
-              (
-                node.props.find(
-                  (prop) =>
-                    prop.name === 'lang' &&
-                    prop.type === NodeTypes.ATTRIBUTE &&
-                    prop.value
-                ) as AttributeNode
-              )?.value?.content || 'css'
             const styleNode = node.children.pop() as TextNode
             const filePath = id.replace(normalizePath(config.root), '')
             inlineModuleIndex++
             addToHTMLProxyCache(config, filePath, inlineModuleIndex, {
               code: styleNode.content
             })
-            js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.${lang}"`
+            js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.css"`
             const hash = getHash(cleanUrl(id))
             // will transform in `applyHtmlTransforms`
             s.overwrite(
diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts
index 7376f2163762ed..161c2c9065924d 100644
--- a/packages/vite/src/node/server/middlewares/indexHtml.ts
+++ b/packages/vite/src/node/server/middlewares/indexHtml.ts
@@ -36,7 +36,6 @@ interface AssetNode {
   start: number
   end: number
   code: string
-  lang: string
 }
 
 export function createDevHtmlTransformFn(
@@ -203,16 +202,7 @@ const devHtmlHook: IndexHtmlTransformHook = async (
       styleUrl.push({
         start: children.loc.start.offset,
         end: children.loc.end.offset,
-        code: children.content,
-        lang:
-          (
-            node.props.find(
-              (prop) =>
-                prop.name === 'lang' &&
-                prop.type === NodeTypes.ATTRIBUTE &&
-                prop.value
-            ) as AttributeNode
-          )?.value?.content || 'css'
+        code: children.content
       })
     }
 
@@ -232,8 +222,8 @@ const devHtmlHook: IndexHtmlTransformHook = async (
   })
 
   await Promise.all(
-    styleUrl.map(async ({ start, end, code, lang }, index) => {
-      const url = `${proxyModulePath}?html-proxy&direct&index=${index}.${lang}`
+    styleUrl.map(async ({ start, end, code }, index) => {
+      const url = `${proxyModulePath}?html-proxy&direct&index=${index}.css`
 
       // ensure module in graph after successful load
       const mod = await moduleGraph.ensureEntryFromUrl(url, false)
diff --git a/playground/css/index.html b/playground/css/index.html
index 935915cbf40123..43c5a53825f134 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -139,9 +139,7 @@ <h1>CSS</h1>
   <p>PostCSS source.input.from. Should include query</p>
   <pre class="postcss-source-input"></pre>
 </div>
-<style lang="scss">
-  @use 'scss/app';
-</style>
+<link rel="stylesheet" href="./scss/_app.css" />
 <div class="scss-index-html">
   (index.html inline css) scss pre-processor test (tobe red)
 </div>

From 76a0fc53a344596865267633b1749dffd2e58c5c Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Wed, 1 Jun 2022 17:32:11 +0800
Subject: [PATCH 3/9] test: style import scss

---
 playground/css/index.html                     | 5 ++++-
 playground/css/scss/{_app.scss => _base.scss} | 0
 playground/css/scss/app.scss                  | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)
 rename playground/css/scss/{_app.scss => _base.scss} (100%)
 create mode 100644 playground/css/scss/app.scss

diff --git a/playground/css/index.html b/playground/css/index.html
index 43c5a53825f134..6a96ab460621fa 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -139,7 +139,10 @@ <h1>CSS</h1>
   <p>PostCSS source.input.from. Should include query</p>
   <pre class="postcss-source-input"></pre>
 </div>
-<link rel="stylesheet" href="./scss/_app.css" />
+<!-- <link rel="stylesheet" href="./scss/_app.scss" /> -->
+<style>
+  @import url(./scss/app.scss);
+</style>
 <div class="scss-index-html">
   (index.html inline css) scss pre-processor test (tobe red)
 </div>
diff --git a/playground/css/scss/_app.scss b/playground/css/scss/_base.scss
similarity index 100%
rename from playground/css/scss/_app.scss
rename to playground/css/scss/_base.scss
diff --git a/playground/css/scss/app.scss b/playground/css/scss/app.scss
new file mode 100644
index 00000000000000..a17da3145cfbe0
--- /dev/null
+++ b/playground/css/scss/app.scss
@@ -0,0 +1 @@
+@use 'base';

From c2a053f17ef91573b236b7372271738b4519c976 Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Wed, 1 Jun 2022 19:09:04 +0800
Subject: [PATCH 4/9] feat: preProcessCSS in @import

---
 packages/vite/src/node/plugins/css.ts | 169 ++++++++++++++++----------
 packages/vite/types/shims.d.ts        |   4 +-
 2 files changed, 106 insertions(+), 67 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index a8112d48658091..98179090bd8fb5 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -1,4 +1,4 @@
-import fs from 'fs'
+import fs, { promises as pfs } from 'fs'
 import path from 'path'
 import { createRequire } from 'module'
 import glob from 'fast-glob'
@@ -666,6 +666,76 @@ function getCssResolversKeys(
   return Object.keys(resolvers) as unknown as Array<keyof CSSAtImportResolvers>
 }
 
+async function preProcessCSS(
+  config: ResolvedConfig,
+  id: string,
+  code: string,
+  deps: Set<string>,
+  atImportResolvers: CSSAtImportResolvers,
+  sourcemap: boolean // if use in postcss can disable sourcemap
+) {
+  const lang = id.match(cssLangRE)?.[1] as CssLang | undefined
+  if (!isPreProcessor(lang)) {
+    return
+  }
+  const { preprocessorOptions, devSourcemap } = config.css || {}
+  const preProcessor = preProcessors[lang]
+  let opts = (preprocessorOptions && preprocessorOptions[lang]) || {}
+  // support @import from node dependencies by default
+  switch (lang) {
+    case PreprocessLang.scss:
+    case PreprocessLang.sass:
+      opts = {
+        includePaths: ['node_modules'],
+        alias: config.resolve.alias,
+        ...opts
+      }
+      break
+    case PreprocessLang.less:
+    case PreprocessLang.styl:
+    case PreprocessLang.stylus:
+      opts = {
+        paths: ['node_modules'],
+        alias: config.resolve.alias,
+        ...opts
+      }
+  }
+  // important: set this for relative import resolving
+  opts.filename = cleanUrl(id)
+  opts.enableSourcemap = sourcemap && (devSourcemap ?? false)
+
+  const preprocessResult = await preProcessor(
+    code,
+    config.root,
+    opts,
+    atImportResolvers
+  )
+
+  if (preprocessResult.errors.length) {
+    throw preprocessResult.errors[0]
+  }
+
+  code = preprocessResult.code
+  const preprocessorMap = combineSourcemapsIfExists(
+    opts.filename,
+    preprocessResult.map,
+    preprocessResult.additionalMap
+  )
+
+  if (preprocessResult.deps) {
+    preprocessResult.deps.forEach((dep) => {
+      // sometimes sass registers the file itself as a dep
+      if (normalizePath(dep) !== normalizePath(opts.filename)) {
+        deps.add(dep)
+      }
+    })
+  }
+  return {
+    code,
+    map: preprocessorMap
+  }
+}
+
 async function compileCSS(
   id: string,
   code: string,
@@ -680,11 +750,7 @@ async function compileCSS(
   modules?: Record<string, string>
   deps?: Set<string>
 }> {
-  const {
-    modules: modulesOptions,
-    preprocessorOptions,
-    devSourcemap
-  } = config.css || {}
+  const { modules: modulesOptions, devSourcemap } = config.css || {}
   const isModule = modulesOptions !== false && cssModuleRE.test(id)
   // although at serve time it can work without processing, we do need to
   // crawl them in order to register watch dependencies.
@@ -692,6 +758,7 @@ async function compileCSS(
   const hasUrl = cssUrlRE.test(code) || cssImageSetRE.test(code)
   const postcssConfig = await resolvePostcssConfig(config)
   const lang = id.match(cssLangRE)?.[1] as CssLang | undefined
+  const importer = id
 
   // 1. plain css that needs no processing
   if (
@@ -709,58 +776,17 @@ async function compileCSS(
   const deps = new Set<string>()
 
   // 2. pre-processors: sass etc.
-  if (isPreProcessor(lang)) {
-    const preProcessor = preProcessors[lang]
-    let opts = (preprocessorOptions && preprocessorOptions[lang]) || {}
-    // support @import from node dependencies by default
-    switch (lang) {
-      case PreprocessLang.scss:
-      case PreprocessLang.sass:
-        opts = {
-          includePaths: ['node_modules'],
-          alias: config.resolve.alias,
-          ...opts
-        }
-        break
-      case PreprocessLang.less:
-      case PreprocessLang.styl:
-      case PreprocessLang.stylus:
-        opts = {
-          paths: ['node_modules'],
-          alias: config.resolve.alias,
-          ...opts
-        }
-    }
-    // important: set this for relative import resolving
-    opts.filename = cleanUrl(id)
-    opts.enableSourcemap = devSourcemap ?? false
-
-    const preprocessResult = await preProcessor(
-      code,
-      config.root,
-      opts,
-      atImportResolvers
-    )
-
-    if (preprocessResult.errors.length) {
-      throw preprocessResult.errors[0]
-    }
-
-    code = preprocessResult.code
-    preprocessorMap = combineSourcemapsIfExists(
-      opts.filename,
-      preprocessResult.map,
-      preprocessResult.additionalMap
-    )
-
-    if (preprocessResult.deps) {
-      preprocessResult.deps.forEach((dep) => {
-        // sometimes sass registers the file itself as a dep
-        if (normalizePath(dep) !== normalizePath(opts.filename)) {
-          deps.add(dep)
-        }
-      })
-    }
+  const preProcessResult = await preProcessCSS(
+    config,
+    id,
+    code,
+    deps,
+    atImportResolvers,
+    true
+  )
+  if (preProcessResult) {
+    code = preProcessResult.code
+    preprocessorMap = preProcessResult.map
   }
 
   // 3. postcss
@@ -771,21 +797,32 @@ async function compileCSS(
   if (needInlineImport) {
     postcssPlugins.unshift(
       (await import('postcss-import')).default({
-        async resolve(id, basedir) {
+        async resolve(id) {
           const publicFile = checkPublicFile(id, config)
           if (publicFile) {
             return publicFile
           }
+          for (const key of getCssResolversKeys(atImportResolvers)) {
+            const resolved = await atImportResolvers[key](id, importer)
 
-          const resolved = await atImportResolvers.css(
-            id,
-            path.join(basedir, '*')
-          )
-
-          if (resolved) {
-            return path.resolve(resolved)
+            if (resolved) {
+              return path.resolve(resolved)
+            }
           }
+
           return id
+        },
+        async load(id) {
+          const code = await pfs.readFile(id, { encoding: 'utf-8' })
+          const preProcessResult = await preProcessCSS(
+            config,
+            id,
+            code,
+            deps,
+            atImportResolvers,
+            false
+          )
+          return preProcessResult ? preProcessResult.code : code
         }
       })
     )
diff --git a/packages/vite/types/shims.d.ts b/packages/vite/types/shims.d.ts
index d90f0bf42c7057..366e6083beb3dd 100644
--- a/packages/vite/types/shims.d.ts
+++ b/packages/vite/types/shims.d.ts
@@ -42,11 +42,13 @@ declare module 'postcss-load-config' {
 declare module 'postcss-import' {
   import type { Plugin } from 'postcss'
   const plugin: (options: {
-    resolve: (
+    resolve?: (
       id: string,
       basedir: string,
       importOptions: any
     ) => string | string[] | Promise<string | string[]>
+
+    load?: (filename: string, importOptions: any) => Promise<string>
   }) => Plugin
   export = plugin
 }

From 5448958c2328014b86a9d83fdb7d39a02a17252b Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Wed, 1 Jun 2022 19:31:15 +0800
Subject: [PATCH 5/9] fix: test

---
 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 91efdd02e1413f..9d06d6e168f2e1 100644
--- a/packages/vite/src/node/plugins/html.ts
+++ b/packages/vite/src/node/plugins/html.ts
@@ -45,7 +45,7 @@ interface ScriptAssetsUrl {
   url: string
 }
 
-const htmlProxyRE = /\?html-proxy=?[&inline\-css]*&index=(\d+)\.css$/
+const htmlProxyRE = /\?html-proxy=?[&inline\-css]*&index=(\d+)\.(js|css)$/
 const inlineCSSRE = /__VITE_INLINE_CSS__([a-z\d]{8}_\d+)__/g
 // Do not allow preceding '.', but do allow preceding '...' for spread operations
 const inlineImportRE =

From f25bed1d10fdcec6ed4613827e89eb10d736c84d Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Wed, 1 Jun 2022 23:02:33 +0800
Subject: [PATCH 6/9] chore: update

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

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 98179090bd8fb5..1d801f10915db3 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -758,7 +758,6 @@ async function compileCSS(
   const hasUrl = cssUrlRE.test(code) || cssImageSetRE.test(code)
   const postcssConfig = await resolvePostcssConfig(config)
   const lang = id.match(cssLangRE)?.[1] as CssLang | undefined
-  const importer = id
 
   // 1. plain css that needs no processing
   if (
@@ -797,13 +796,16 @@ async function compileCSS(
   if (needInlineImport) {
     postcssPlugins.unshift(
       (await import('postcss-import')).default({
-        async resolve(id) {
+        async resolve(id, basedir) {
           const publicFile = checkPublicFile(id, config)
           if (publicFile) {
             return publicFile
           }
           for (const key of getCssResolversKeys(atImportResolvers)) {
-            const resolved = await atImportResolvers[key](id, importer)
+            const resolved = await atImportResolvers[key](
+              id,
+              path.join(basedir, '*')
+            )
 
             if (resolved) {
               return path.resolve(resolved)

From 34a44ead0dbf1e17cc106c62d4d6fb17caba7bdc Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Wed, 1 Jun 2022 23:37:51 +0800
Subject: [PATCH 7/9] chore: update

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

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 1d801f10915db3..69ad8f93565f0c 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -1,4 +1,4 @@
-import fs, { promises as pfs } from 'fs'
+import fs, { promises as fsp } from 'fs'
 import path from 'path'
 import { createRequire } from 'module'
 import glob from 'fast-glob'
@@ -207,14 +207,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
         modules,
         deps,
         map
-      } = await compileCSS(
-        id,
-        raw,
-        config,
-        urlReplacer,
-        atImportResolvers,
-        server
-      )
+      } = await compileCSS(id, raw, config, urlReplacer, atImportResolvers)
       if (modules) {
         moduleCache.set(id, modules)
       }
@@ -670,13 +663,13 @@ async function preProcessCSS(
   config: ResolvedConfig,
   id: string,
   code: string,
-  deps: Set<string>,
   atImportResolvers: CSSAtImportResolvers,
-  sourcemap: boolean // if use in postcss can disable sourcemap
-) {
+  deps: Set<string>,
+  sourcemap: boolean = true // if use in postcss can disable sourcemap
+): Promise<null | { code: string; map?: ExistingRawSourceMap }> {
   const lang = id.match(cssLangRE)?.[1] as CssLang | undefined
   if (!isPreProcessor(lang)) {
-    return
+    return null
   }
   const { preprocessorOptions, devSourcemap } = config.css || {}
   const preProcessor = preProcessors[lang]
@@ -741,8 +734,7 @@ async function compileCSS(
   code: string,
   config: ResolvedConfig,
   urlReplacer: CssUrlReplacer,
-  atImportResolvers: CSSAtImportResolvers,
-  server?: ViteDevServer
+  atImportResolvers: CSSAtImportResolvers
 ): Promise<{
   code: string
   map?: SourceMapInput
@@ -779,9 +771,8 @@ async function compileCSS(
     config,
     id,
     code,
-    deps,
     atImportResolvers,
-    true
+    deps
   )
   if (preProcessResult) {
     code = preProcessResult.code
@@ -815,13 +806,13 @@ async function compileCSS(
           return id
         },
         async load(id) {
-          const code = await pfs.readFile(id, { encoding: 'utf-8' })
+          const code = await fsp.readFile(id, 'utf-8')
           const preProcessResult = await preProcessCSS(
             config,
             id,
             code,
-            deps,
             atImportResolvers,
+            deps,
             false
           )
           return preProcessResult ? preProcessResult.code : code

From 75f5b4bdf0ec57b24a9e3f1c93371011ad2c00ba Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Sun, 26 Feb 2023 18:16:44 +0800
Subject: [PATCH 8/9] chore: simplify test

---
 playground/css/__tests__/css.spec.ts | 4 ++--
 playground/css/imported.scss         | 5 +++++
 playground/css/index.html            | 7 ++-----
 playground/css/scss/_base.scss       | 3 ---
 playground/css/scss/app.scss         | 1 -
 5 files changed, 9 insertions(+), 11 deletions(-)
 create mode 100644 playground/css/imported.scss
 delete mode 100644 playground/css/scss/_base.scss
 delete mode 100644 playground/css/scss/app.scss

diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index 98d9a3024fa623..4064e28999b9bc 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -519,6 +519,6 @@ test('async css order with css modules', async () => {
   }, true)
 })
 
-test('css preprocessor in index.html', async () => {
-  expect(await getColor('.scss-index-html')).toBe('red')
+test('@import scss', async () => {
+  expect(await getColor('.at-import-scss')).toBe('red')
 })
diff --git a/playground/css/imported.scss b/playground/css/imported.scss
new file mode 100644
index 00000000000000..eee442a32c9eb5
--- /dev/null
+++ b/playground/css/imported.scss
@@ -0,0 +1,5 @@
+$color: red;
+
+.at-import-scss {
+  color: $color;
+}
diff --git a/playground/css/index.html b/playground/css/index.html
index f7caa5a2af0f5d..50189cec2a77e4 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -173,11 +173,8 @@ <h1>CSS</h1>
   <pre class="aliased-content"></pre>
   <p class="aliased-module">import '#alias-module': this should be blue</p>
 </div>
-<!-- <link rel="stylesheet" href="./scss/_app.scss" /> -->
 <style>
-  @import url(./scss/app.scss);
+  @import url(./imported.scss);
 </style>
-<div class="scss-index-html">
-  (index.html inline css) scss pre-processor test (tobe red)
-</div>
+<div class="at-import-scss">@import scss: this should be red</div>
 <script type="module" src="./main.js"></script>
diff --git a/playground/css/scss/_base.scss b/playground/css/scss/_base.scss
deleted file mode 100644
index 3a6038d8a56bb1..00000000000000
--- a/playground/css/scss/_base.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.scss-index-html {
-  color: red;
-}
diff --git a/playground/css/scss/app.scss b/playground/css/scss/app.scss
deleted file mode 100644
index a17da3145cfbe0..00000000000000
--- a/playground/css/scss/app.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use 'base';

From b9855f3a55631bef90111b00e04cbe2c2b7df1b1 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Sun, 26 Feb 2023 20:34:03 +0800
Subject: [PATCH 9/9] fix: track deps

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

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 5099b6d10f68f6..e5c47786685ad4 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -912,6 +912,7 @@ async function compileCSS(
         async load(id) {
           const code = fs.readFileSync(id, 'utf-8')
           const result = await compileCSS(id, code, config)
+          result.deps?.forEach((dep) => deps.add(dep))
           return result.code
         },
         nameLayer(index) {