broken source map for inline sourcemap with sourcesContent set

[bassjobsen]

i have t.less:

p {
transform: scaleX(0.5);
}

Then i run lessc less/t.less t.css --source-map --source-map-map-inline --source-map-less-inline

Now my t.css contains the following content:

p {
  transform: scaleX(0.5);
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxlc3MvdC5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0EsV0FBVyxXQUFYIiwiZmlsZSI6InQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsicCB7XG50cmFuc2Zvcm06IHNjYWxlWCgwLjUpO1xufVxuIl19 */

the base encode string correspondence with:

{"version":3,"sources":["less/t.less"],"names":[],"mappings":"AAAA;EACA,WAAW,WAAX","file":"t.css","sourcesContent":["p {\ntransform: scaleX(0.5);\n}\n"]}

Then i run:

fs = require('fs')
fs.readFile('t.css', 'utf8', function (err,css) {
  if (err) {
    return console.log(err);
  }

var autoprefixer = require('autoprefixer-core');
var prefixed = autoprefixer.process(css,{map:{inline:true}}).css;

console.log(prefixed);
});

The above script outputs:

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxlc3MvdC5sZXNzIiwidC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDQSxnQ0FBQTtNQUFBLDRCQUFBO1VBQUEsd0JBQUE7RUNDQyIsImZpbGUiOiJ0by5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJwIHtcbnRyYW5zZm9ybTogc2NhbGVYKDAuNSk7XG59XG4iLCJwIHtcbiAgdHJhbnNmb3JtOiBzY2FsZVgoMC41KTtcbn1cbi8qIyBzb3VyY2VNYXBwaW5nVVJMPWRhdGE6YXBwbGljYXRpb24vanNvbjtiYXNlNjQsZXlKMlpYSnphVzl1SWpvekxDSnpiM1Z5WTJWeklqcGJJbXhsYzNNdmRDNXNaWE56SWwwc0ltNWhiV1Z6SWpwYlhTd2liV0Z3Y0dsdVozTWlPaUpCUVVGQk8wVkJRMEVzVjBGQlZ5eFhRVUZZSWl3aVptbHNaU0k2SW5RdVkzTnpJaXdpYzI5MWNtTmxjME52Ym5SbGJuUWlPbHNpY0NCN1hHNTBjbUZ1YzJadmNtMDZJSE5qWVd4bFdDZ3dMalVwTzF4dWZWeHVJbDE5ICovIl19 */

The base64 encoded part now seems to contain two sourcemaps:

{"version":3,"sources":["less/t.less","t.css"],"names":[],"mappings":"AAAA;EACA,gCAAA;MAAA,4BAAA;UAAA,wBAAA;ECCC","file":"to.css","sourcesContent":["p {\ntransform: scaleX(0.5);\n}\n","p {\n  transform: scaleX(0.5);\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxlc3MvdC5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0EsV0FBVyxXQUFYIiwiZmlsZSI6InQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsicCB7XG50cmFuc2Zvcm06IHNjYWxlWCgwLjUpO1xufVxuIl19 */"]}

Related issues:

• using Less Autoprefix plugin breaks sourcemaps (sources property) gulp-community/gulp-less#126
• http://stackoverflow.com/a/27830905/1596547 (comments on the answer)

[ai]

Can you check again, but set from and to options to autoprefixer.process?

[bassjobsen]

when i try var prefixed = autoprefixer.process(css,{from:"t.css",to:"fixed.css",map:{inline:true}}).css; the result is the same.

[ai]

This is a PostCSS issue. I try to find out source of problem.

But problem is not critical, because source map still correct (it shows to less/t.less). Problem is only with map size.

[ai]

Source map vizualizer shows that t.css is in last source map, because there is a very small part of CSS that was missed in first map.

[ai]

OK. I found a problem. LESS doesn’t create a map from closed bracket } to origin source, but PostCSS does. So } from result file was mapped to } in t.css.

Right now I have no solutions. Can you invastigae, does Sass misses } too? If Sass map will miss } I can remove this map from PostCSS. But right now, I thik it is a LESS problem ;).

[bassjobsen]

Well okay, if i understand the issue will. This also is the reason that autoprefixer adds the destination path to the source property of the sourcemap?

I mean after running: lessc less/t.less t.css --source-map --autoprefix my sourcemap look like:

{"version":3,"sources":["less/t.less","t.css"],

autoprefixer seems to add the "t.css" (undefined when the sourcemap does have a file property set, see: gulp-community/gulp-less#126)

If this is the same issue i can compare:

  .pipe(sourcemaps.init())
        .pipe(sass())
   .pipe(autoprefixer())
   .pipe(sourcemaps.write('./'))

outputs:

{"version":3,"sources":["t.less"]

with:

  .pipe(sourcemaps.init())
        .pipe(less())
   .pipe(autoprefixer())
   .pipe(sourcemaps.write('./'))

outputs:

{"version":3,"sources":["t.less","t.css"]

So it seems that Less does not map that last } whilst Sass does. I'm not sure if gulp-sass is relevant for Sass in general? Other sourcemap code seems in progress yet, see: sass/libsass#837

[ai]

Yeap, problem is in Less, because it doesn’t add mappings for {. So I recommend to create a issue in Less repo. I think Less fix will not be too big.

[mnpenner]

@polarathene

I tried adding

.pipe(sourcemaps.write())
.pipe(sourcemaps.init({loadMaps:true}))

There was no change.

Tried removing the sourceRoot option too. No change either.

If you're still having no luck after trying both of those, verify that your sourcemaps are working correctly without autoprefixer

They are.

check that the css links to the correct line in the original source files

When I click the source link in Chrome DevTools it does take me to the correct line (with autoprefixer disabled), although it takes me to the parent selector in the case of nested selectors in LESS.

I guess I'll have to come up with small example.