From f4b080201e4422a3ea39f3b8f47c9031c1c12076 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Wed, 16 Feb 2022 23:12:41 +0800
Subject: [PATCH 1/9] test: test for css inconsistemcy

---
 packages/playground/glob-import/css/one.css | 3 +++
 packages/playground/glob-import/css/two.css | 3 +++
 packages/playground/glob-import/index.html  | 6 ++++++
 3 files changed, 12 insertions(+)
 create mode 100644 packages/playground/glob-import/css/one.css
 create mode 100644 packages/playground/glob-import/css/two.css

diff --git a/packages/playground/glob-import/css/one.css b/packages/playground/glob-import/css/one.css
new file mode 100644
index 00000000000000..ffaac844742ca3
--- /dev/null
+++ b/packages/playground/glob-import/css/one.css
@@ -0,0 +1,3 @@
+section {
+  color: green;
+}
diff --git a/packages/playground/glob-import/css/two.css b/packages/playground/glob-import/css/two.css
new file mode 100644
index 00000000000000..538fa56f4ac4d3
--- /dev/null
+++ b/packages/playground/glob-import/css/two.css
@@ -0,0 +1,3 @@
+div {
+  color: red;
+}
diff --git a/packages/playground/glob-import/index.html b/packages/playground/glob-import/index.html
index bb5e2f3c18f752..8d0ddf6e49d934 100644
--- a/packages/playground/glob-import/index.html
+++ b/packages/playground/glob-import/index.html
@@ -1,6 +1,12 @@
 <pre class="result"></pre>
 <pre class="result-node_modules"></pre>
 <pre class="globraw"></pre>
+<pre class="css-code"></pre>
+
+<script type="module">
+  const css = import.meta.globEager(`./css/*.css`)
+  document.querySelector('.css-code').textContent = JSON.stringify(css, null, 2)
+</script>
 
 <script type="module" src="./dir/index.js"></script>
 <script type="module">

From 4385e120b80854f9728fd8706e89559c4817d599 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 17 Feb 2022 14:54:37 +0800
Subject: [PATCH 2/9] feat: import css should be emtry string

---
 packages/playground/css/__tests__/css.spec.ts | 5 +++++
 packages/playground/glob-import/css/one.css   | 3 ---
 packages/playground/glob-import/css/two.css   | 3 ---
 packages/playground/glob-import/index.html    | 6 ------
 packages/vite/src/node/plugins/css.ts         | 5 +----
 5 files changed, 6 insertions(+), 16 deletions(-)
 delete mode 100644 packages/playground/glob-import/css/one.css
 delete mode 100644 packages/playground/glob-import/css/two.css

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index f1eb66e097ad86..bdd7182db71782 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -356,3 +356,8 @@ test('minify css', async () => {
   expect(cssFile).toMatch('rgba(')
   expect(cssFile).not.toMatch('#ffff00b3')
 })
+
+test('imported css', async () => {
+  const code = await page.textContent('.inlined-code')
+  expect(code).toBe('')
+})
diff --git a/packages/playground/glob-import/css/one.css b/packages/playground/glob-import/css/one.css
deleted file mode 100644
index ffaac844742ca3..00000000000000
--- a/packages/playground/glob-import/css/one.css
+++ /dev/null
@@ -1,3 +0,0 @@
-section {
-  color: green;
-}
diff --git a/packages/playground/glob-import/css/two.css b/packages/playground/glob-import/css/two.css
deleted file mode 100644
index 538fa56f4ac4d3..00000000000000
--- a/packages/playground/glob-import/css/two.css
+++ /dev/null
@@ -1,3 +0,0 @@
-div {
-  color: red;
-}
diff --git a/packages/playground/glob-import/index.html b/packages/playground/glob-import/index.html
index 8d0ddf6e49d934..bb5e2f3c18f752 100644
--- a/packages/playground/glob-import/index.html
+++ b/packages/playground/glob-import/index.html
@@ -1,12 +1,6 @@
 <pre class="result"></pre>
 <pre class="result-node_modules"></pre>
 <pre class="globraw"></pre>
