Discover an amazing tool that is not limited to use with just libsass - find out more details here.
Remember, you'll need a file with a source map embedded as a multiline comment and the sourcesContent field in it, similar to this example:
.d1 {
width: 10px; }
.d1 .d2 {
width: 20px; }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQUEsR0FBSTtFQUNBLEtBQUssRUFBRSxJQUFJO0VBQ1gsT0FBSTtJQUNBLEtBQUssRUFBRSxJQUFJIiwic291cmNlcyI6WyIxLnNjc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLmQxIHtcbiAgICB3aWR0aDogMTBweDtcbiAgICAuZDIge1xuICAgICAgICB3aWR0aDogMjBweDtcbiAgICB9XG59XG4iXSwibmFtZXMiOltdLCJmaWxlIjoiMS5jc3MifQ== */
Simply paste it into the Output field, click Analyze, and you're ready to go. The content from the source map will replace whatever was originally in the Input field. Use arrow keys to navigate between mappings.
Now let's delve into how to accomplish this using ruby's sass gem:
Gemfile:
source 'https://rubygems.org'
gem 'sass'
package.json:
{
"dependencies": {
"convert-source-map": "^1.3.0"
}
}
1.scss:
.d1 {
width: 10px;
.d2 {
width: 20px;
}
}
1.js:
var convert = require('convert-source-map');
var fs = require('fs');
console.log(
convert.fromJSON(
fs.readFileSync('1.css.map')
).toComment()
.replace(/^\/\//, '/*')
.replace(/$/, ' */')
);
Then run these commands:
$ bundle install && npm i
$ rm -f 1.css* && bundle exec sass --sourcemap=inline 1.scss 1.css
$ cat 1.css | head -n -1 && node 1.js
.d1 {
width: 10px; }
.d1 .d2 {
width: 20px; }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQUEsR0FBSTtFQUNBLEtBQUssRUFBRSxJQUFJO0VBQ1gsT0FBSTtJQUNBLEtBQUssRUFBRSxJQUFJIiwic291cmNlcyI6WyIxLnNjc3MiXSwibmFtZXMiOltdLCJmaWxlIjoiMS5jc3MifQ== */
Add the result to the Output field and you're done.
The process may seem complex at first, but it's much easier than manually inspecting source maps. Trust me, I speak from experience :)
If you have a source map in JSON format, like this:
{ version: 3,
sourceRoot: '/path/to/dir',
sources: [ '1.css' ],
sourcesContent: [ 'body {\n background: #ddd;\n}\ndiv {\n width: 100px;\n height: 100px;\n margin: auto;\n background: #666;\n}\n' ],
names: [],
mappings: 'AAAA,AAAA,IAAI,AAAC,CACD,UAAU,CAAE,IAAI,CACnB,AACD,AAAA,GAAG,AAAC,CACA,KAAK,CAAE,KAAK,CACZ,MAAM,CAAE,KAAK,CACb,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,IAAI,CACnB' }
You can convert it into a comment like so:
var convertSourceMap = require('convert-source-map')
console.log(convertSourceMap.fromJSON(mapAsAString).toComment({multiline: true}));
P.S. Check out some other useful tools for working with source maps and get an sourcemap-codec package for added convenience.