Skip to content

Commit

Permalink
fix: add direct query to html-proxy css (fixes #8091) (#8094)
Browse files Browse the repository at this point in the history
  • Loading branch information
sapphi-red authored and patak-dev committed May 11, 2022
1 parent e5556ab commit a24b5e3
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 36 deletions.
18 changes: 16 additions & 2 deletions packages/playground/css-sourcemap/__tests__/serve.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
65 changes: 32 additions & 33 deletions packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)

Expand All @@ -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 ----------------------------------------------------
Expand All @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion packages/vite/src/node/server/middlewares/indexHtml.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit a24b5e3

Please sign in to comment.