-<pre class="css-code"></pre>
-
-<script type="module">
-  const css = import.meta.globEager(`./css/*.css`)
-  document.querySelector('.css-code').textContent = JSON.stringify(css, null, 2)
-</script>
 
 <script type="module" src="./dir/index.js"></script>
 <script type="module">
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 280a4ed177983d..835b72c16e1a34 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -310,10 +310,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             `const __vite__css = ${JSON.stringify(css)}`,
             `__vite__updateStyle(__vite__id, __vite__css)`,
             // css modules exports change on edit so it can't self accept
-            `${
-              modulesCode ||
-              `import.meta.hot.accept()\nexport default __vite__css`
-            }`,
+            `${modulesCode || `import.meta.hot.accept()\nexport default ''`}`,
             `import.meta.hot.prune(() => __vite__removeStyle(__vite__id))`
           ].join('\n')
         }

From 8645fb6463b256595aedacc9a3c68c6867c6e181 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 17 Feb 2022 15:46:03 +0800
Subject: [PATCH 3/9] feat: css imports injecting a ?used query to export the
 css string

---
 packages/playground/css/__tests__/css.spec.ts | 10 ++++++++--
 packages/playground/css/index.html            |  2 ++
 packages/playground/css/main.js               |  7 +++++++
 packages/vite/src/node/importGlob.ts          | 10 ++++++++--
 packages/vite/src/node/plugins/css.ts         |  5 ++++-
 5 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index bdd7182db71782..3d408498b6a340 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -358,6 +358,12 @@ test('minify css', async () => {
 })
 
 test('imported css', async () => {
-  const code = await page.textContent('.inlined-code')
-  expect(code).toBe('')
+  const css = await page.textContent('.imported-css')
+  expect(css).toContain('.imported {')
+
+  await untilUpdated(() => page.textContent('.imported-css-glob'), '[')
+  await untilUpdated(
+    () => page.textContent('.imported-css-globEager'),
+    '.dir-dep'
+  )
 })
diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
index 7a79bb1629f989..4de35d66441bee 100644
--- a/packages/playground/css/index.html
+++ b/packages/playground/css/index.html
@@ -12,6 +12,8 @@ <h1>CSS</h1>
   </p>
   <p>Imported css string:</p>
   <pre class="imported-css"></pre>
+  <pre class="imported-css-glob"></pre>
+  <pre class="imported-css-globEager"></pre>
 
   <p class="postcss">
     <span class="nesting">PostCSS nesting plugin: this should be pink</span>
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index 24a278c8687940..20d1847b76f5e0 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -3,6 +3,13 @@ import './minify.css'
 import css from './imported.css'
 text('.imported-css', css)
 
+const glob = import.meta.glob('./glob-dep/*.css')
+Promise.all(Object.keys(glob).map((key) => glob[key]())).then((res) => {
+  text('.imported-css-glob', JSON.stringify(res, null, 2))
+})
+const globEager = import.meta.globEager('./glob-dep/*.css')
+text('.imported-css-globEager', JSON.stringify(globEager, null, 2))
+
 import sass from './sass.scss'
 text('.imported-sass', sass)
 
diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts
index c64eccc7716a73..18c15794cd3b32 100644
--- a/packages/vite/src/node/importGlob.ts
+++ b/packages/vite/src/node/importGlob.ts
@@ -1,3 +1,4 @@
+import { isCSSRequest } from './plugins/css'
 import path from 'path'
 import { promises as fsp } from 'fs'
 import glob from 'fast-glob'
