x-yuri x-yuri - 12 days ago 5
Sass (Sass) Question

How to interpret source map mappings?

Let's say I have this stylesheet:

.d1
width: 10px
.d2
width: 20px


It results in the following css code (with
nested
output style):

.d1 {
width: 10px; }
.d1 .d2 {
width: 20px; }


Source map (
v3
) contains the following mappings:

AAAA,AAAA,GAAG,CAAC;EACA,KAAK,EAAE,IAAK,GAES;EAHzB,AAEI,GAFD,CAEC,GAAG,CAAC;IACA,KAAK,EAAE,IAAK,GAAG


After decoding it with this service, I got:

([0,0](#0)=>[0,0]) | ([0,0](#0)=>[0,0]) | ([0,3](#0)=>[0,3]) | ([0,4](#0)=>[0,4])
([1,4](#0)=>[1,2]) | ([1,9](#0)=>[1,7]) | ([1,11](#0)=>[1,9]) | ([1,16](#0)=>[1,13]) | ([3,25](#0)=>[1,16])
([0,0](#0)=>[2,2]) | ([2,4](#0)=>[2,2]) | ([0,3](#0)=>[2,5]) | ([2,4](#0)=>[2,6]) | ([2,7](#0)=>[2,9]) | ([2,8](#0)=>[2,10])
([3,8](#0)=>[3,4]) | ([3,13](#0)=>[3,9]) | ([3,15](#0)=>[3,11]) | ([3,20](#0)=>[3,15]) | ([3,23](#0)=>[3,18])


Source was generated in a similar fashion with
node-sass
(
libsass
).

My understaning is that those are pairs of points from original and resulting file. But let's take for example last pair from the second line:
([3,25](#0)=>[1,16])
. Row 3 column 25? That's kind of unexpected, don't you think?

Am I doing it wrong? Or source map is incorrect? Can you suggest the way to generate correct source map, if so?

Answer

UPD There's a great tool, and you can pass it resulting code and source map as explained here. It uses libsass for compiling input sass/scss code.

So, my guess was right, each pair (like ([0,0](#0)=>[0,0])) represents mapping between point in original file and point in resulting file, that is: ([rowOrig,ColOrig](srcFileIndex)=>[rowResult,ColResult]). srcFileIndex specifies which file it is about, since resulting file may be compiled from more than one source file. Indexing starts with 0.

The issue is with libsass producing incorrect source maps for sass code, as opposed to scss. Most likely because libsass doesn't handle sass files directly. Let's compare it with coffeescript as well:

package.json:

{
  "dependencies": {
    "coffee-script": "^1.11.1"
  }
}

1.js:

var coffee = require("coffee-script");
var fs = require('fs');
var result = coffee.compile(fs.readFileSync('1.coffee').toString(), {
    sourceMap: true,
});
console.log(result);

1.coffee:

a = 1
b = -> 2

Then

$ npm i
$ node 1.js

And you get the following code:

(function() {
  var a, b;

  a = 1;

  b = function() {
    return 2;
  };

}).call(this);

and mappings:

AAAA;AAAA,MAAA;;EAAA,CAAA,GAAI;;EACJ,CAAA,GAAI,SAAA;WAAG;EAAH;AADJ

([0,0](#0)=>[0,0])
([0,0](#0)=>[1,0]) | ([0,0](#0)=>[1,6])
([0,0](#0)=>[3,2]) | ([0,0](#0)=>[3,3]) | ([0,4](#0)=>[3,6])
([1,0](#0)=>[5,2]) | ([1,0](#0)=>[5,3]) | ([1,4](#0)=>[5,6]) | ([1,4](#0)=>[5,15])
([1,7](#0)=>[6,11])
([1,4](#0)=>[7,2])
([0,0](#0)=>[8,0])

Which looks good enough to me.