Support source maps

[bhollis]

We should have the ability to produce sourcemaps for combined files as well as CoffeeScript, SASS/SCSS, etc.

• [ ] Wait for Sprockets to finish basic SourceMap support: https://github.com/sstephenson/sprockets/tree/source-maps
• [ ] Integrate with CoffeeScript's built in support for generating source maps (see https://github.com/markbates/coffee-rails-source-maps). This seems pretty hard when combined with Sprockets - maybe we should just wait for Sprockets to figure it out. See https://github.com/sstephenson/sprockets/pull/311
• [ ] Integrate with the experimental Compass sourcemaps stuff... again might be best to wait for Sprockets to handle that.
• [ ] Update our code to include .map files in the sitemap when sitemaps are available so they get built (Sprockets will be serving them via a URL query parameter.
• [ ] Make sure our JS minification supports creating source maps. Uglifier already has an option for this: https://github.com/lautis/uglifier#usage but the harder challenge comes when we have multi-stage sourcemaps (compile coffee -> js, then combine using uglifier - how do you make sure the minified stuff maps to the original code?)

[sandstrom]

:heart_eyes:

[duncanbeevers]

https://github.com/thlorenz/combine-source-map can be used to curry sourcemaps through multiple build phases.

[kevinSuttle]

Any update on this?

[bhollis]

When there is an update, it will be posted here.

[renatocarvalho]

It seems SourceMap support was just merged.

[jmuheim]

It seems SourceMap support was just merged.

Where?

[renatocarvalho]

@jmuheim Here: https://github.com/sstephenson/sprockets/pull/311#event-153729410

But it seems it's not on master yet.

[jmuheim]

Thanks! :+1:

[alem0lars]

Are there any news about source maps support in middleman?

[tdreyno]

Seems like this should work:

configure :build do
  set :sass, :sourcemap => :inline
end

[TD540]

Doesn't seem to work. All I get are inline references to sass files and not the actual source map code.

[Arcovion]

This issue is tracking inline sourcemaps: https://github.com/sass/sass/issues/1484 The current inline option adds CSS to the sourcemap, this issue adds the sourcemap to the CSS so there's no need for a map file at all.

[TD540]

Something's not going right here.

How do I get inline source maps to work with Chrome?

I added my middleman folder to the Chrome workspace, but the CSS inspector still shows the compiled styles.css file as source.

And I activated inline source maps in config.rb like this:

configure :development do
  set :sass, :sourcemap => :inline
end

Also, these are the types of comments found in styles.css:

/* line 17, /Users/dcrck/Desktop/project/source/stylesheets/components/_articles.scss */

[Arcovion]

@dcrck My understanding is that the current inline option adds CSS information to the sourcemap, but Middleman doesn't support/output any sourcemaps yet. The issue I linked above intends to add the sourcemap information to the CSS which would work fine, Middleman wouldn't need to output any sourcemap files, but that feature hasn't been added to Sass yet.

So I don't think there's a way to make sourcemaps work properly atm =[

[sgoblin]

Is there any progress on js minification source maps?

[cassidyclawson]

Just another avid user checking in on this feature. CSS source maps are pretty critical for many of us these days. Thanks much!

[tdreyno]

Looks like neither Sass nor Sprockets upstream support the feature in their stable releases yet :(

[cassidyclawson]

Thanks for the update @tdreyno

I've seen evidence that people have found a workaround by using another file watching system like grunt.

https://github.com/middleman/middleman/issues/1451

Perhaps someone who has pulled this off (@andreimoment?) can share the technique / code snippets? Thanks much!

[andreimoment]

I couldn't make that work with the ruby tools. At the time libsass was not ready so I gave up and went without the maps feature.

Andrei

On Jul 7, 2015, at 1:25 PM, Cassidy Clawson [email protected] wrote:

Thanks for the update @tdreyno

I've seen evidence that people have found a workaround by using another file watching system like grunt.

middleman/middleman#1451

Perhaps someone who has pulled this off (@andreimoment?) can share the technique / code snippets? Thanks much!

— Reply to this email directly or view it on GitHub.

[tdreyno]

@cassidyclawson v4 betas makes it pretty easy to offload parts of the stack to other processes (like gulp). Check out the external_pipeline feature. I've been using Webpack for this.

[hellokatili]

This issue is STILL open!?!? o_O Next week it has its THIRD birthday!!

[tdreyno]

Sprockets 4 still hasn't shipped :(

[ckizer]

Any update on this?

[stevenosloan]

Happy to take any PRs, but Sprockets 4 is still in beta

[dsteppeler]

Can anyone tell me which the best way for debugging Sass-code within the browser is? So far I used the old way with inline comments, firebug and fireCompass. Now firebug is dead and source maps do not seem to be working in many development environments.