Skip to content

Commit

Permalink
fix(css): remove ?used hack (fixes vitejs#6421, vitejs#8245) (vitej…
Browse files Browse the repository at this point in the history
  • Loading branch information
sapphi-red committed Jun 5, 2022
1 parent 7b972bc commit bbc7412
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 42 deletions.
6 changes: 1 addition & 5 deletions packages/playground/css/__tests__/css.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -417,9 +417,5 @@ 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(
isBuild
? '/postcss-source-input.css?used&query=foo'
: '/postcss-source-input.css?query=foo'
)
expect(code).toContain('/postcss-source-input.css?query=foo')
})
7 changes: 2 additions & 5 deletions packages/vite/src/node/importGlob.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
preloadMarker,
preloadMethod
} from './plugins/importAnalysisBuild'
import { isCSSRequest } from './plugins/css'
import {
blankReplacer,
cleanUrl,
Expand Down Expand Up @@ -150,16 +149,14 @@ 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(importeeUrl)};`
}${identifier} from ${JSON.stringify(importee)};`
entries += ` ${JSON.stringify(file)}: ${identifier},`
} else {
let imp = `import(${JSON.stringify(importeeUrl)})`
let imp = `import(${JSON.stringify(importee)})`
if (!normalizeUrl && preload) {
imp =
`(${isModernFlag}` +
Expand Down
24 changes: 12 additions & 12 deletions packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,6 @@ 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 {
Expand Down Expand Up @@ -370,18 +369,19 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
}

let code: string
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)}`
}
if (modulesCode) {
code = modulesCode
} else {
code = `export default ''`
let content = css
if (config.build.minify) {
content = await minifyCSS(content, config)
}
// 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
)})()`
}

return {
Expand Down
22 changes: 2 additions & 20 deletions packages/vite/src/node/plugins/importAnalysisBuild.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 { bareImportRE, combineSourcemaps } from '../utils'
import { combineSourcemaps } from '../utils'
import type { Plugin } from '../plugin'
import type { ResolvedConfig } from '../config'
import { genSourceMapUrl } from '../server/sourcemap'
import { isCSSRequest, removedPureCssFilesCache } from './css'
import { removedPureCssFilesCache } from './css'

/**
* A flag for injected helpers. This flag will be set to `false` if the output
Expand Down Expand Up @@ -148,7 +148,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
e: end,
ss: expStart,
se: expEnd,
n: specifier,
d: dynamicIndex
} = imports[index]

Expand Down Expand Up @@ -195,23 +194,6 @@ 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 (
Expand Down

0 comments on commit bbc7412

Please sign in to comment.