fails to parse css with sourcemaps

[joeybaker]

While developing with LESS/SASS/etc… and outputting sourcemaps, it would be great to then apply autoprefixer so that a bunch of elaborate mixins aren't required.

[nDmitry]

Well, autoprefixer adds some prefixed properties after preprocessor, so your sourcemaps just become obsolete... and I don't know what autoprefixer should do with this, but I will think about it and open the issue =)

[joeybaker]

Doh! yes, of course. Excellent point.

I guess the ideal situation would be for autoprefixer to modify the original sourcemaps to have the autoprefixed lines point to the original line.

[joeybaker]

FWIW, this is being considered over at autoprefixer https://github.com/ai/autoprefixer/issues/37

[lunelson]

Is there a way to get grunt-autoprefixer to use @lydell's fork of autoprefixer, which does support sourcemaps? This is being discussed over in that same thread but I don't know how to configure it https://github.com/ai/autoprefixer/issues/37

[nDmitry]

@lunelson as @ai said at ai/autoprefixer#37, v1.0 will support source maps soon, so what's the point to support fork with a different API now? I could make a separate brach though, as a temporary solution.

[lunelson]

@ai seems to suggest it won't be done until the new year, based on his comment re: progress of his "postCSS" project. So an interim solution would still be worthwhile for some people I think

[lydell]

Perhaps this can get you started:

sources.forEach(function(filepath) {
    var compiled = compiler.compile(grunt.file.read(filepath), {map: true, file: path.basename(filepath)});
    grunt.file.write(filepath, compiled.css);
    var map = compiled.sourceMap;
    applyInSourceMap(map);
    grunt.file.write(filepath + '.map', map.toString());
    grunt.log.writeln('File "' + filepath + '" prefixed.');
});

However, I'm not used to grunt. I use brunch, which handles source map generation automatically, applying in-source maps if needed. Since my goal was to create a brunch plugin for autoprefixer that supports source maps, I didn't bother to take an in-source map as an argument to the compile method. It just creates a source map, and leaves the rest to you. So you'd have to create the applyInSourceMap function above.

The CLI of my fork applies in-source maps automatically, though, using climap. Perhaps it can get you started. Hint: the secret sauce is the applySourceMap method from the source-map library.

Just tell me if I can help further :)

[lunelson]

@nDmitry any chance you'd consider doing a separate branch for this? Right now I have to keep turning autoprefixer off in order to work, then back on to see correct output. I'd love to use brunch but it seems to be only for backbone and similar projects...

[lydell]

brunch does not force you in any way to use any JavaScript library or any preprocessor or whatever. You could use the "dead simple" skeleton as a starting point.

BTW, I'm working on climap to be usable in grunt too; Hopefully I could contribute a version of this grunt plugin soon.

[lunelson]

Thanks @lydell, I realized shortly after that comment that brunch is not restricted to any framework ;), and then @brunch told me the same thing on twitter re installing 'dead simple', but it took me a while to figure out the configuration. I guess I would set some of the convention and module settings to false or turn them off somehow? I'm not using an application / templating framework.

What I'm after is straightforward actually (I think), but I can't determine if it's going to be possible; namely: a sass sourcemaps workflow passed through autoprefixer. Your autoprefixer-brunch plugin offers part of the puzzle, but sass-brunch doesn't seem to handle sass' sourcemaps. On the other hand, grunt-contrib-sass offers sass' sourcemaps but grunt-autoprefixer doesn't handle them after that. Can you see a way around it? I'd be happy to use brunch if it will do the trick...

[lydell]

I've added initial sourcemap support in a new branch (I managed to do it with the current climap API, though it is a bit clunky). Commit message:

Add initial source map support

By enabling the 'sourcemap' option, sourcemaps are generated.

The tests are very simple, though: They only check if source maps are
present, not if they are correct.

I'm new to grunt, so I couldn't find a way to test both with and without
source maps, so all tests have it enabled.

Moreover, there are no tests for in-sourcemaps.

Would you like to test it, @lunelson? Does it work with sass?

[lunelson]

Hey @lydell, this is great news. Had a few problems though. Sorry my previous comments were both premature, I failed to notice the 'options: sourcemap' flag you added.

Currently, I've got this set up but getting the following error from Grunt, and autprefixer is not prefixing:

Running "autoprefixer:build" (autoprefixer) task
Warning: Arguments to path.resolve must be strings Use --force to continue.

I've tried using the --force option but the prefixes just don't come through.

[lydell]

Does it work with sourcemaps turned off? Does it work with no in-sourcemap? I'll have a look at it later.

[lydell]

I think I've solved it now. npm uninstall the plugin, then install again and try it out.

[lunelson]

Seems to be working! This is brilliant @lydell. I'll report any further findings at the repo for your fork!

[lunelson]

@lydell I wanted to add an issue to your fork suggesting you update the readme with install instructions, but I guess issues are not enabled.

As I understand it they have to put the github link directly in to package.json since it's not on npm (someone correct me if I'm wrong). There are multiple syntaxes for this but my package.json contains the following, which did the trick:

  "devDependencies": {
    "grunt": "~0.4.1",
    "matchdep": "*",
    "grunt-contrib-sass": "*",
    "grunt-autoprefixer": "git+https://github.com/lydell/grunt-autoprefixer.git#source-maps"
  }

EDIT: did a gist for it https://gist.github.com/lunelson/7804039

[lydell]

I've added instructions and enabled issues now.

[ai]

I am back from my vacantion and will start to work on Autoprefixer 1.0 very soon :).

[ai]

@nDmitry you should start to thinking about source map API in your plugin ;).

Autoprefixer’s 1.0 branch already has source map suuport.

We need to options:

1. User want to generate map for Autoprefixer changes. Like map: true in autoprefixer.process().
2. User want to update existing source map. Like map: sourceMap.

Maybe just map: true option and if there is .map file with same filename, we update them, else generate new source map.

But what if user want to configurate paths? To set origin map path or set Autoprefixer’s map path? Or we should forget about this minor cases and make release before catholic Christmas?

[ai]

BTW, API has changes:

var prefixed = autoprefixer.compile(css, { file: cssFile });

was changed to:

var result   = autoprefixer.process(css, { from: cssFile });
var prefixed = result.css;

[nDmitry]

Sourcemaps support will be available within a few days here.

[nDmitry]

grunt-autoprefixer 0.6.0 will be released when ai/postcss#13 is fixed. ping #16

[mpxc8102]

@nDmitry @ai Just want to say thank you for this update!