Skip to content

Commit da77dee

Browse files
sapphi-redpatak-dev
authored andcommitted
fix: reverts #8471
This reverts commit 8d7bac4.
1 parent 96c885a commit da77dee

File tree

4 files changed

+42
-17
lines changed

4 files changed

+42
-17
lines changed

packages/playground/css/__tests__/css.spec.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -422,7 +422,11 @@ test("relative path rewritten in Less's data-uri", async () => {
422422
test('PostCSS source.input.from includes query', async () => {
423423
const code = await page.textContent('.postcss-source-input')
424424
// should resolve assets
425-
expect(code).toContain('/postcss-source-input.css?query=foo')
425+
expect(code).toContain(
426+
isBuild
427+
? '/postcss-source-input.css?used&query=foo'
428+
: '/postcss-source-input.css?query=foo'
429+
)
426430
})
427431

428432
test('aliased css has content', async () => {

packages/vite/src/node/importGlob.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
preloadMarker,
1010
preloadMethod
1111
} from './plugins/importAnalysisBuild'
12+
import { isCSSRequest } from './plugins/css'
1213
import {
1314
blankReplacer,
1415
cleanUrl,
@@ -149,14 +150,16 @@ export async function transformImportGlob(
149150
await fsp.readFile(path.join(base, files[i]), 'utf-8')
150151
)},`
151152
} else {
153+
const importeeUrl = isCSSRequest(importee) ? `${importee}?used` : importee
152154
if (isEager) {
153155
const identifier = `__glob_${importIndex}_${i}`
156+
// css imports injecting a ?used query to export the css string
154157
importsString += `import ${
155158
isEagerDefault ? `` : `* as `
156-
}${identifier} from ${JSON.stringify(importee)};`
159+
}${identifier} from ${JSON.stringify(importeeUrl)};`
157160
entries += ` ${JSON.stringify(file)}: ${identifier},`
158161
} else {
159-
let imp = `import(${JSON.stringify(importee)})`
162+
let imp = `import(${JSON.stringify(importeeUrl)})`
160163
if (!normalizeUrl && preload) {
161164
imp =
162165
`(${isModernFlag}` +

packages/vite/src/node/plugins/css.ts

+12-12
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ const htmlProxyRE = /(\?|&)html-proxy\b/
102102
const commonjsProxyRE = /\?commonjs-proxy/
103103
const inlineRE = /(\?|&)inline\b/
104104
const inlineCSSRE = /(\?|&)inline-css\b/
105+
const usedRE = /(\?|&)used\b/
105106
const varRE = /^var\(/i
106107

107108
const enum PreprocessLang {
@@ -369,19 +370,18 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
369370
}
370371

371372
let code: string
372-
if (modulesCode) {
373-
code = modulesCode
374-
} else {
375-
let content = css
376-
if (config.build.minify) {
377-
content = await minifyCSS(content, config)
373+
if (usedRE.test(id)) {
374+
if (modulesCode) {
375+
code = modulesCode
376+
} else {
377+
let content = css
378+
if (config.build.minify) {
379+
content = await minifyCSS(content, config)
380+
}
381+
code = `export default ${JSON.stringify(content)}`
378382
}
379-
// marking as pure to make it tree-shakable by minifier
380-
// but the module itself is still treated as a non tree-shakable module
381-
// because moduleSideEffects is 'no-treeshake'
382-
code = `export default /* #__PURE__ */ (() => ${JSON.stringify(
383-
content
384-
)})()`
383+
} else {
384+
code = `export default ''`
385385
}
386386

387387
return {

packages/vite/src/node/plugins/importAnalysisBuild.ts

+20-2
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import { init, parse as parseImports } from 'es-module-lexer'
55
import type { OutputChunk, SourceMap } from 'rollup'
66
import type { RawSourceMap } from '@ampproject/remapping'
77
import { transformImportGlob } from '../importGlob'
8-
import { combineSourcemaps } from '../utils'
8+
import { bareImportRE, combineSourcemaps } from '../utils'
99
import type { Plugin } from '../plugin'
1010
import type { ResolvedConfig } from '../config'
1111
import { genSourceMapUrl } from '../server/sourcemap'
12-
import { removedPureCssFilesCache } from './css'
12+
import { isCSSRequest, removedPureCssFilesCache } from './css'
1313

1414
/**
1515
* 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 {
148148
e: end,
149149
ss: expStart,
150150
se: expEnd,
151+
n: specifier,
151152
d: dynamicIndex
152153
} = imports[index]
153154

@@ -194,6 +195,23 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
194195
const replacement = `${preloadMethod}(() => ${original},${isModernFlag}?"${preloadMarker}":void 0)`
195196
str().overwrite(expStart, expEnd, replacement, { contentOnly: true })
196197
}
198+
199+
// Differentiate CSS imports that use the default export from those that
200+
// do not by injecting a ?used query - this allows us to avoid including
201+
// the CSS string when unnecessary (esbuild has trouble tree-shaking
202+
// them)
203+
if (
204+
specifier &&
205+
isCSSRequest(specifier) &&
206+
source.slice(expStart, start).includes('from') &&
207+
// edge case for package names ending with .css (e.g normalize.css)
208+
!(bareImportRE.test(specifier) && !specifier.includes('/'))
209+
) {
210+
const url = specifier.replace(/\?|$/, (m) => `?used${m ? '&' : ''}`)
211+
str().overwrite(start, end, dynamicIndex > -1 ? `'${url}'` : url, {
212+
contentOnly: true
213+
})
214+
}
197215
}
198216

199217
if (

0 commit comments

Comments
 (0)