fix: reverts #8471

This reverts commit 8d7bac4.
vitejs · Jul 1, 2022 · da77dee · da77dee
1 parent 96c885a
commit da77dee
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 17 deletions.
diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
@@ -422,7 +422,11 @@ test("relative path rewritten in Less's data-uri", async () => {
 test('PostCSS source.input.from includes query', async () => {
   const code = await page.textContent('.postcss-source-input')
   // should resolve assets
-  expect(code).toContain('/postcss-source-input.css?query=foo')
+  expect(code).toContain(
+    isBuild
+      ? '/postcss-source-input.css?used&query=foo'
+      : '/postcss-source-input.css?query=foo'
+  )
 })
 
 test('aliased css has content', async () => {

diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts
@@ -9,6 +9,7 @@ import {
   preloadMarker,
   preloadMethod
 } from './plugins/importAnalysisBuild'
+import { isCSSRequest } from './plugins/css'
 import {
   blankReplacer,
   cleanUrl,
@@ -149,14 +150,16 @@ export async function transformImportGlob(
         await fsp.readFile(path.join(base, files[i]), 'utf-8')
       )},`
     } else {
+      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(importee)};`
+        }${identifier} from ${JSON.stringify(importeeUrl)};`
         entries += ` ${JSON.stringify(file)}: ${identifier},`
       } else {
-        let imp = `import(${JSON.stringify(importee)})`
+        let imp = `import(${JSON.stringify(importeeUrl)})`
         if (!normalizeUrl && preload) {
           imp =
             `(${isModernFlag}` +

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -102,6 +102,7 @@ const htmlProxyRE = /(\?|&)html-proxy\b/
 const commonjsProxyRE = /\?commonjs-proxy/
 const inlineRE = /(\?|&)inline\b/
 const inlineCSSRE = /(\?|&)inline-css\b/
+const usedRE = /(\?|&)used\b/
 const varRE = /^var\(/i
 
 const enum PreprocessLang {
@@ -369,19 +370,18 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       }
 
       let code: string
-      if (modulesCode) {
-        code = modulesCode
-      } else {
-        let content = css
-        if (config.build.minify) {
-          content = await minifyCSS(content, config)
+      if (usedRE.test(id)) {
+        if (modulesCode) {
+          code = modulesCode
+        } else {
+          let content = css
+          if (config.build.minify) {
+            content = await minifyCSS(content, config)
+          }
+          code = `export default ${JSON.stringify(content)}`
         }
-        // marking as pure to make it tree-shakable by minifier
-        // but the module itself is still treated as a non tree-shakable module
-        // because moduleSideEffects is 'no-treeshake'
-        code = `export default /* #__PURE__ */ (() => ${JSON.stringify(
-          content
-        )})()`
+      } else {
+        code = `export default ''`
       }
 
       return {

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -5,11 +5,11 @@ import { init, parse as parseImports } from 'es-module-lexer'
 import type { OutputChunk, SourceMap } from 'rollup'
 import type { RawSourceMap } from '@ampproject/remapping'
 import { transformImportGlob } from '../importGlob'
-import { combineSourcemaps } from '../utils'
+import { bareImportRE, combineSourcemaps } from '../utils'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { genSourceMapUrl } from '../server/sourcemap'
-import { removedPureCssFilesCache } from './css'
+import { isCSSRequest, removedPureCssFilesCache } from './css'
 
 /**
  * A flag for injected helpers. This flag will be set to `false` if the output
@@ -148,6 +148,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           e: end,
           ss: expStart,
           se: expEnd,
+          n: specifier,
           d: dynamicIndex
         } = imports[index]
 
@@ -194,6 +195,23 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           const replacement = `${preloadMethod}(() => ${original},${isModernFlag}?"${preloadMarker}":void 0)`
           str().overwrite(expStart, expEnd, replacement, { contentOnly: true })
         }
+
+        // Differentiate CSS imports that use the default export from those that
+        // do not by injecting a ?used query - this allows us to avoid including
+        // the CSS string when unnecessary (esbuild has trouble tree-shaking
+        // them)
+        if (
+          specifier &&
+          isCSSRequest(specifier) &&
+          source.slice(expStart, start).includes('from') &&
+          // edge case for package names ending with .css (e.g normalize.css)
+          !(bareImportRE.test(specifier) && !specifier.includes('/'))
+        ) {
+          const url = specifier.replace(/\?|$/, (m) => `?used${m ? '&' : ''}`)
+          str().overwrite(start, end, dynamicIndex > -1 ? `'${url}'` : url, {
+            contentOnly: true
+          })
+        }
       }
 
       if (