Installing causes ember-cli-sass source maps to stop working

[digitalcora]

I'm not sure whether this is the right package to report this on, but it at least appears distinct from #9 since that issue refers to inline source maps, and the current release of ember-cli-sass generates source maps in separate .map files.

Basic reproduction steps:

$ ember new testapp
$ cd testapp
$ ember install ember-cli-sass
$ mv app/styles/app.css app/styles/app.scss
$ echo "a { &.red { color: red; } }" > app/styles/app.scss
$ ember serve

At this point testapp.css is correctly generated with a sourceMappingURL comment at the end.

$ ember install ember-cli-autoprefixer
$ ember serve

...and at this point, the comment is no longer present, although the map files themselves are still generated. Setting the broccoli-autoprefixer sourcemap option generates a new sourceMappingURL comment with a data URI – however, this "map" only contains the compiled CSS file after it's been run through broccoli-sass, making it useless.

Advice on how to get these packages working nicely together would be appreciated.

[kimroen]

I haven't quite gotten it to work either, but I do believe that a solution involves inline source maps, as we just process the actual css-file because of the way the streams are passed around in broccoli. I know that these packages both handle source maps separately, but if you find a way to make them work together, I'd love to hear about it.

I don't have the capacity to investigate at the moment unfortunately, but I'd obviously love it if it worked.

[elwayman02]

@Grantovich @kimroen has any progress been made on this issue? Would love to know if a solution was found or if this is still a problem.

[kimroen]

No, I haven't done anything with this yet, but here are some observations after looking through some of the code:

1. We pass the options straight through to broccoli-autoprefixer:

   ember-cli-autoprefixer/index.js

   Line 19 in c41fd50

   tree = autoprefixer(tree, this.options);

2. There, some special handling of the sourcemap option is done: https://github.com/sindresorhus/broccoli-autoprefixer/blob/69a2bdfc6a5ddb0e9df6f545c6b46e36f0ccc2ea/index.js#L32
   • Looks like it passes the option through to map, or sets it to inline by default if not present or explicity set to null.
3. Then, it's passed to autoprefixer, and then passed to postcss: https://github.com/sindresorhus/broccoli-autoprefixer/blob/69a2bdfc6a5ddb0e9df6f545c6b46e36f0ccc2ea/index.js#L35
4. Autoprefixer is simply a postcss-plugin, so it creates one using the options it needs, then sets the options that was passed in on itself, and the resulting plugin is used by postcss: https://github.com/postcss/autoprefixer/blob/c0b7e0164e7fd694a2a401adb70ce94b45050432/lib/autoprefixer.coffee#L38

Based on this, it looks like the current state is that the sourcemap options you can pass in is handled by postcss, and if nothing is passed in, broccoli-autoprefixer sets it to inline.

Here's the documentation for sourcemaps with postcss: https://github.com/postcss/postcss#source-map

Based on this documentation, postcss should figure out the sourcemaps based on the inline comments of the previous source map:

PostCSS will try to read the previous source map automatically (based on comments within the source CSS), but you can use this option to identify it manually.

In theory, this should be all the info we need to figure it out, but there is some additional history with ember-cli-sass and sourcemaps:

joliss/broccoli-sass#39

ember-cli-sass is using its own fork of broccoli-sass to get around this problem: https://github.com/aexmachina/broccoli-sass-source-maps

Comparing the two, it looks like broccoli-sass-source-maps supports some more options, some of them regarding source maps. Based on the comments in the issue, it could be that the files not being output to the correct place on disk is related to the problem:

Unfortunately the mapping in the source map only map back to the source files as node-sass sees them, which may not be the original source files (ie. if you've used broccoli-merge-trees or any other compilation steps)

There's some manual file handling going on in broccoli-sass-source-maps: https://github.com/aexmachina/broccoli-sass-source-maps/blob/8e384ed5fa8f30dac607cb14d9cbb30a38dbe824/index.js#L50-L54

Some options related to source maps are to be found in node-sass: https://github.com/sass/node-sass#sourcemap

So, after looking at all this, the current status is that there might be a combination of options that works right now, or it could be that the file stuff I mentioned above makes it so that the projects are incompatible at the moment, source-map wise.

Like I said, I'd love if this worked, but I haven't had the bandwidth to look in to it further than this yet. Any help is appreciated!

[oligriffiths]

For those still wondering how to get this working, here's the fix:

in ember-cli-build.js

    sassOptions: {
      sourceMapEmbed: true,
    },
    autoprefixer: {
      sourcemap: true,
    },

This will inline the sourcemaps so they work in dev.