From a24b5e3aa58c2ac3e43a78f6173d8a42e1437eee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Wed, 11 May 2022 16:37:16 +0900 Subject: [PATCH] fix: add direct query to html-proxy css (fixes #8091) (#8094) --- .../css-sourcemap/__tests__/serve.spec.ts | 18 ++++- packages/vite/src/node/plugins/css.ts | 65 +++++++++---------- .../src/node/server/middlewares/indexHtml.ts | 2 +- 3 files changed, 49 insertions(+), 36 deletions(-) diff --git a/packages/playground/css-sourcemap/__tests__/serve.spec.ts b/packages/playground/css-sourcemap/__tests__/serve.spec.ts index becd792e82293a..7d3e7b525e74d1 100644 --- a/packages/playground/css-sourcemap/__tests__/serve.spec.ts +++ b/packages/playground/css-sourcemap/__tests__/serve.spec.ts @@ -27,8 +27,22 @@ if (!isBuild) { } ) const css = await res.text() - const lines = css.split('\n') - expect(lines[lines.length - 1].includes('/*')).toBe(false) // expect no sourcemap + const map = extractSourcemap(css) + expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` + Object { + "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACT,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACb,CAAC;", + "sources": Array [ + "/root/linked.css", + ], + "sourcesContent": Array [ + ".linked { + color: red; + } + ", + ], + "version": 3, + } + `) }) test('linked css with import', async () => { diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index ed4360b16b5aa8..e4005608eef28c 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -223,7 +223,8 @@ export function cssPlugin(config: ResolvedConfig): Plugin { const thisModule = moduleGraph.getModuleById(id) if (thisModule) { // CSS modules cannot self-accept since it exports values - const isSelfAccepting = !modules && !inlineRE.test(id) + const isSelfAccepting = + !modules && !inlineRE.test(id) && !htmlProxyRE.test(id) if (deps) { // record deps in the module graph so edits to @import css can trigger // main import to hot update @@ -301,7 +302,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { return } - const isHTMLProxy = htmlProxyRE.test(id) const inlined = inlineRE.test(id) const modules = cssModulesCache.get(config)!.get(id) @@ -314,43 +314,41 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { dataToEsm(modules, { namedExports: true, preferConst: true }) if (config.command === 'serve') { - if (isDirectCSSRequest(id)) { - return css - } else { - // server only - if (options?.ssr) { - return modulesCode || `export default ${JSON.stringify(css)}` - } - if (inlined) { - return `export default ${JSON.stringify(css)}` - } - - let cssContent = css + const getContentWithSourcemap = async (content: string) => { if (config.css?.devSourcemap) { const sourcemap = this.getCombinedSourcemap() await injectSourcesContent(sourcemap, cleanUrl(id), config.logger) - cssContent = getCodeWithSourcemap('css', css, sourcemap) - } - - if (isHTMLProxy) { - return cssContent + return getCodeWithSourcemap('css', content, sourcemap) } + return content + } - return [ - `import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from ${JSON.stringify( - path.posix.join(config.base, CLIENT_PUBLIC_PATH) - )}`, - `const __vite__id = ${JSON.stringify(id)}`, - `const __vite__css = ${JSON.stringify(cssContent)}`, - `__vite__updateStyle(__vite__id, __vite__css)`, - // css modules exports change on edit so it can't self accept - `${ - modulesCode || - `import.meta.hot.accept()\nexport default __vite__css` - }`, - `import.meta.hot.prune(() => __vite__removeStyle(__vite__id))` - ].join('\n') + if (isDirectCSSRequest(id)) { + return await getContentWithSourcemap(css) + } + // server only + if (options?.ssr) { + return modulesCode || `export default ${JSON.stringify(css)}` } + if (inlined) { + return `export default ${JSON.stringify(css)}` + } + + const cssContent = await getContentWithSourcemap(css) + return [ + `import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from ${JSON.stringify( + path.posix.join(config.base, CLIENT_PUBLIC_PATH) + )}`, + `const __vite__id = ${JSON.stringify(id)}`, + `const __vite__css = ${JSON.stringify(cssContent)}`, + `__vite__updateStyle(__vite__id, __vite__css)`, + // css modules exports change on edit so it can't self accept + `${ + modulesCode || + `import.meta.hot.accept()\nexport default __vite__css` + }`, + `import.meta.hot.prune(() => __vite__removeStyle(__vite__id))` + ].join('\n') } // build CSS handling ---------------------------------------------------- @@ -359,6 +357,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { // cache css compile result to map // and then use the cache replace inline-style-flag when `generateBundle` in vite:build-html plugin const inlineCSS = inlineCSSRE.test(id) + const isHTMLProxy = htmlProxyRE.test(id) const query = parseRequest(id) if (inlineCSS && isHTMLProxy) { addToHTMLProxyTransformResult( diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts index 955ee6b708f54d..7b43ac0c67d428 100644 --- a/packages/vite/src/node/server/middlewares/indexHtml.ts +++ b/packages/vite/src/node/server/middlewares/indexHtml.ts @@ -217,7 +217,7 @@ const devHtmlHook: IndexHtmlTransformHook = async ( await Promise.all( styleUrl.map(async ({ start, end, code }, index) => { - const url = `${proxyModulePath}?html-proxy&index=${index}.css` + const url = `${proxyModulePath}?html-proxy&direct&index=${index}.css` // ensure module in graph after successful load const mod = await moduleGraph.ensureEntryFromUrl(url, false)