fix: inline style css sourcemap

packages/playground/css-sourcemap/__tests__/serve.spec.ts

@@ -30,6 +30,66 @@ if (!isBuild) {
     return m
   }
 
+  test('inline css', async () => {
+    const css = await getStyleTagContentIncluding('.inline ')
+    const map = extractSourcemap(css)
+    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
+      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 [
+          "<link rel=\\"stylesheet\\" href=\\"./linked.css\\" />
+      <link rel=\\"stylesheet\\" href=\\"./linked-with-import.css\\" />
+
+      <style>
+        .inline {
+          color: red;
+        }
+      </style>
+
+      <div class=\\"wrapper\\">
+        <h1>CSS Sourcemap</h1>
+
+        <p class=\\"inline\\">&lt;inline&gt;</p>
+
+        <p class=\\"linked\\">&lt;linked&gt;: no import</p>
+        <p class=\\"linked-with-import\\">&lt;linked&gt;: with import</p>
+
+        <p class=\\"imported\\">&lt;imported&gt;: no import</p>
+        <p class=\\"imported-with-import\\">&lt;imported&gt;: with import</p>
+
+        <p class=\\"imported-sass\\">&lt;imported sass&gt;</p>
+        <p class=\\"imported-sass-module\\">&lt;imported sass&gt; with module</p>
+
+        <p class=\\"imported-less\\">&lt;imported less&gt; with string additionalData</p>
+
+        <p class=\\"imported-stylus\\">&lt;imported stylus&gt;</p>
+      </div>
+
+      <script type=\\"module\\">
+        import './imported.css'
+        import './imported-with-import.css'
+
+        import './imported.sass'
+        import sassModule from './imported.module.sass'
+
+        document
+          .querySelector('.imported-sass-module')
+          .classList.add(sassModule['imported-sass-module'])
+
+        import './imported.less'
+
+        import './imported.styl'
+      </script>
+      ",
+        ],
+        "version": 3,
+      }
+    `)
+  })
+
   test('linked css', async () => {
     const res = await page.request.get(
       new URL('./linked.css', page.url()).href,
@@ -207,6 +267,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)

packages/playground/css-sourcemap/index.html

@@ -1,9 +1,17 @@
 <link rel="stylesheet" href="./linked.css" />
 <link rel="stylesheet" href="./linked-with-import.css" />
 
+<style>
+  .inline {
+    color: red;
+  }
+</style>
+
 <div class="wrapper">
   <h1>CSS Sourcemap</h1>
 
+  <p class="inline">&lt;inline&gt;</p>
+
   <p class="linked">&lt;linked&gt;: no import</p>
   <p class="linked-with-import">&lt;linked&gt;: with import</p>
 

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<string, Array<string>>
+  Map<string, Array<{ code: string; map?: SourceMapInput }>>
 >()
 
 // 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,15 +98,15 @@ 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())
   }
   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('')
                 // <script type="module">...</script>
                 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
           }

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'
@@ -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)))
+    )
   }
 }
 
@@ -90,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 || '/'
@@ -104,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, contents)
+    addToHTMLProxyCache(config, url, inlineModuleIndex, { code, map })
 
     // inline js module. convert to src="proxy"
     const modulePath = `${
@@ -141,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')
       }
     }

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
       }