@@ -94,12 +95,17 @@ export async function transformImportGlob(
       )},`
     } else if (isEager) {
       const identifier = `__glob_${importIndex}_${i}`
+      // css imports injecting a ?used query to export the css string
       importsString += `import ${
         isEagerDefault ? `` : `* as `
-      }${identifier} from ${JSON.stringify(importee)};`
+      }${identifier} from ${JSON.stringify(
+        isCSSRequest(importee) ? `${importee}?used` : ''
+      )};`
       entries += ` ${JSON.stringify(file)}: ${identifier},`
     } else {
-      let imp = `import(${JSON.stringify(importee)})`
+      let imp = `import(${JSON.stringify(
+        isCSSRequest(importee) ? `${importee}?used` : ''
+      )})`
       if (!normalizeUrl && preload) {
         imp =
           `(${isModernFlag}` +
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 835b72c16e1a34..280a4ed177983d 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -310,7 +310,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             `const __vite__css = ${JSON.stringify(css)}`,
             `__vite__updateStyle(__vite__id, __vite__css)`,
             // css modules exports change on edit so it can't self accept
-            `${modulesCode || `import.meta.hot.accept()\nexport default ''`}`,
+            `${
+              modulesCode ||
+              `import.meta.hot.accept()\nexport default __vite__css`
+            }`,
             `import.meta.hot.prune(() => __vite__removeStyle(__vite__id))`
           ].join('\n')
         }

From 931d0b9f527512d1e21d03df9d7f3eb9462894e5 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 17 Feb 2022 15:52:21 +0800
Subject: [PATCH 4/9] fix: expect

