External Sourcemaps

[polarathene]

Have been trying sourcemaps out recently and discovered the incorrect mappings, with some help I built the latest node-sass+libsass here.

I'm using the following to build my scss files to css with sourcemaps:

var fs = require('fs');
var nsass = require('node-sass');

// Usually using gulp-sass
gulp.task('nsass', function(){
    var scss_filename = 'scss/main.scss';

    nsass.render({
        file: scss_filename,
        sourceMap: true,
        outFile: 'xmain.css',
        success: nsass_cb
    });
})

function nsass_cb(results){
    fs.writeFileSync('./build/css/xmain.css', results.css);
    fs.writeFileSync('./build/css/xmain.css.map', results.map); // Previously had to use JSON.stringify()
}

Previously I'd get this output:

{
    "version": 3,
    "file": "xmain.css",
    "sources": ["main.scss","_config.scss"],
    "sourcesContent": [],
    "names": [],
    "mappings": "AAGA,AAAW,AAAQ,AAAU,ACHtB,ADKP,AACE,AAAQ,AACR,ACNI",
}

And with latest libsass+node-sass:

{
    "version": 3,
    "file": "xmain.css",
    "sources": [
        "main.scss",
        "_config.scss"
    ],
    "sourcesContent": [],
    "mappings": "AAGA,AAAA,SAAS,AAAA;EAAE,AAAA,MAAM,AAAA,EAAE,AAAA,QAAK,AAAA;EAAK,AAAA,KAAK,AAAA,ECH3B,OAAO;;ADKd,AAAA,SAAS,AAAA;EACP,AAAA,MAAM,AAAA,EAAE,AAAA,QAAK,AAAA;EACb,AAAA,KAAK,AAAA,ECND,IAAI",
    "names": []
}

I'm not sure if libsass or node-sass provides the optional sourceRoot property, kind of important if you're not embedding your source files into the sourcemap. I either need to manually provide it or can insert it via gulp-sourcemaps, alternatively I think prepending the relative path to each file in sources works too.

The mappings are much better, you can see visually through this example. Some small improvements could be done such as with sepia(1) is mapping to the .scss sepia, and then the ; mapping to the .scss (1); I haven't tried seeing if the mapping is different if I use a variable instead of 1. The visualizer also shows each mapping is duplicated with AAAA between each mapping, I think that might be a bug? It doesn't occur with mappings to the _config.scss partial

After this I sent it through to gulp-autoprefixer with gulp-sourcemaps, I'm not sure if it's due to the sourcemap from libsass or the way it's building it's own, the mapping is mostly correct, however the color variables mappings were lost, and the last } is mapped incorrectly. You can see the result here. I did a find&replace to remove the AAAA mappings as well, the output was the same.

[polarathene]

Have built source maps via gulp-ruby-sass, I'm assuming this is the same sourcemap output via ruby sass. It handles the sepia(1) as a single mapping in both .css and .scss files. Even if a variable is used, for some reason if I import the $value from test/num partial, it won't be referenced when used with sepia($value) only. Though if I use it as a value for a property like opacity it'll map to the partial referencing the test/num.scss in the sourcemap. Both libsass/rubysass handle variables like that so perhaps it's intended.

Visual mappings between the two here: gulp-ruby-sass, node-sass/libsass.

libsass mappings (With AAAA issue):

"mappings": "AAGA,AAAA,SAAS,AAAA;EAAE,AAAA,MAAM,AAAA,EAAE,AAAA,UAAK,AAAA;EAAU,AAAA,KAAK,AAAA,ECHhC,OAAO;;ADKd,AAAA,SAAS,AAAA;EACP,AAAA,MAAM,AAAA,EAAE,AAAA,UAAK,AAAA;EACb,AAAA,KAAK,AAAA,ECND,IAAI;EDOR,AAAA,OAAO,AAAA,EERD,GAAG"

ruby-sass mappings:

"mappings":"AAGA,SAAS;EAAE,MAAM,EAAE,UAAa;EAAE,KAAK,ECHhC,OAAO;;ADKd,SAAS;EACP,MAAM,EAAE,UAAa;EACrB,KAAK,ECND,IAAI;EDOR,OAAO,EERD,GAAG"

[booleanbetrayal]

+1

[gilluminate]

+1

[ChrissiQ]

+1

[josephdburdick]

+1

[mgreter]

This might be solved by #910! By the way the AAAA are basically just duplicates (two mappings at the same point). So I don't think this should itself have caused any issues, but they should be gone with the latest commits on master!

[mgreter]

Please re-open if this is still an issues!

[gilluminate]

I imported libsass master into node-sass, ran gulp-sass. There doesn't appear to be any change to the mapping problem. Still exists.

[mgreter]

Please give at least some example input and output, thanks!

[gilluminate]

input.scss

@import "test";

_test.scss

* {
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    -webkit-text-size-adjust: none;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

output.css

*{margin:0;padding:0;background-repeat:no-repeat;-webkit-text-size-adjust:none}*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

output.css.map

{"version":3,"sources":["_test.scss"],"names":[],"mappings":"AAAA,EACI,OAAQ,EACR,QAAS,EACT,kBAAmB,UACnB,yBAA0B,MAG9B,EAAG,AAAC,SAAS,AAAC,QACV,gBAAiB,WACjB,mBAAoB,WACpB,WAAY","file":"degreed_app.css","sourcesContent":["* {\n    margin: 0;\n    padding: 0;\n    background-repeat: no-repeat;\n    -webkit-text-size-adjust: none;\n}\n\n*, *:before, *:after {\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}"],"sourceRoot":"/source/"}

The problem seems to be stemming from the *, *:before, *:after line because that's where line numbers get messed up in Chrome Dev Tools.

[mgreter]

OK, I tested your example with latest master and it gives completely different results than you posted?? I also see "sourceRoot" in your output.css.map, which is not from libsass?? So what are you actually pasting here?? For me this is an invalid report, sorry!

output.css.map

{
        "version": 3,
        "file": "output.css",
        "sources": [
                "input.scss",
                "_test.scss"
        ],
        "sourcesContent": [],
        "mappings": "ACAA,CAAC,AAAC,CACE,MAAM,CAAE,CAAE,CACV,OAAO,CAAE,CAAE,CACX,iBAAiB,CAAE,SAAU,CAC7B,wBAAwB,CAAE,IAAK,CAJhC,AAOH,CAAC,CAAE,CAAC,ADPD,OAAO,CCOG,CAAC,ADPF,MAAM,ACOG,CACjB,eAAe,CAAE,UAAW,CAC5B,kBAAkB,CAAE,UAAW,CAC/B,UAAU,CAAE,UAAW,CAHL",
        "names": []
}

[gilluminate]

My mistake! This was coming from gulp-sourcemaps which I was led to believe used libsass as a dependancy. Not the case. Carry on.