Sourcemaps offset

[maxdewald]

Describe the bug
In my current project and in the example repo below the sourcemaps are offset by a few lines.
This seems to be related to the style tag:

To Reproduce

• clone repo (https://github.com/Maggi64/sapper-sourcemap-offset)
• npm run dev
• look at chrome dev tools

Expected behavior
Correctly linked sourcemaps. Otherwise debugging issues becomes quite hard.

Information about your project:

• Your browser and the version: (Chrome 87)

• Your operating system: (Windows 10)

• Rollup & svelte-preprocess are updated to the newest versions (see repo package.json)

• All other packages used are also on the newest version

I hope this is the correct place for this issue. Help and suggestions where that problem exactly comes from are appreciated.

Edit: Even without scss preprocessing this issue still persists. Adjusted example repo.

[benmccann]

@milahu I know you had done some investigation into this in sveltejs/svelte#5584 (comment). Not sure if it's something you'll be able to take a look at, but if so I'd be happy to help review

[milahu]

thanks for the bug : )

a minimal reproduction is: add this to every svelte and js file

console.log('this is file.xyz line 10'); // TODO keep line number in sync

and then look at the JS console

with svelte-preprocess on

with svelte-preprocess off

same result with older versions of svelte, 3.0.1 for example

still not sure where exactly the problem is ..
from the sapper template i could not reproduce yet

@dummdidumm do you know more?
ben said you saw the off-by-one bug too

[dummdidumm]

No I don't know more, but I think it's inside Svelte because inside language-tools we are able to map the warnings correctly.

[milahu]

small bug in svelte-preprocess:

the regex for <template>.*</template> is too greedy
so the input <template>T1</template><template>T2</template>
is wrongly replaced with T1</template><template>T2

these work as expected in svelte:

	async function preprocess_tag_content(tag_name: 'style' | 'script', preprocessor: Preprocessor) {
		const get_location = getLocator(source);
		const tag_regex = tag_name === 'style'
			? /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi
			: /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;

also, <template src="./input.template.html"></template> is simply removed
i expect the contents of input.template.html should be injected?

[milahu]

edit: nope

possible cause:

<!-- This file is generated by Sapper — do not edit it! -->

is added on top of every *.svelte file that is passed to svelte.compile

edit: no, this comes from node_modules/@sapper/internal/App.svelte

to debug, i patched node_modules/svelte/compiler.js like

 	function compile(source, options = {}) {

+console.log('compile source >>>>'+source+'<<<<');

injecting that comment without changing lines / columns
and without creating syntax errors is not trivial .. simply remove?
maybe use filenames like component.autogenerated.svelte

good night ; )

[milahu]

new suspect:
in svelte.preprocess, this

<style>
    h2 {
        font-size: 15px;
    }
</style>

becomes this

<style>
    h2 {
        font-size: 15px;
    }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW....4iXX0= */</style>

before the /*# there should be no newline

backtrace:

svelte-preprocess/dist/autoProcess.js
  calls transformer 'globalStyle'

svelte-preprocess/dist/transformers/globalStyle.js
  postcss_1.default(plugins).process(content

postcss/lib/lazy-result.js
  let map = new MapGenerator(str, this.result.root, this.result.opts)
  let data = map.generate()

postcss/lib/map-generator.js
  let eol = '\n'
  if (this.css.includes('\r\n')) eol = '\r\n'
  this.css += eol + '/*# sourceMappingURL=' + content + ' */'

so .. blame postcss! postcss/postcss#1486

a quickfix could be made with https://github.com/ds300/patch-package

case closed : )

[dummdidumm]

This happens for me when I use a TS preprocessor only so that can't be it. Also the PostCSS issue should have been fixed ( #251 ).

[milahu]

so that can't be it

should be the same problem

sourcemaps are injected at end-of-file
seems that consumers expect the /*# sourceMap... at start-of-line
so a newline must be added ..
but that change (added line + added columns) is not included in the sourcemap

[dummdidumm]

I'm not sure that's true. If I throw an error inside the script, that error has the wrong line. If the sourceMap-stuff is added inline, then it's added to the end of the script tag, so it should not affect things before that.

For reference, here is how language-tools does the sourcemapping:

1. Find style/script start/end position
2. Preprocess stuff
3. Find style/script start/end position in transformed file
4. Don't merge source maps in to one, keep them seperate

When an original position is requested, find out if it's inside script/style.
If yes:

1. Find out if the position relative to the generated fragment. For example if script starts at line 2, the relative position is line-2.
2. Use the sourcemap of the script/style to find the original position
3. Find out the position relative to the whole original file. For example if the original position within the script is at line 2, and the script starts at line 2, it's 2+2.

[milahu]

fixed the postcss bug in postcss/postcss#1487
and guess what .. it works : D

problem was:
appending of the annotation-comment line /*# sourceMappingURL=.... */
was not reflected by the sourcemap
so in the result, only N-minus-one lines were mapped
producing these off-by-one errors

[maxdewald]

@milahu In some cases lines are not offset N-1 lines, it actually seems to depend on the complexity of the style tag

[milahu]

postcss adds one 'bad' line for every preprocessor
in your case postcss calls globalStyle and scss preprocessors

an easier solution is sveltejs/svelte#5754
to make svelte more fault-tolerant
rather than fix all possible preprocessors

[maxdewald]

I updated my example repo to the newest version including that sourcemap pr.
The issue still persist sadly.