---
 packages/playground/css/__tests__/css.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index 3d408498b6a340..686fff396ec6b7 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -361,7 +361,7 @@ test('imported css', async () => {
   const css = await page.textContent('.imported-css')
   expect(css).toContain('.imported {')
 
-  await untilUpdated(() => page.textContent('.imported-css-glob'), '[')
+  await untilUpdated(() => page.textContent('.imported-css-glob'), '.dir-dep')
   await untilUpdated(
     () => page.textContent('.imported-css-globEager'),
     '.dir-dep'

From 2e88d3510c7b6cccb04db91faf321024ce31420b Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 17 Feb 2022 16:42:16 +0800
Subject: [PATCH 5/9] fix: test

---
 packages/playground/css/__tests__/css.spec.ts | 19 ++++++++-----------
 packages/playground/css/glob-import/bar.css   |  3 +++
 packages/playground/css/glob-import/foo.css   |  3 +++
 packages/playground/css/main.js               | 14 +++++++-------
 4 files changed, 21 insertions(+), 18 deletions(-)
 create mode 100644 packages/playground/css/glob-import/bar.css
 create mode 100644 packages/playground/css/glob-import/foo.css

diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
index 686fff396ec6b7..c37c52eabdf52a 100644
--- a/packages/playground/css/__tests__/css.spec.ts
+++ b/packages/playground/css/__tests__/css.spec.ts
@@ -13,6 +13,14 @@ import {
 
 // note: tests should retrieve the element at the beginning of test and reuse it
 // in later assertions to ensure CSS HMR doesn't reload the page
+test('imported css', async () => {
+  const css = await page.textContent('.imported-css')
+  expect(css).toContain('.imported {')
+  const glob = await page.textContent('.imported-css-glob')
+  expect(glob).toContain('.dir-import')
+  const globEager = await page.textContent('.imported-css-globEager')
+  expect(globEager).toContain('.dir-import')
+})
 
 test('linked css', async () => {
   const linked = await page.$('.linked')
@@ -356,14 +364,3 @@ test('minify css', async () => {
   expect(cssFile).toMatch('rgba(')
   expect(cssFile).not.toMatch('#ffff00b3')
 })
-
-test('imported css', async () => {
-  const css = await page.textContent('.imported-css')
-  expect(css).toContain('.imported {')
-
-  await untilUpdated(() => page.textContent('.imported-css-glob'), '.dir-dep')
-  await untilUpdated(
-    () => page.textContent('.imported-css-globEager'),
-    '.dir-dep'
-  )
-})
diff --git a/packages/playground/css/glob-import/bar.css b/packages/playground/css/glob-import/bar.css
new file mode 100644
index 00000000000000..a273f4970dcfa9
--- /dev/null
+++ b/packages/playground/css/glob-import/bar.css
@@ -0,0 +1,3 @@
+.dir-import-2 {
+  color: grey;
+}
diff --git a/packages/playground/css/glob-import/foo.css b/packages/playground/css/glob-import/foo.css
new file mode 100644
index 00000000000000..03bd30eef45556
--- /dev/null
+++ b/packages/playground/css/glob-import/foo.css
@@ -0,0 +1,3 @@
+.dir-import {
+  color: grey;
+}
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index 20d1847b76f5e0..e0cc641e7b0f42 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -3,13 +3,6 @@ import './minify.css'
 import css from './imported.css'
 text('.imported-css', css)
 
-const glob = import.meta.glob('./glob-dep/*.css')
-Promise.all(Object.keys(glob).map((key) => glob[key]())).then((res) => {
-  text('.imported-css-glob', JSON.stringify(res, null, 2))
-})
-const globEager = import.meta.globEager('./glob-dep/*.css')
-text('.imported-css-globEager', JSON.stringify(globEager, null, 2))
-
 import sass from './sass.scss'
 text('.imported-sass', sass)
 
@@ -75,3 +68,10 @@ if (import.meta.env.DEV) {
 // inlined
 import inlined from './inlined.css?inline'
 text('.inlined-code', inlined)
+
+const glob = import.meta.glob('./glob-import/*.css')
+Promise.all(Object.keys(glob).map((key) => glob[key]())).then((res) => {
+  text('.imported-css-glob', JSON.stringify(res, null, 2))
+})
+const globEager = import.meta.globEager('./glob-import/*.css')
+text('.imported-css-globEager', JSON.stringify(globEager, null, 2))

From bff7271da129333678d376ae057715470bb4a8f2 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Thu, 17 Feb 2022 17:10:13 +0800
Subject: [PATCH 6/9] fix: test

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

diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts
index 18c15794cd3b32..1bf8efcb36bb5a 100644
--- a/packages/vite/src/node/importGlob.ts
+++ b/packages/vite/src/node/importGlob.ts
@@ -99,12 +99,12 @@ export async function transformImportGlob(
       importsString += `import ${
         isEagerDefault ? `` : `* as `
       }${identifier} from ${JSON.stringify(
-        isCSSRequest(importee) ? `${importee}?used` : ''
+        isCSSRequest(importee) ? `${importee}?used` : importee
       )};`
       entries += ` ${JSON.stringify(file)}: ${identifier},`
     } else {
       let imp = `import(${JSON.stringify(
-        isCSSRequest(importee) ? `${importee}?used` : ''
+        isCSSRequest(importee) ? `${importee}?used` : importee
       )})`
       if (!normalizeUrl && preload) {
         imp =

From 51b28ef09d0835a84de5bac80586fa1082ff70ed Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 20 Feb 2022 16:08:35 +0800
Subject: [PATCH 7/9] chore: something code suggested

---
 packages/playground/css/main.js      | 3 +++
 packages/vite/src/node/importGlob.ts | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index e0cc641e7b0f42..3599ed0d60562c 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -69,9 +69,12 @@ if (import.meta.env.DEV) {
 import inlined from './inlined.css?inline'
 text('.inlined-code', inlined)
 
+// glob
 const glob = import.meta.glob('./glob-import/*.css')
 Promise.all(Object.keys(glob).map((key) => glob[key]())).then((res) => {
   text('.imported-css-glob', JSON.stringify(res, null, 2))
 })
+
+// globEager
 const globEager = import.meta.globEager('./glob-import/*.css')
 text('.imported-css-globEager', JSON.stringify(globEager, null, 2))
diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts
index 1bf8efcb36bb5a..30b166c37c0744 100644
--- a/packages/vite/src/node/importGlob.ts
+++ b/packages/vite/src/node/importGlob.ts
@@ -1,4 +1,3 @@
-import { isCSSRequest } from './plugins/css'
 import path from 'path'
 import { promises as fsp } from 'fs'
 import glob from 'fast-glob'
@@ -8,6 +7,7 @@ import {
   preloadMethod,
   preloadMarker
 } from './plugins/importAnalysisBuild'
+import { isCSSRequest } from './plugins/css'
 import { cleanUrl } from './utils'
 import type { RollupError } from 'rollup'
 

From 420817e46f0f8cf5daa28a8b5566328f1bcc30c4 Mon Sep 17 00:00:00 2001
From: poyoho <907415276@qq.com>
Date: Sun, 20 Feb 2022 20:21:50 +0800
Subject: [PATCH 8/9] chore: extract reused code

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

diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts
index 30b166c37c0744..bf20ff0a8c511c 100644
--- a/packages/vite/src/node/importGlob.ts
+++ b/packages/vite/src/node/importGlob.ts
@@ -89,6 +89,7 @@ export async function transformImportGlob(
       ;[importee] = await normalizeUrl(file, pos)
     }
     imports.push(importee)
+    const importeeUrl = isCSSRequest(importee) ? `${importee}?used` : importee
     if (assertion?.assert?.type === 'raw') {
       entries += ` ${JSON.stringify(file)}: ${JSON.stringify(
         await fsp.readFile(path.join(base, file), 'utf-8')
@@ -98,14 +99,10 @@ export async function transformImportGlob(
       // css imports injecting a ?used query to export the css string
       importsString += `import ${
         isEagerDefault ? `` : `* as `
-      }${identifier} from ${JSON.stringify(
-        isCSSRequest(importee) ? `${importee}?used` : importee
-      )};`
+      }${identifier} from ${JSON.stringify(importeeUrl)};`
       entries += ` ${JSON.stringify(file)}: ${identifier},`
     } else {
-      let imp = `import(${JSON.stringify(
-        isCSSRequest(importee) ? `${importee}?used` : importee
-      )})`
+      let imp = `import(${JSON.stringify(importeeUrl)})`
       if (!normalizeUrl && preload) {
         imp =
           `(${isModernFlag}` +

From 85de1d13c4f16ca4f1015e64e79b3051885c081e Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Sun, 20 Feb 2022 14:27:57 +0100
Subject: [PATCH 9/9] chore: update

---
 packages/vite/src/node/importGlob.ts | 32 +++++++++++++++-------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts
index bf20ff0a8c511c..faa65da8cdafd9 100644
--- a/packages/vite/src/node/importGlob.ts
+++ b/packages/vite/src/node/importGlob.ts
@@ -89,27 +89,29 @@ export async function transformImportGlob(
       ;[importee] = await normalizeUrl(file, pos)
     }
     imports.push(importee)
-    const importeeUrl = isCSSRequest(importee) ? `${importee}?used` : importee
     if (assertion?.assert?.type === 'raw') {
       entries += ` ${JSON.stringify(file)}: ${JSON.stringify(
         await fsp.readFile(path.join(base, file), 'utf-8')
       )},`
-    } else if (isEager) {
-      const identifier = `__glob_${importIndex}_${i}`
-      // css imports injecting a ?used query to export the css string
-      importsString += `import ${
-        isEagerDefault ? `` : `* as `
-      }${identifier} from ${JSON.stringify(importeeUrl)};`
-      entries += ` ${JSON.stringify(file)}: ${identifier},`
     } else {
-      let imp = `import(${JSON.stringify(importeeUrl)})`
-      if (!normalizeUrl && preload) {
-        imp =
-          `(${isModernFlag}` +
-          `? ${preloadMethod}(()=>${imp},"${preloadMarker}")` +
-          `: ${imp})`
+      const importeeUrl = isCSSRequest(importee) ? `${importee}?used` : importee
+      if (isEager) {
+        const identifier = `__glob_${importIndex}_${i}`
+        // css imports injecting a ?used query to export the css string
+        importsString += `import ${
+          isEagerDefault ? `` : `* as `
+        }${identifier} from ${JSON.stringify(importeeUrl)};`
+        entries += ` ${JSON.stringify(file)}: ${identifier},`
+      } else {
+        let imp = `import(${JSON.stringify(importeeUrl)})`
+        if (!normalizeUrl && preload) {
+          imp =
+            `(${isModernFlag}` +
+            `? ${preloadMethod}(()=>${imp},"${preloadMarker}")` +
+            `: ${imp})`
+        }
+        entries += ` ${JSON.stringify(file)}: () => ${imp},`
       }
-      entries += ` ${JSON.stringify(file)}: () => ${imp},`
     }
   }