Inline source text along with map? about postcss

[ai]

Hm. PostCSS now save return result.map only for non-inline maps. But we can change API :).

Why you need inline map and map content to save it to separated file?

[ai]

Current API is:

1. You pass input CSS and user options and didn’t think ever about maps.
2. PostCSS autodetect previous map, check options.
3. If PostCSS decide to write output map file, it will add .map property to result.

var result = postcss(processor).process(css, opts);

fs.writeFileSync('out.css', result.css);
if ( result.map) {
  fs.writeFileSync('out.css.map', result.map);
}

[ai]

You can ask PostCSS to process map to result.map and inline it by yourself:

var result = postcss(processor).process(css, map: true, inlineMap: false);
var output = result.css;
var base64 = new Buffer(result.map).toString('base64');

output += "\n/*# sourceMappingURL= data:application/json;base64," + base64 + " */";

[dbashford]

Thanks for getting back to me!

What I want is to only ever have 1 file. For asset pipelining it makes things a bit easier to manage. Sort of the same reason you inline the map. You could write 3 files, inlining the map cuts it down to 2, inlining the source too is a big win!

That last thing might be what I need to do.

Because PostCSS is building the inline portion itself, I would either need to depend on PostCSS to inline the source too, or I would need to pretend like I don't want inline CSS and then inline it myself. Maybe I'll just do that.

I'll give it a shot. I'll close this for now and let you know how it goes.

Thanks!

[dbashford]

Let me know what I might be screwing up?

Input

:fullscreen a {
    transition: transform 1s
}

body {
  padding:100px;
}

Code

var opts = {
    map: true,
    inlineMap: false
};

var result = autoprefixer.process( file.outputFileText, opts );

Output

:-moz-full-screen a {
    transition: transform 1s
}

:fullscreen a {
    transition: transform 1s
}

body {
  padding:100px;
}
/*# sourceMappingURL=to.css.map */

Is there anything specific I need to do to get it to not tack on that source map line at the bottom? Obviously I can remove the last line if that's the route I need to go.

[ai]

You set map: true to generate maps and inlineMap: false to generate in-file map, instead of inline. So your map files now is in result.map.

I didn’t understand what you really whant in this example.

If you want to remove /*# sourceMappingURL=to.css.map */, add mapAnnotation: false option.

If you want to inline map to CSS (but you willn’t have result.map), set inlineMap: true.

[dbashford]

What I want is this

:-moz-full-screen a {
    transition: transform 1s
}

:fullscreen a {
    transition: transform 1s
}

body {
  padding:100px;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2RiYXNoZm9yZC9taW1vc2FwbGF5L2Zvby9wdWJsaWMvc3R5bGVzaGVldHMvZm9vLmNzcyIsInNvdXJjZXMiOlsiL1VzZXJzL2RiYXNoZm9yZC9taW1vc2FwbGF5L2Zvby9hc3NldHMvc3R5bGVzaGVldHMvZm9vLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtJQUNJLHlCQUF3QjtFQUMzQjs7QUFGRDtJQUNJLHlCQUF3QjtFQUMzQjs7QUFFRDtFQUNFLGVBQWM7RUFDZiIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyI6ZnVsbHNjcmVlbiBhIHtcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMXNcbn1cblxuYm9keSB7XG4gIHBhZGRpbmc6MTAwcHg7XG59Il19 */

That has both the map and the source inlined together. I didn't know how to remove the mapAnnotation. I hadn't noticed that in the docs, but I see it now. I'll give that a shot.

[ai]

You want just inline map. You need only inlineMap: true option without magic:

var result = autoprefixer.process( file.outputFileText, { inlineMap: true });

[dbashford]

But that doesn't include the source it seems? It just inlines the map?

[ai]

Oh, I finally understand you :). You didn’t like, what map will generated?

OK, why you need sourcesContent?

[dbashford]

Maybe it'll help if I decode the base64 and format the JSON

{
   "version":3,
   "file":"/Users/dbashford/mimosaplay/foo/public/stylesheets/foo.css",
   "sources":[
      "/Users/dbashford/mimosaplay/foo/assets/stylesheets/foo.css"
   ],
   "names":[

   ],
   "mappings":"AAAA;IACI,yBAAwB;EAC3B;;AAFD;IACI,yBAAwB;EAC3B;;AAED;EACE,eAAc;EACf",
   "sourceRoot":"",
   "sourcesContent":[
      ":fullscreen a {\n    transition: transform 1s\n}\n\nbody {\n  padding:100px;\n}"
   ]
}

Notice sourcesContent?

[dbashford]

Like I said above, 1 file is easier than 2. For the same reason you inline the map, so you don't have to write the .map file, I don't want to have to write the .src file. Ideally I just want one file that has it all. Less file IO the better, mostly just because its easier to manage.

That make sense?

You have provided the ability to get what I need, I just have to build it myself. This works:

var opts = {
  map: true,
  inlineMap: false,
  mapAnnotation: false
};

var result = autoprefixer.process( text, opts );
var sourceMap = JSON.parse( result.map );
sourceMap.sourceRoot = "";
sourceMap.sources[0] = inputFileName;
sourceMap.sourcesContent = [text];
sourceMap.file = outputFileName;
var base64SourceMap = new Buffer( JSON.stringify( sourceMap ) ).toString( "base64" );
var datauri = "data:application/json;base64," + base64SourceMap;
outputFileText = result.css + "\n/*# sourceMappingURL=" + datauri + " */\n";

[ai]

But how browsers will use sourcesContent right know? They only show rule destenation according maps.

[ai]

I think PostCSS should had mapSource option. And also detect source in prevous map. But I will add this feature maybe only after few week :(.

In your case right now I recommend to build map yourself. Next version will support sources content and you can clean your code.

[dbashford]

Sounds great!

Chrome supports this out of the box. Firefox just added CSS source maps and I don't believe it supports inline source.

I handled this with CoffeeScript maps by allowing devs to toggle a flag for whether they want everything broken out into separate files or if they want it all inlined with it defaulting to inline. I wasn't planning on doing this for the autoprefixer stuff unless someone asks for it.

The advantage to separate source files is it'll let you edit the source in the browser. Being able to edit the source in the browser is nice, but if you have live reload its practically the same thing. Just as instant as editing in the browser to be honest.

Appreciate all your help!

[dbashford]

Definitely no hurry on this. Like I said, the mechanism to do it is there, just a little extra work. 8 lines of code isn't going to kill me. =)

[ai]

@dbashford yeap, I understand that this mechanism is ugly, but on this week I willn’t have a time :(. But we definitely will clean your hack in next release by mapSource option. Or maybe we should use sourceContent: true option?

[dbashford]

I think sourceContent is a little better than mapSource. It matches the inline property name. Anyone (like me) who needs to use it will understand what that flag does right away without reading the docs. =)

[ai]

Done f7e61a5

It will be in 1.0 release in this or next week.

[ai]

Option will be map: { sourcesContent: true }

[lydell]

Wouldn’t it be better if the option was called sourceContents, since that’s the name of the property of source maps?

[ai]

@lydell spec contains sourcesContent

[lydell]

Sorry, you’re right.

[lydell]

Thanks for pointing that out to me! Seems like I’ve been doing it wrong all the time in source-map-resolve. How embarrassing.

[ai]

@lydell don’t worry, everyone happy with Referer in HTTP :)