ember-cli-autoprefixer doesn't work for css files with source map

[shijistar]

I just created a new project with the latest version (v2.6.2) of Ember-cli. I turned on the source map for css files in ember-cli-build.js,

sourcemaps: {
    enabled: true,
    extensions: ['js' , 'css' ]
}

The source maps were generated, and the inline comment sourceMappingURL was also generated at the end of each css file.
Then I installed ember-cli-autoprefixer, and ran the project, I got an error.

File: assets/test-support.css (322)
The Broccoli Plugin: [AutoprefixerFilter] failed with:
CssSyntaxError: /home/***/Documents/***/assets/test-support.css:322:1: Unknown word
}
//# sourceMappingURL=test-support.css.map
^
    at Input.error (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/input.js:61:22)
    at Parser.unknownWord (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:457:26)
    at Parser.word (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:174:14)
    at Parser.loop (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:60:26)
    at parse (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parse.js:26:12)
    at new LazyResult (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/lazy-result.js:61:24)
    at Processor.process (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/processor.js:34:16)
    at AutoprefixerFilter.processString (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/index.js:37:4)
    at /home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/broccoli-persistent-filter/lib/strategies/default.js:10:19
    at lib$rsvp$$internal$$initializePromise (/home/***/Documents/***/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/broccoli-persistent-filter/node_modules/rsvp/dist/rsvp.js:1084:9)

Solution

The reason I think was probably because the inline comment was leading by // which was not actually a valid comment format in css files, so autoprefixer doesn't 'reorganize' it. If we can change the format to /**/, I believe it would be helpful.
After several hours deep into the source code of related packages, I finally find one way. Just add another option in sourcemaps,

sourcemaps: {
    enabled: true,
    extensions: ['js' , 'css' ],
    mapCommentType: "block"
}

The built-in css files including test-support.css and vendor.css are concated in ember-cli, supported by broccoli-concat package. Fortunately it provides an option mapCommentType to control the format of comment. The default value is 'inline', and currently it only supports two formats, 'inline' and 'block' (since it's provided in else block, actually you can use any value except 'inline').

The project style file which name is project-name.css does not follow that. It's generated by some external addon, determined by which one you install. Usually there are two options, ember-cli-sass (which is based on node-sass) and ember-cli-compass-compiler (which is based on compass). You can also see the introduction in ember-cli #scsssass. They both have independent options, and I have tried ember-cli-sass it just works very well with ember-cli-autoprefixer, not have to provide any special configuration. I have used ember-cli-compass-compiler in my another project, but never had ember-cli-autoprefixer working together. You can try it youself.

[benmurden]

I have found this also produces block-commented sourceMappingURL lines in JS files, which are ignored by Chrome (Firefox doesn't seem to mind).

If you only need default behavior, omitting the sourcemap option from your ember-cli-build.js produces correct results. When combined with the solution in #18, sourcemaps can be enabled for JS and CSS as long as you're using SASS.