sourcemap sources field gets url encoded

[sapphi-red]

When a file is in a directory with a name including @, the sources field in sourcemap gets url encoded.
This does not happen with dart-sass.

.
└── src
    ├── @dir
    │   └── bar.scss
    └── foo.scss

sass.render({
  file: path.resolve('src/foo.scss'),
  outFile: path.resolve('dist/foo.css'),
  sourceMap: true
})

sass.render({
  file: 'src/foo.scss',
  outFile: 'dist/foo.css',
  sourceMap: true
})

[dart-sass] with resolve
{"version":3,"sourceRoot":"","sources":["../src/@dir/bar.scss","../src/foo.scss"],"names":[],"mappings":"AAAA;EACE;;;ACCF;EACE","file":"foo.css"}

-----------
[sass-embedded] with resolve
{"version":3,"sourceRoot":"","sources":["../src/%40dir/bar.scss","../src/foo.scss"],"names":[],"mappings":"AAAA;EACE;;;ACCF;EACE","file":"foo.css"}

-----------
[dart-sass] without resolve
{"version":3,"sourceRoot":"","sources":["file:///D:/documents/GitHub/sass-embedded-atmark-sourcemap-reproduction/src/@dir/bar.scss","file:///D:/documents/GitHub/sass-embedded-atmark-sourcemap-reproduction/src/foo.scss"],"names":[],"mappings":"AAAA;EACE;;;ACCF;EACE","file":"foo.css"}

-----------
[sass-embedded] without resolve
{"version":3,"sourceRoot":"","sources":["../src/%40dir/bar.scss","../src/foo.scss"],"names":[],"mappings":"AAAA;EACE;;;ACCF;EACE","file":"foo.css"}

Step to reproduce

1. Clone https://github.com/sapphi-red/sass-embedded-atmark-sourcemap-reproduction.
2. Run npm i.
3. Run node sass.js
4. See output.

[ntkme]

The source map spec actually implies that sources are URLs:

If the sources are not absolute URLs after prepending of the “sourceRoot”, the sources are resolved relative to the SourceMap (like resolving script src in a html document).

[sapphi-red]

It is valid to include @ in path of url. https://stackoverflow.com/questions/19509028/can-i-use-an-at-symbol-inside-urls

I added a directory named %40dir to reproduction.
Looks like dart-sass fails to handle this edge case.
%40dir/bar disappears from sources. I expect %2540dir/bar to be included if it is always url encoded.

[dart-sass] with resolve
{"version":3,"sourceRoot":"","sources":["../src/@dir/bar.scss","../src/foo.scss"],"names":[],"mappings":"AAAA;EACE;;;AADF;EACE;;;ACEF;EACE","file":"foo.css"}

-----------
[sass-embedded] with resolve
{"version":3,"sourceRoot":"","sources":["../src/%40dir/bar.scss","../src/foo.scss"],"names":[],"mappings":"AAAA;EACE;;;AADF;EACE;;;ACEF;EACE","file":"foo.css"}

[sapphi-red]

Yes I expect sources field to be

• ../src/@dir/bar.scss
• ../src/%40dir/bar.scss
• ../src/foo.scss

or

• ../src/%40dir/bar.scss
• ../src/%2540dir/bar.scss
• ../src/foo.scss

.
The first one is all not url encoded. The second one is all url encoded.

[ntkme]

As regarding the path after @import, I checked the FileSystemImporter, it turns out that it will call path.fromUri first, so that %40dir and @dir are actually both the same @dir, to import %40dir you will need to import %2540dir.

So this is an inconsistency between the output of the two.

[ntkme]

The behavior difference is only shown in the legacy API, which for the embedded host it is just a wrapper of new API. I modified your test cases with the new compile API, and they all get the same result. So likely a bug in legacy API in embedded-host-node.

[ntkme]

URL encode is done by this:

embedded-host-node/lib/src/legacy/index.ts

Lines 256 to 259 in 5c398d8

	if (source.startsWith('file://')) {
	return pathToUrlString(
	p.relative(sourceMapDir, fileUrlToPathCrossPlatform(source))
	);

[sapphi-red]

%40dir and @dir are actually both the same @dir, to import %40dir you will need to import %2540dir.

Oh I was misunderstanding the behavior. Yes you were correct.
Now I think it does not need anything to be changed because there is a consistency. (But may need to be fixed if more strict compatibility is required.)

Also for without resolve ones, there is difference.

[dart-sass] without resolve
{"version":3,"sourceRoot":"","sources":["file:///D:/documents/GitHub/sass-embedded-atmark-sourcemap-reproduction/src/@dir/bar.scss","file:///D:/documents/GitHub/sass-embedded-atmark-sourcemap-reproduction/src/foo.scss"],"names":[],"mappings":"AAAA;EACE;;;ACCF;EACE","file":"foo.css"}

-----------
[sass-embedded] without resolve
{"version":3,"sourceRoot":"","sources":["../src/%40dir/bar.scss","../src/foo.scss"],"names":[],"mappings":"AAAA;EACE;;;ACCF;EACE","file":"foo.css"}

I will leave this issue open for the reasons above, but please feel free to close it.