broken source map for inline sourcemap with sourcesContent set

Question

broken source map for inline sourcemap with sourcesContent set

bassjobsen opened this issue 10 years ago · comments

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:

gulp-community/gulp-less#126
http://stackoverflow.com/a/27830905/1596547 (comments on the answer)

Andrey Sitnik · Answer 1 · Sat Jan 24 2015 22:45:32 GMT+0800 (China Standard Time)

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

Bass Jobsen · Answer 2 · Sat Jan 24 2015 23:15:08 GMT+0800 (China Standard Time)

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

Andrey Sitnik · Answer 3 · Sun Jan 25 2015 00:33:43 GMT+0800 (China Standard Time)

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.

Andrey Sitnik · Answer 4 · Sun Jan 25 2015 00:38:42 GMT+0800 (China Standard Time)

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.

Andrey Sitnik · Answer 5 · Sun Jan 25 2015 00:42:43 GMT+0800 (China Standard Time)

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 ;).

Bass Jobsen · Answer 6 · Sun Jan 25 2015 07:40:45 GMT+0800 (China Standard Time)

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

Andrey Sitnik · Answer 7 · Sun Jan 25 2015 07:44:10 GMT+0800 (China Standard Time)

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.

Mark Penner · Answer 8 · Wed Feb 04 2015 08:16:38 GMT+0800 (China Standard Time)

@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.