fix(glob): css imports injecting a ?used query to export the css stri…

…ng (#6949)
vitejs · Feb 20, 2022 · 0b3f4ef · 0b3f4ef
1 parent 2136f2b
commit 0b3f4ef
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 13 deletions.
diff --git 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')

diff --git a/packages/playground/css/glob-import/bar.css 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
@@ -0,0 +1,3 @@
+.dir-import {
+  color: grey;
+}
diff --git 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
@@ -68,3 +68,13 @@ if (import.meta.env.DEV) {
 // inlined
 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
@@ -7,6 +7,7 @@ import {
   preloadMethod,
   preloadMarker
 } from './plugins/importAnalysisBuild'
+import { isCSSRequest } from './plugins/css'
 import { cleanUrl } from './utils'
 import type { RollupError } from 'rollup'
 
@@ -92,21 +93,25 @@ export async function transformImportGlob(
       entries += ` ${JSON.stringify(file)}: ${JSON.stringify(
         await fsp.readFile(path.join(base, file), 'utf-8')
       )},`
-    } else if (isEager) {
-      const identifier = `__glob_${importIndex}_${i}`
-      importsString += `import ${
-        isEagerDefault ? `` : `* as `
-      }${identifier} from ${JSON.stringify(importee)};`
-      entries += ` ${JSON.stringify(file)}: ${identifier},`
     } else {
-      let imp = `import(${JSON.stringify(importee)})`
-      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},`
     }
   }