Sourcemap for ... points to missing source files for @import with sass modern api

[hi-ogawa]

Describe the bug

There was a report on Nuxt nuxt/nuxt#28723 as they enables css.devSourcemap by default. It turns out the issue can be reproduced on Vite as well, but it wasn't caught by playground/css-sourcemap since it doesn't use @import.

This seems to happen when @import is resolved via custom importer. Here is an example.

// [not ok] this triggers Vite's custom importer
@import "/variables.scss";

// [ok] sass's own resolution is fine
// @import "../variables.scss";

body {
  color: $primary;
}

$ DEBUG=vite:sourcemap pnpm dev
...
Sourcemap for "/home/hiroshi/code/personal/reproductions/vite-sass-modern-sourcemap/src/style.scss" points to missing source files
  vite:sourcemap Missing sources:
  vite:sourcemap   /home/hiroshi/code/personal/reproductions/vite-sass-modern-sourcemap/src/data:;charset=utf-8,$primary: blue;
  vite:sourcemap  +0ms

Reproduction

https://github.com/hi-ogawa/reproductions/tree/main/vite-sass-modern-sourcemap

Steps to reproduce

• open https://stackblitz.com/github/hi-ogawa/reproductions/tree/main/vite-sass-modern-sourcemap
• see Sourcemap for "/home/projects/jvmipklqor.github/src/style.scss" points to missing source files in the terminal

System Info

(stackblitz)

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^5.4.1 => 5.4.5

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

It looks like modern api's custom importer using canonicalize + load generates source map's sources as data: url. There's another way to implement custom importer using findFileUrl and this one would work, but this is not usable for Vite's custom import as it currently requires patching up file content for rebasing url references.

I made a quick demo here https://github.com/hi-ogawa/reproductions/blob/main/vite-sass-modern-sourcemap/repro.mjs

@import "/variables.scss";

body {
  color: $primary;
}

# canonical + load importer
$ node repro.mjs modern
{
  css: 'body {\n  color: blue;\n}',
  map: {
    version: 3,
    sourceRoot: '',
    sources: [ 'file:///main.scss', 'data:;charset=utf-8,$primary:%20blue;' ],
    names: [],
    mappings: 'AAEI;EACE,OCHI'
  }
}

# findFileUrl importer
$ node repro.mjs modern-findFileUrl
{
  css: 'body {\n  color: blue;\n}',
  map: {
    version: 3,
    sourceRoot: '',
    sources: [
      'file:///main.scss',
      'file:///home/hiroshi/code/personal/reproductions/vite-sass-modern-sourcemap/variables.scss'
    ],
    names: [],
    mappings: 'AAEI;EACE,OCHI'
  }
}

Probably quick solution/workaround is to simply silence "missing source files" warning by adding data: to this list:

vite/packages/vite/src/node/server/sourcemap.ts

Lines 13 to 16 in 95ec59f

	// Virtual modules should be prefixed with a null byte to avoid a
	// false positive "missing source" warning. We also check for certain
	// prefixes used for special handling in esbuildDepPlugin.
	const virtualSourceRE = /^(?:dep:|browser-external:|virtual:)|\0/

---

EDIT: It turned out sass supports returning ImporterResult.sourceMapUrl from custom importer and it works. I updated repro.mjs accordingly https://github.com/hi-ogawa/reproductions/blob/5ace1c1af9c78ec37d2b3e2cb4f5cd5fe07e1a40/vite-sass-modern-sourcemap/repro.mjs#L27