Incompatible with external CSS sourcemaps

I’m trying to add this to a project that uses ember-cli-sass (in case #18 is relevant) and Ember-CLI’s built-in sourcemaps support.

My configuration before adding this:

sassOptions: {
  includePaths: [ 'app/styles', 'vendor/styles' ],
  imagePath: 'public/images',
  outputStyle: 'expanded'
},
sourcemaps: {
  enabled: true,
  extensions: [ 'js', 'css' ]
}

This caused sourceMappingURLs to appear in my compiled CSS files. These were external links.

When I added

autoprefixer: {
  browsers: [
    ...
  ]
}

I started getting unknown word errors.

I found #18 and https://github.com/kimroen/ember-cli-autoprefixer/issues/9 and tried changing my configuration to

autoprefixer: {
  browsers: [ ... ],
  sourcemap: true
},
sassOptions: {
  ...,
  sourceComments: false
},
sourcemaps: {
  enabled: true,
  extensions: [ 'js' ]
}

This works, but causes the CSS sourcemaps to be emitted as inline data URIs, which dramatically increase the weight of the CSS files. (So much so that it’s not worth it to minify at all!)

Is there a way to get this to work with external CSS sourcemaps?

[jamesarosen]

It looks like fast-sourcemap-concat is generating JS-style sourcemaps comments:

div{color:blue;}//# sourceMappingURL=vendor.css.map

This causes autoprefixer to blow up on the invalid CSS. Doesn’t seem to be (directly) a problem with this library.

[jamesarosen]

Stack trace for the unknown word

$ ember build --environment=production
...
//# sourceMappingURL=vendor.css.map
^
CssSyntaxError: /Users/jamesarosen/Code/Tango/assets/vendor.css:20:3793: Unknown word
    at Input.error (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/input.js:61:22)
    at Parser.unknownWord (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:457:26)
    at Parser.word (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:174:14)
    at Parser.loop (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:60:26)
    at parse (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parse.js:26:12)
    at new LazyResult (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/lazy-result.js:61:24)
    at Processor.process (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/processor.js:34:16)
    at AutoprefixerFilter.processString (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/index.js:37:4)
    at Object.module.exports.processString (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/broccoli-persistent-filter/lib/strategies/default.js:7:16)
    at Processor.processString (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/broccoli-persistent-filter/lib/processor.js:20:25)

Linked trace:

• https://github.com/postcss/postcss/blob/master/lib/input.es6#L40-L41
• https://github.com/postcss/postcss/blob/master/lib/parser.es6#L432
• https://github.com/postcss/postcss/blob/master/lib/parser.es6#L153
• https://github.com/postcss/postcss/blob/master/lib/parser.es6#L34
• https://github.com/postcss/postcss/blob/master/lib/parse.es6#L15

Possibly related:

• https://github.com/jtangelder/sass-loader/issues/171
• https://github.com/postcss/autoprefixer/issues/606
• https://github.com/ember-cli/ember-cli/issues/5319
• https://github.com/ef4/broccoli-sourcemap-concat/issues/37