Source map line numbers off by two with no plugins

Hey all,

I’ve encountered a bit of an issue with sourcemaps. My workflow is that I first compile my SASS code down to CSS, and then use PostCSS on the resulting code / source maps.

My problem is that even with no plugins, after going through PostCSS, source map line numbers are off by 2 (they point to 2 lines before the actual line).

This is the input CSS and input source map generated from SASS:

p{color:red}a{color:green}

/*# sourceMappingURL=before.css.map */

{
	"version": 3,
	"file": "styles.css",
	"sources": [
		"styles.scss"
	],
	"sourcesContent": [
		"p {\n\tcolor: red;\n}\n\na {\n\tcolor: green;\n}\n"
	],
	"mappings": "AAAA,AAAA,CAAC,AAAC,CACD,KAAK,CAAE,GAAI,CACX,AAED,AAAA,CAAC,AAAC,CACD,KAAK,CAAE,KAAM,CACb",
	"names": []
}

As can be seen on source-map-visualization everything is still linked properly.

Now running them through PostCSS without plugins with this code:

var postcss = require('postcss');
var fs = require('fs');
var path = require('path');

var beforeStyles = fs.readFileSync('before.css', 'utf-8');
var beforeMap = fs.readFileSync('before.css.map', 'utf-8');

postcss([])
	.process(beforeStyles, { from: 'before.css', to: 'after.css', map: { inline: false, prev: beforeMap } })
	.then(function(result) {
		fs.writeFileSync('after.css', result.css);
		fs.writeFileSync('after.css.map', result.map);
	}, function(err) {
		console.log(err);
	});

Results in the following output:

p{color:red}a{color:green}
/*# sourceMappingURL=after.css.map */

{"version":3,"sources":["styles.scss"],"names":[],"mappings":"AAAA,EACC,SAAW,CACX,EAGA,WAAa,CACb","file":"after.css","sourcesContent":["p {\n\tcolor: red;\n}\n\na {\n\tcolor: green;\n}\n"]}

Which, we can observe on source-map-visualization, is broken. The a selector has no corresponding line number.

[ai]

Of course, it is a error and I will fix it. PostCSS should update others source map.

[x-yuri]

I now see. Regarding OP’s test case. IMO nothing is broken in the “after” source map (as well as in the “before” one). source-map-vizualization doesn’t have the last word in it. It’s just another consumer. Which happens to be a visualization tool, and not the best one if you ask me. The whole issue with source maps comes from—correct me if I’m wrong—non-strict spec. source-map package doesn’t do anything wrong, it just follows another interpretation of the spec. Not that I’m trying to put the blame on the spec, it probably has its reasons.

Then, these days the issue can’t be reproduced (line numbers off by two). Or line numbers are simply off by one consistently across the whole stylesheet. At least in Chromium 63.0.3239.132. From what I can see, Chromium takes the first mapping after the opening curly bracket.

Regarding my test case, I was wondering why so much less mappings was left after postcss. So, postcss parses the css code, which results in AST with line/column numbers. No processing is done. Then source map is generated based on the AST. After which original source map is applied.

Now then, what does “apply” here mean again? We have source code (A), source code A after processing with sass (B), and source code B after processing with postcss (C, nothing has changed). And we have two source maps: B -> A, C -> B. When applying, source-map package takes a mapping from C -> B source map, its original position (B) and maps it using B -> A source map to original original position (A). That gives us as many mappings as was generated by postcss, but there could be less (when adjacent mappings point to the same position).