From bf10f635e2a1769f5982d5478c41cce1d1fa1ca4 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Thu, 24 Mar 2022 19:42:46 +0900 Subject: [PATCH 1/8] test: add "missing source file" test --- packages/playground/css-sourcemap/__tests__/serve.spec.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/playground/css-sourcemap/__tests__/serve.spec.ts b/packages/playground/css-sourcemap/__tests__/serve.spec.ts index 50c256298143ab..052127b5041321 100644 --- a/packages/playground/css-sourcemap/__tests__/serve.spec.ts +++ b/packages/playground/css-sourcemap/__tests__/serve.spec.ts @@ -207,6 +207,12 @@ if (!isBuild) { } `) }) + + test('should not output missing source file warning', () => { + serverLogs.forEach((log) => { + expect(log).not.toMatch(/Sourcemap for .+ points to missing source files/) + }) + }) } else { test('this file only includes test for serve', () => { expect(true).toBe(true) From a134c07fe1270b87b76dc37e64fc4d5ab5361903 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Thu, 24 Mar 2022 19:43:04 +0900 Subject: [PATCH 2/8] test: add inline css sourcemap test --- packages/playground/css-sourcemap/__tests__/serve.spec.ts | 8 ++++++++ packages/playground/css-sourcemap/index.html | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/packages/playground/css-sourcemap/__tests__/serve.spec.ts b/packages/playground/css-sourcemap/__tests__/serve.spec.ts index 052127b5041321..7edd1a6991dce1 100644 --- a/packages/playground/css-sourcemap/__tests__/serve.spec.ts +++ b/packages/playground/css-sourcemap/__tests__/serve.spec.ts @@ -30,6 +30,14 @@ if (!isBuild) { return m } + test('inline css', async () => { + const css = await getStyleTagContentIncluding('.inline ') + const map = extractSourcemap(css) + expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` + TODO + `) + }) + test('linked css', async () => { const res = await page.request.get( new URL('./linked.css', page.url()).href, diff --git a/packages/playground/css-sourcemap/index.html b/packages/playground/css-sourcemap/index.html index 2fedceb8f2be44..d0e9980b926125 100644 --- a/packages/playground/css-sourcemap/index.html +++ b/packages/playground/css-sourcemap/index.html @@ -1,9 +1,17 @@ + +

CSS Sourcemap

+

<inline>

+

<linked>: no import

<linked>: with import

From 2c4422474ff7e18b2d6eb3b6fe7dc2dc88993afc Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Thu, 24 Mar 2022 20:18:56 +0900 Subject: [PATCH 3/8] fix: inline css sourcemap "missing source file" --- packages/vite/src/node/server/pluginContainer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/server/pluginContainer.ts b/packages/vite/src/node/server/pluginContainer.ts index 590648ed58d164..5efc2670c0f81a 100644 --- a/packages/vite/src/node/server/pluginContainer.ts +++ b/packages/vite/src/node/server/pluginContainer.ts @@ -442,7 +442,7 @@ export async function createPluginContainer( ? new MagicString(this.originalCode).generateMap({ includeContent: true, hires: true, - source: this.filename + source: cleanUrl(this.filename) }) : null } From abe5cfdfa2b8002898e4d1b694fcc781d62b0437 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Thu, 24 Mar 2022 20:39:05 +0900 Subject: [PATCH 4/8] refactor: accept sourcemap for html inline style/css --- packages/vite/src/node/plugins/html.ts | 31 ++++++++----------- .../src/node/server/middlewares/indexHtml.ts | 2 +- 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index c8a5617a92b253..733b2e4829f12c 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -5,7 +5,8 @@ import type { OutputAsset, OutputBundle, OutputChunk, - RollupError + RollupError, + SourceMapInput } from 'rollup' import { cleanUrl, @@ -54,7 +55,7 @@ export const isHTMLRequest = (request: string): boolean => // HTML Proxy Caches are stored by config -> filePath -> index export const htmlProxyMap = new WeakMap< ResolvedConfig, - Map> + Map> >() // HTML Proxy Transform result are stored by config @@ -83,7 +84,7 @@ export function htmlInlineProxyPlugin(config: ResolvedConfig): Plugin { const file = cleanUrl(id) const url = file.replace(normalizePath(config.root), '') const result = htmlProxyMap.get(config)!.get(url)![index] - if (typeof result === 'string') { + if (result) { return result } else { throw new Error(`No matching HTML proxy module found from ${id}`) @@ -97,7 +98,7 @@ export function addToHTMLProxyCache( config: ResolvedConfig, filePath: string, index: number, - code: string + result: { code: string; map?: SourceMapInput } ): void { if (!htmlProxyMap.get(config)) { htmlProxyMap.set(config, new Map()) @@ -105,7 +106,7 @@ export function addToHTMLProxyCache( if (!htmlProxyMap.get(config)!.get(filePath)) { htmlProxyMap.get(config)!.set(filePath, []) } - htmlProxyMap.get(config)!.get(filePath)![index] = code + htmlProxyMap.get(config)!.get(filePath)![index] = result } export function addToHTMLProxyTransformResult( @@ -284,12 +285,9 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { .join('') // const filePath = id.replace(normalizePath(config.root), '') - addToHTMLProxyCache( - config, - filePath, - inlineModuleIndex, - contents - ) + addToHTMLProxyCache(config, filePath, inlineModuleIndex, { + code: contents + }) js += `\nimport "${id}?html-proxy&index=${inlineModuleIndex}.js"` shouldRemove = true } @@ -364,7 +362,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { const styleNode = inlineStyle.value! const code = styleNode.content! const filePath = id.replace(normalizePath(config.root), '') - addToHTMLProxyCache(config, filePath, inlineModuleIndex, code) + addToHTMLProxyCache(config, filePath, inlineModuleIndex, { code }) // will transform with css plugin and cache result with css-post plugin js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.css"` @@ -382,12 +380,9 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin { const styleNode = node.children.pop() as TextNode const filePath = id.replace(normalizePath(config.root), '') inlineModuleIndex++ - addToHTMLProxyCache( - config, - filePath, - inlineModuleIndex, - styleNode.content - ) + addToHTMLProxyCache(config, filePath, inlineModuleIndex, { + code: styleNode.content + }) js += `\nimport "${id}?html-proxy&index=${inlineModuleIndex}.css"` shouldRemove = true } diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts index 07b2693c07f995..a7c889e6c9a2ae 100644 --- a/packages/vite/src/node/server/middlewares/indexHtml.ts +++ b/packages/vite/src/node/server/middlewares/indexHtml.ts @@ -109,7 +109,7 @@ const devHtmlHook: IndexHtmlTransformHook = async ( .join('') // add HTML Proxy to Map - addToHTMLProxyCache(config, url, inlineModuleIndex, contents) + addToHTMLProxyCache(config, url, inlineModuleIndex, { code: contents }) // inline js module. convert to src="proxy" const modulePath = `${ From 8c1f812103ddc0fc221bbe409946860339ad0d83 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Thu, 24 Mar 2022 22:08:54 +0900 Subject: [PATCH 5/8] fix: normalize html transform hook filename --- packages/vite/src/node/server/middlewares/indexHtml.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts index a7c889e6c9a2ae..2da9a40564e1f3 100644 --- a/packages/vite/src/node/server/middlewares/indexHtml.ts +++ b/packages/vite/src/node/server/middlewares/indexHtml.ts @@ -38,7 +38,9 @@ function getHtmlFilename(url: string, server: ViteDevServer) { if (url.startsWith(FS_PREFIX)) { return decodeURIComponent(fsPathFromId(url)) } else { - return decodeURIComponent(path.join(server.config.root, url.slice(1))) + return decodeURIComponent( + normalizePath(path.join(server.config.root, url.slice(1))) + ) } } From eda1d853dd01a179ae6afe3f5ccfa858b82b38b0 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Thu, 24 Mar 2022 22:09:36 +0900 Subject: [PATCH 6/8] feat: inline css sourcemap --- .../src/node/server/middlewares/indexHtml.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts index 2da9a40564e1f3..7e16c6d6f27f09 100644 --- a/packages/vite/src/node/server/middlewares/indexHtml.ts +++ b/packages/vite/src/node/server/middlewares/indexHtml.ts @@ -1,7 +1,7 @@ import fs from 'fs' import path from 'path' import MagicString from 'magic-string' -import type { AttributeNode, ElementNode } from '@vue/compiler-dom' +import type { AttributeNode, ElementNode, TextNode } from '@vue/compiler-dom' import { NodeTypes } from '@vue/compiler-dom' import type { Connect } from 'types/connect' import type { IndexHtmlTransformHook } from '../../plugins/html' @@ -92,7 +92,7 @@ const processNodeUrl = ( } const devHtmlHook: IndexHtmlTransformHook = async ( html, - { path: htmlPath, server, originalUrl } + { path: htmlPath, filename, server, originalUrl } ) => { const { config, moduleGraph } = server! const base = config.base || '/' @@ -106,12 +106,17 @@ const devHtmlHook: IndexHtmlTransformHook = async ( const url = filePath.replace(normalizePath(config.root), '') - const contents = node.children - .map((child: any) => child.content || '') - .join('') + const contentNode = node.children[0] as TextNode + + const code = contentNode.content + const map = new MagicString(html) + .snip(contentNode.loc.start.offset, contentNode.loc.end.offset) + .generateMap({ hires: true }) + map.sources = [filename] + map.file = filename // add HTML Proxy to Map - addToHTMLProxyCache(config, url, inlineModuleIndex, { code: contents }) + addToHTMLProxyCache(config, url, inlineModuleIndex, { code, map }) // inline js module. convert to src="proxy" const modulePath = `${ From 4981b60d53c7ec99cdbb98ee1f34a792378dd872 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Thu, 24 Mar 2022 22:13:21 +0900 Subject: [PATCH 7/8] test: update inline css sourcemap snapshot --- .../css-sourcemap/__tests__/serve.spec.ts | 54 ++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/packages/playground/css-sourcemap/__tests__/serve.spec.ts b/packages/playground/css-sourcemap/__tests__/serve.spec.ts index 7edd1a6991dce1..fb2dd97967d91f 100644 --- a/packages/playground/css-sourcemap/__tests__/serve.spec.ts +++ b/packages/playground/css-sourcemap/__tests__/serve.spec.ts @@ -34,7 +34,59 @@ if (!isBuild) { const css = await getStyleTagContentIncluding('.inline ') const map = extractSourcemap(css) expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - TODO + Object { + "mappings": "AAGO;AACP,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACX,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACf,CAAC,CAAC,CAAC;", + "sources": Array [ + "/root/index.html", + ], + "sourcesContent": Array [ + " + + + + +
+

CSS Sourcemap

+ +

<inline>

+ +

<linked>: no import

+

<linked>: with import

+ +

<imported>: no import

+

<imported>: with import

+ +

<imported sass>

+

<imported sass> with module

+ +

<imported less> with string additionalData

+ +

<imported stylus>

+
+ + + ", + ], + "version": 3, + } `) }) From e6da75ecf2894a809b430c046fb0ae68d18e27aa Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Thu, 24 Mar 2022 22:34:46 +0900 Subject: [PATCH 8/8] fix: script tag with module & src should not be inlined --- packages/vite/src/node/server/middlewares/indexHtml.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts index 7e16c6d6f27f09..ca2538bd9507ed 100644 --- a/packages/vite/src/node/server/middlewares/indexHtml.ts +++ b/packages/vite/src/node/server/middlewares/indexHtml.ts @@ -148,7 +148,7 @@ const devHtmlHook: IndexHtmlTransformHook = async ( if (src) { processNodeUrl(src, s, config, htmlPath, originalUrl, moduleGraph) - } else if (isModule) { + } else if (isModule && node.children.length) { addInlineModule(node, 'js') } }