Incompatible with external CSS sourcemaps

[jamesarosen]

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 #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?

[kimroen]

Hi!

As you've probably seen when looking through issues, I haven't really done any effort to try to make it work with external sourcemaps, just inline ones. The exact reason for this escapes me, but I believe it was something about the way Broccoli handles temporary files as things goes through the funnels. (The reference to the external sourcemap would be wrong, or something along those lines). Also, that part is mostly handled in broccoli-autoprefixer - this addon just passes things through to that.

As you've shown though, it's pretty clear that is should be possible to do considering ember-cli-sass handles things just fine. I'd love to make it work.

So:

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

Should be possible to implement, but I don't know of a way to do it as the addon is currently. Any help appreciated, but I'll look in to it myself as well.

which dramatically increase the weight of the CSS files. (So much so that it's not worth it to minify at all!)

That's interesting, I haven't considered using sourcemaps for the production build, but I guess there's no reason not to, really!

I started getting unknown word errors.

Huh, not sure what that is, but sounds like an error from Autoprefixer itself, possibly. Maybe one of the things you have provided to browsers is invalid?

---

Sorry for the lack of an actual solution to your issue at the moment, but I wanted to reply with what I have instead of giving you just silence. Any thoughts or suggestions?

Thanks.

[kimroen]

Ember-CLI's built-in sourcemaps support.

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

This is actually new to me I think. That along with ember-cli-sass is probably a good place to start.

[jamesarosen]

The unknown word errors occur during the build and point to the sourcemap comment in the file.

[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:

• // comments result in Unknown word webpack-contrib/sass-loader#171
• sourceMappingURL causes "unknown word" postcss/autoprefixer#606
• JS-style sourcemaps in CSS ember-cli/ember-cli#5319
• JS-style sourcemaps in CSS ef4/broccoli-sourcemap-concat#37

[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.