From 0b25cc1ef7ad344443518446ccdd54bbd8444bc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Mon, 23 May 2022 03:47:52 +0900 Subject: [PATCH] fix(css): remove `?used` hack (fixes #6421, #8245) (#8278) --- packages/vite/src/node/plugins/css.ts | 24 ++++++------- .../src/node/plugins/importAnalysisBuild.ts | 34 ++----------------- .../vite/src/node/plugins/importMetaGlob.ts | 4 --- playground/css/__tests__/css.spec.ts | 6 +--- 4 files changed, 16 insertions(+), 52 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 6e37d769f5beed..45ff0525b1042d 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -108,7 +108,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 cssBundleName = 'style.css' @@ -406,18 +405,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 { diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 43f35a7147876d..c365eae4a38f4e 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -4,11 +4,11 @@ import type { ImportSpecifier } from 'es-module-lexer' import { init, parse as parseImports } from 'es-module-lexer' import type { OutputChunk, SourceMap } from 'rollup' import type { RawSourceMap } from '@ampproject/remapping' -import { bareImportRE, combineSourcemaps, isRelativeBase } from '../utils' +import { combineSourcemaps, isRelativeBase } 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 @@ -145,14 +145,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { let needPreloadHelper = false for (let index = 0; index < imports.length; index++) { - const { - s: start, - e: end, - ss: expStart, - se: expEnd, - n: specifier, - d: dynamicIndex - } = imports[index] + const { ss: expStart, se: expEnd, d: dynamicIndex } = imports[index] const isDynamic = dynamicIndex > -1 @@ -166,27 +159,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { })` ) } - - // 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) && - // always inject ?used query when it is a dynamic import - // because there is no way to check whether the default export is used - (source.slice(expStart, start).includes('from') || isDynamic) && - // already has ?used query (by import.meta.glob) - !specifier.match(/\?used(&|$)/) && - // 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, isDynamic ? `'${url}'` : url, { - contentOnly: true - }) - } } if ( diff --git a/packages/vite/src/node/plugins/importMetaGlob.ts b/packages/vite/src/node/plugins/importMetaGlob.ts index 625d9e8fa3a162..b624d7e609bcb1 100644 --- a/packages/vite/src/node/plugins/importMetaGlob.ts +++ b/packages/vite/src/node/plugins/importMetaGlob.ts @@ -18,7 +18,6 @@ import type { ViteDevServer } from '../server' import type { ModuleNode } from '../server/moduleGraph' import type { ResolvedConfig } from '../config' import { normalizePath, slash } from '../utils' -import { isCSSRequest } from './css' const { isMatch, scan } = micromatch @@ -393,9 +392,6 @@ export async function transformGlobImport( let importPath = paths.importPath let importQuery = query - if (isCSSRequest(file)) - importQuery = importQuery ? `${importQuery}&used` : '?used' - if (importQuery && importQuery !== '?raw') { const fileExtension = basename(file).split('.').slice(-1)[0] if (fileExtension && restoreQueryExtension) diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index 46951581f9eb83..e9d1fccac61d6e 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/playground/css/__tests__/css.spec.ts @@ -415,9 +415,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') })