Sourcemap support #1108

Closed
chriseppstein opened this Issue Nov 29, 2012 · 135 comments

Projects

None yet
@chriseppstein
Member

Now that sourcemap support has landed in Sass master, we should probably start thinking about Compass support as well. It shouldn't be too hard; Sass::Engine now has a #render_with_sourcemap method which returns a sourcemap object along with the rendered source, and Sass::Plugin::Compiler accepts a :sourcemap option to handle sourcemap generation automatically.

/cc @nex3

@paulirish
Contributor

Just for reference:

Here is the Sass sourcemaps support PR: sass/sass#569 (now in master)

What this enables on the tool side: ctrl-click any property/value/selector and go to the location in the sass/scss where that originates: the expression, mixin, variable where it was birthed or computed. This makes the editing experience of working with sass and tweaking CSS much more enjoyable. The UI side of this is ready in the Chrome DevTools

Adding to compass means running through the compass compiler we can present this hugely improved development and debugging experience but with the full power of compass simultaneously.

@chriseppstein
Member

Changes need to compass:

New Configuration Options

  • http_sass_dir/http_sass_path - Sass files may now be served via the internet for end users/devs to inspect in their browsers in production.
  • sourcemap_dir/sourcemap_path/http_sourcemap_dir/http_sourcemap_path - Let the user select where source maps get generated. Should default to the css directory.
  • enable_sourcemaps - a boolean option that defaults to true in development, false in production.
  • add_import_path should allow an http location for each sass folder -- if provided, we should immediately create an importer object and configure it to resolve the http path for those
  • source_unpack_dir/source_unpack_path/source_unpack_dir/source_unpack_path - this is the place where compass source files and the source files for plugins will be unpacked so they can be easily found by the browser and served by webservers. It's also where generated sprite files will be written. This should default to a sources subdirectory of the css directory.

Automatic unpacking

When sourcemaps are enabled, the sass files contained within compass's gem folder (and plugins' files) need to be unpacked into the source_unpack_dir folder that can be served over the internet. The sass loadpath entry for each plugin must be configured to know their location. Each framework/plugin will get written into it's own sub-folder according to the name of the framework.

The output format of the unpacked sass files should be converted to the user's preferred syntax if it is not already using it.

Spriting changes

The magic sass file generated by the @import directive will need to be written to the <source_unpack_dir>/compass/generated-sprites/<sprite_folder>.sass/.scss

Compiler changes

When sourcemaps are enabled, we need to call a different sass engine API and write the source map file to the location provided by the compass configuration.

@mariusGundersen

What is the state of this?

@paulirish
Contributor

afaik, no developer has taken it on. it's available if someone wants to
work on it.

On Wed, Jan 16, 2013 at 5:41 AM, Marius Gundersen
notifications@github.comwrote:

What is the state of this?


Reply to this email directly or view it on GitHubhttps://github.com/chriseppstein/compass/issues/1108#issuecomment-12318775.

@scottdavis
Member

This is a huge undertaking and on my list its very far down =)

@Saturate

For people needing source maps right now, include sass_options = { :debug_info => true } in your config.rb file, and make sure output_style is not :compressed.

That will make it work very well with the SASS Option enabled in Chrome.

@mgol
mgol commented Feb 18, 2013

@Saturate Not in Chrome Canary, unfortunately. :( Which means in a few week there'll be no way to use even Chrome stable with SASS support with Compass.

@mgol
mgol commented Feb 18, 2013

A temporary workaround is:

sass --compass --sourcemap --watch style.scss:style.css

Is that any different than using

compass watch

with a correct config.rb? Can't Compass just use the already implemented SASS behavior?

@Snugug
Contributor
Snugug commented Mar 17, 2013

@Saturate The Debug Info isn't a Source Map, it's Sass Debug Info. Source Maps are very specifically a separate .map file that maps selectors/properties/etc… with their source and are a cross-language pseudo standard most commonly used with compiled JS.

@chriseppstein Interesting description of what's needed to get this off the ground. I have one concern though; if Compass is going to unpack plugins to a directory easy for the webdir to read, and the Source Map is going to point to that file, are you not concerned that users will then think that's the actual file that's being used, and therefore attempt to make changes to that file? For many plugins, that would be OK, but for many others that include Ruby, or are primarily powered by Ruby, this may provide a disconnect for users that's not easy to grok.

This all said, for an initial run, how hard would it be to simply enable Source Maps through sass_options as they would exist right now? If not just to see how it would look/work with the current limitations and quirks of the system?

@paulirish
Contributor

I just succcessfully used sass --compass --sourcemap --watch style.scss:style.css as mentioned by @mzgol ... worked great.

@Snugug
Contributor
Snugug commented Mar 19, 2013

I will give that a try again; when I tried it said it couldn't load Compass

On Mar 19, 2013, at 2:00 AM, Paul Irish notifications@github.com wrote:

I just succcessfully used sass --compass --sourcemap --watch style.scss:style.css as mentioned by @mzgol ... worked great.


Reply to this email directly or view it on GitHub.

@mgol
mgol commented Mar 19, 2013

@paulirish Actually, it seems that 'sass --compass' looks for the compass.rb file so the command I use is now even simpler; I just go to the /static dir where I keep my config.rb and invoke:
sass --compass --watch .
It works!

That's why I wonder: can't just Compass delegate to what's already implemented in Sass? Since it just works...

@chriseppstein
Member

@mzgol The sass directory compiler/watcher didn't exist when I first implemented Compass's compiler/watcher. It's possible that I could delegate to it now. I would need to investigate that. However, even if I did this, things would not /just work/ because of the advanced features that compass provides on top of Sass.

@Snugug
Contributor
Snugug commented Mar 19, 2013

@paulirish @mzgol What version of Sass/Compass are you using to get that to work? With Compass 0.13.alpha.2 and Sass 3.3.0.alpha.101 I'm getting ERROR: Cannot load compass running it from my folder that has config.rb in it.

@paulirish
Contributor

sasCompass 0.12.2 (Alnilam)
Sass 3.3.0.alpha.103 (Bleeding Edge)

On Tue, Mar 19, 2013 at 3:48 PM, Snugug notifications@github.com wrote:

@paulirish https://github.com/paulirish @mzgolhttps://github.com/mzgolWhat version of Sass/Compass are you using to get that to work? With
Compass 0.13.alpha.2 and Sass 3.3.0.alpha.101 I'm getting ERROR: Cannot
load compass running it from my folder that has config.rb in it.


Reply to this email directly or view it on GitHubhttps://github.com/chriseppstein/compass/issues/1108#issuecomment-15148517
.

@mgol
mgol commented Mar 19, 2013
$ sass --version
Sass 3.3.0.alpha.0.bcde875 (Bleeding Edge)

$ compass --version
Compass 0.13.alpha.2.b868089 (Markab)
(...)
@Snugug
Contributor
Snugug commented Mar 19, 2013

Boo, not working for me still. Dunno what's up, that's too bad, would have liked to use this,

@mgol
mgol commented Mar 19, 2013

Are you sure you have compass binary accessible from the command line? Did you install it as a gem or from some package? (the latter can cause problems)

BTW, this is getting off-topic here, you may mail me if you want help with resolving the problem to not spam the rest as it's clearly not related to the core issue.

@Saturate

@Snugug Ah yes, but it is enabled via the "Source Maps" option in Chrome or was.

I'll try the alphas and try out source-mapping on both Windows and OSX.

@benfrain

Apologies, I'm mindful of the fact that this is polluting the primary purpose of the thread but I'd also like to try this feature out. I get the same issue as Snugug running this:

sass --compass --sourcemap --watch style.scss:style.css

I get 'ERROR: Cannot load compass.'

Sass version: Sass 3.3.0.alpha.107 (Bleeding Edge)
Compass version: Compass 0.13.alpha.2 (Markab)

If I run this sass --sourcemap --watch styles.scss:styles.css I get a little more helpful info:

error styles.scss (Line 27: File to import not found or unreadable: compass.

I only ever use Sass with Compass so it's probably some path issue I'm not aware of.

Compass is accessible from the command line - if I compass interactive for example it works fine.

@superstructor

Just a note that to resolve the "ERROR: Cannot load compass." issue I downgraded compass from 0.13.alpha.2 to 0.12.2. That is all that was required to stop getting the error and have source maps work with sass --compass --sourcemap app.scss:app.css. I am using Sass 3.3.0.alpha.103.

@benfrain

superstructor - thanks, that got things a stage further. however, I then have problems with Susy File to import not found or unreadable: susy to it all just seems a little brittle at present until the various dependencies and plugins are down with this new world order.

@paulirish - is there any chance we'll see the sass_options = {:debug_info => true} style debug info being re-implemented in Chrome as a stop gap until this is more straightforward?

@s10wen
s10wen commented Apr 4, 2013

Thanks to Sam at: http://snugug.com/musings/debugging-sass-source-maps got this working.

👍

@s10wen
s10wen commented Apr 4, 2013

Just wondering, would it be possible to add the --sourcemap into the ST2 plugin? Tried it, but didn't have much luck - https://github.com/WhatWeDo/Sublime-Text-2-Compass-Build-System

@andfinally

Dunno if this is helpful, but I'm just trying this with

Sass 3.3.0.alpha.121 (Bleeding Edge)
Compass 0.13.alpha.4 (Markab)

and in my config.rb I have

sass_options = {:sourcemap => true}
enable_sourcemaps = true    

and I'm running

compass compile    

And compass recompiles my CSS, but doesn't generate the map files.

@foiseworth

Putting:

sass_options = {:debug_info => true}

in my config.rb file worked for me (although chrome isn't picking them up... :/)

These are example of the maps I get

@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/andrew\/Personal\/Sites\/nova-the-outsiders\/themes\/c5base\/sass\/modules\/_normalize\.scss}line{font-family:\0000311}}
@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/andrew\/Personal\/Sites\/nova-the-outsiders\/themes\/c5base\/sass\/modules\/_concrete5\.scss}line{font-family:\000031}}
@benfrain

Hi Andrew, no thats the old style debug info that Chrome now doesn't pick up (put perhaps FireSass still does, haven't checked). The new style creates a separate mapping file in the CSS folder - that's the kind we are having a problem generating with Compass.

@foiseworth

@benfrain - many thanks for letting me know - I'll keep trying.

@helixbass

I have most of this working in the sourcemap branch of my compass fork (against Sass master, but hopefully works with any version of Sass since sourcemap support). The most obvious thing not (yet) implemented from what @chriseppstein specified above is the conversion of unpacked stylesheets to the user's preferred syntax. Source files from e.g. compass get unpacked to subdirectories of source_unpack_dir/source_unpack_path dynamically when they're referenced by a sourcemap that's getting written. Let me know if I should go ahead and submit a pull request—I'm pretty fresh to Ruby and Compass internals so please point me towards any of the code that needs reworking. I added unit and feature test coverage where it made sense to me but I don't have much grasp on how the various ways of invoking Compass interface to most of the core functionality. E.g. don't really get what Sass::Plugin is about so that interface may not work? Pretty sweet though, totally working for me in nightly-ish Chrome as described above by @paulirish.

@chriseppstein
Member

@helixbass excellent, I will review soon.

@s10wen
s10wen commented Apr 25, 2013

Sweet! Looking forward to this. Got it working with LiveReload for a bit and it was great, but it kept crashing.

@chriseppstein
Member

Had the idea today that compass watch can just start a webserver and serve library files without copying them. I think allows us to cover the most common use cases with less mess.

@Snugug
Contributor
Snugug commented May 14, 2013

What about us not using Compass Watch and instead using a task system like Grunt to compile our stuff (done through compass compile) and run server/LiveReload/etc…? I know that's the way my team and I are moving.

@chriseppstein
Member

I suppose we could have a mode that just ran the sourcemap server.

@lozandier

@andfinally Having the same version of SASS and Compass as you and having the same configuration applied to my config.rb file, my sourcemaps generated. My config.rb file setup is straightforward.

http_path = "/"
css_dir = ""
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
sass_options = {:sourcemap => true,}
enable_sourcemaps = true 

My sourcemap file was style.css.map, reflecting the main stylesheet of the compass project, style.sass and style.css.

However, my sourcemaps generate, but when I inspect elements I get the correct line numbers but don't get the correct file referenced: just the sass folder as sass.

So, instead of http:/localhost/foo_site_name/main.sass:<line_number>, I'm getting http://localhost/foo_site_name/sass:<line_number>.

When I open the link referenced by the inspector, it's clear it's going to the right place to see all the sass files but it won't go to the actual .sass file/partial to utilize the line numbers it recognizes.

When I try to use merely SASS, version 3.3.0.121 and then 3.3.0.141, I get cannot load compass. Will try to downgrade Compass as @superstructor pointed out when I get the chance this evening.

@paulirish gave me a walkthrough merely using just SASS instead of with Compass earlier this month at the Adobe Max Conference of how this is supposed to work which was pretty straightforward with essentially the same versions of SASS and Compass. As a result, I'm inclined to think it's a gotcha with what's left for it it to work for me on Windows.

My main stylesheet is pretty much like a 'manifest' file importing all of the partials

@charset "UTF-8"
@import compass
@import "gridset.scss"
@import compass/reset
@import layout
@import base
@import modules 
@import themes

*Nonetheless, I've attached a photo where Chrome redirects to when I click the source map Chrome identifies that Compass generated.
image

@gabrielgodoy

Hello, I managed my compass/sass to work with the following settings:

Installed:
https://gemnasium.com/gems/compass-sourcemaps/versions/0.12.4.sourcemaps.a4836f1

Working with:

  • compass 0.12.4.sourcemaps (clavery-sourcemaps)
  • sass 3.3.0.alpha.134 (Bleeding Edge)

Hope this helps.

@ghost
ghost commented Jun 13, 2013

@ggodoyoliveira any particular config?

@paprikka

Unfortunately it doesn't work in my case (I happen to use same gems with exactly same versions). This is what I get:

ArgumentError on line ["500"] of c: different prefix: "c:/" and "f:/developer/connectivity-ui/src/main/public/css"
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.0.alpha.134/lib/sass/source/map.rb:125:in `block in to_json'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.0.alpha.134/lib/sass/source/map.rb:120:in `each'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.0.alpha.134/lib/sass/source/map.rb:120:in `to_json'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/compiler.rb:152:in `compile'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/compiler.rb:118:in `compile_if_required'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/compiler.rb:103:in `block (2 levels) in run'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/compiler.rb:101:in `each'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/compiler.rb:101:in `block in run'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/compiler.rb:126:in `timed'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/compiler.rb:100:in `run'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/commands/update_project.rb:45:in `perform'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/commands/base.rb:18:in `execute'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/commands/project_base.rb:19:in `execute'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/lib/compass/exec/sub_command_ui.rb:15:in `run!'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/bin/compass:30:in `block in <top (required)>'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/bin/compass:44:in `call'
  c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-sourcemaps-0.12.4.sourcemaps.a4836f1/bin/compass:44:in `<top (required)>'
  c:/Ruby200-x64/bin/compass:23:in `load'
  c:/Ruby200-x64/bin/compass:23:in `<main>'

Any idea where can I post a bug report for this gem?

@ggodoyoliveira are you working on Mac or Windows?

@gabrielgodoy

It doesn`t seem to work anymore. Now back again to error "ERROR: Cannot load compass."

For now I'll not be working with compass, only sass to generate sourcemaps (sass --sourcemap --watch sass/main.scss:css/main.css)

@gabrielgodoy

@paprikka FYK, I`m on MAC

@jonstuebe

Is there any update in the dev on this? Or a work around that would work with grunt?

@jeffscottward

@jonstuebe at this point in time there isn't :(.
Until source maps lands in compass stable, the best plan is to ditch compass and use mixins to prefix where necessary. gruntjs/grunt-contrib-compass#23.

@rafi
rafi commented Jun 25, 2013

Ditch compass ? That's sad. 😿

@justnorris
Contributor

Any update on Compass Sourcemaps ? I'd really like to keep using Compass!

@chriseppstein
Member

@justnorris I'm going to start cranking out stuff for compass 0.13 on monday. Don't lose ❤️

@mgol
mgol commented Jun 28, 2013

@chriseppstein Do you accept donations for your work? :)

@s10wen
s10wen commented Jun 28, 2013

Donate button at the bottom of the page http://compass-style.org/ ❤️

@s10wen
s10wen commented Jun 28, 2013

+1 @chriseppstein 😺

@gisu
gisu commented Jun 28, 2013

Happy Monday :)

@aaroncole

+1

@fcamblor
fcamblor commented Jul 3, 2013

It could eventually be interesting to track this issue regarding allowing to generate absolute paths in sourcemaps, useful for yeoman-generated gruntfiles

@stephenbe

+1

@axe312ger

+1

@viziens
viziens commented Jul 9, 2013

+1

@hazg
hazg commented Jul 9, 2013

+1

@sc0ttyd
sc0ttyd commented Jul 9, 2013

+1

@proimage
proimage commented Jul 9, 2013

+∞

I win.

@jeffscottward

  ▲
▲ ▲

No, I do.

But back to it we're all rooting for anyone who is able to contribute on this.
I dunno Ruby :( but can help test against different configs and installs.
With grunt-contrib-sass I have sourcemaps now, but looking to use grunt-contrib-compass.

@justnorris
Contributor

+1
What @jeffscottward said.
grunt-contrib-compass ftw :)

@chrisdhanaraj

I know it's not nearly as sexy, but I (for now) just reverted to the versions that the option --compass worked for @paulirish. I'll probably ramp up the version's until it breaks again when I get an hour or so.

@jcc8
jcc8 commented Aug 5, 2013

Bounty here if anyone else wants to chip in: https://www.catincan.com/bounty/sourcemap-support-issue-1108-chriseppstein-compass-github

Crowdfund issue & get merged into main branch to collect.

@drye
drye commented Aug 5, 2013

The combination from this comment is working fine for me: #1339 (comment)

@stephenbe

The combination from this comment is working fine for me: #1339 for me as well...Thanks drye

@yidea
yidea commented Aug 7, 2013

+1

@boztek
boztek commented Aug 8, 2013

I'm also having some success with #1339 fwiw.

@jrodl3r
jrodl3r commented Aug 14, 2013

hooray!! ++!

@mgol
mgol commented Oct 22, 2013

FYi, it works perfectly now with the newest Sass RC (3.3.0.rc.1) and Compass alpha (0.13.alpha.9).

@RaphaelDDL

@mzgol
Just updated to Sass 3.3.0.rc.1 (Maptastic Maple) + Compass 0.13.alpha.9 (Markab) to test what you said and having the options (below) on config.rb still don't generate sourcemaps when compass watch'ing.

enable_sourcemaps = true
sass_options = {:sourcemap => true }

Does the params changed name?

@mgol
mgol commented Oct 22, 2013

@RaphaelDDL I didn't say it's natively supported by Compass yet. You still need to invoke:
sass --compass --sourcemap --watch style.scss:style.css
What I meant is that for this to work you need to use Sass 3.3.0 alpha/rc together with a Compass version it plays nicely with which required very specific versions in the past. Currently, it works fine with the newest ones.

I personally use https://github.com/gruntjs/grunt-contrib-sass which has an option to re-use Compass configuration in config.rb. I'll stick to it until Compass gets source maps natively.

@RaphaelDDL

@mzgol Since you also said the compass version, I though was implemented on it too. My bad!

I'll get back to compass-sourcemaps(Compass 0.12.4.sourcemaps (clavery-sourcemaps)) gem then, it was working okay for sourcemaps(, just sprite gen that was buggy.)

Thanks for the suggestion, I'll use for my projects. I wanted to use grunt at work too but people here are too stubborn to use new technologies, was a pain to make them use ruby/sass already.

@szarouski

If you're on windows and tried everything you could but sourcemaps don't work with compass for you, then here is what helped me:

I reinstalled ruby on the same drive (!) where I have my scss files; (before ruby was installed on C:, sites on D:, now both on D:)

gem install sass;
gem install compass;
gem install compass-sourcemaps --pre;

in config.rb add:
output_style = (environment == :production) ? :compressed : :expanded
if environment != :production
enable_sourcemaps = true
sass_options = {:sourcemap => true}
end

running from command line 'compass watch' now working and creating map files.
for production I don't need map and want it minified 'compass compile -e production'
Yey :)

@RaphaelDDL

@Serge-Z Yeah, that's what I do also.
Did you successfully managed to create sourcemaps when you are using sprite generation? When I use it, compass give error talking about #public_url and the sourcemap is not generated.

@szarouski

Nope, did you try to run compass command line to generate sprite? It doesn't work for me either:

compass sprite "images/my-icons/*.png"
@szarouski

Ah sorry, yes sourcemaps are created when I'm using sprite generation, sprite is generated just fine, however I'm getting following warning:

WARNING: Couldn't determine public URL for "buttons/*.png" while generating sourcemap.
  Without a public URL, there's nothing for the source map to link to.
  Custom importers should define the #public_url method.
@RaphaelDDL

That's the warning I get too (I use the spriting inside scss instead of command line).

But when that happens, sourcemap fails to generate. Test by deleting .map before saving .scss again. You will see the warning and then, no map generated.

Best Regards,
Raphael Oliveira
Sent from my iPhone

On 23/10/2013, at 13:01, Sergey notifications@github.com wrote:

Ah sorry, yes sourcemaps are created when I'm using sprite generation, sprite is generated just fine, however I'm getting following warning:

WARNING: Couldn't determine public URL for "buttons/*.png" while generating sourcemap.
Without a public URL, there's nothing for the source map to link to.
Custom importers should define the #public_url method.

Reply to this email directly or view it on GitHub.

@szarouski

.map re-created:

>>> Compass is polling for changes. Press Ctrl-C to Stop.
>>> Change detected at 12:51:34 to: _widgets.scss
   create ../images/buttons-s1e35541b6a.png
overwrite ../css/main.css
WARNING: Couldn't determine public URL for "buttons/*.png" while generating sourcemap.
  Without a public URL, there's nothing for the source map to link to.
  Custom importers should define the #public_url method.

   create ../css/main.css.map
@RaphaelDDL

Weird, mine give that error and don't create the map.
And actually give one extra, that I had forgotten to mention (been a while since I last tried use sprite with maps, I just re-tested now), using this on scss:

@import "compass/utilities/sprites";
@import "tst/*.png";
@include all-tst-sprites;

This shows on cl:

>>> Compass is polling for changes. Press Ctrl-C to Stop.
>>> Change detected at 15:23:51 to: custom.scss
   create img/tst-sabe9dd721a.png
overwrite css/custom.css
WARNING: Couldn't determine public URL for "tst/*.png" while generating sourcema
p.
  Without a public URL, there's nothing for the source map to link to.
  Custom importers should define the #public_url method.

ArgumentError on line ["500"] of C: different prefix: "C:/" and "D:/raphael.oliv
eira/DDLWorkspace/LMS_Mobile/css"
Run with --trace to see the full backtrace

Tracing it shows some errors on sass, then compass then fssm and then back to compass. I tested with project on C: also (because I though would be something related to my partitions) but fails the same way. Don't know which file the line 500 is from but isn't from config nor scss.

@szarouski

I was getting same error when ruby was installed on disk 'C:'. Just out of curiosity can you install it on 'D:' and see if that will work? Here is my setup info, just in case:

ruby -v
ruby 2.0.0p247 (2013-06-27) [i386-mingw32]

gem -v
2.0.3

gem list
*** LOCAL GEMS ***

bigdecimal (1.2.0)
breakpoint (2.0.7)
chunky_png (1.2.8)
color-schemer (0.2.7)
compass (0.12.2)
compass-blend-modes (0.0.2)
compass-sourcemaps (0.12.4.sourcemaps.a4836f1)
ffi (1.9.0 x86-mingw32)
fssm (0.2.10)
io-console (0.4.2)
json (1.7.7)
listen (1.1.6, 0.7.3)
minitest (4.3.2)
psych (2.0.0)
rake (0.9.6)
rb-fsevent (0.9.3)
rb-inotify (0.9.2)
rb-kqueue (0.2.0)
rdoc (4.0.0)
sass (3.3.0.alpha.256, 3.3.0.alpha.134)
sassy-strings (1.0.0)
singularitygs (1.1.2)
test-unit (2.0.0.0)
toolkit (1.3.8)
@RaphaelDDL

I was getting same error when ruby was installed on disk 'C:'. Just out of curiosity can you install it on 'D:' and see if that will work?

I tried doing something dumb by changing path on computer properties > advanced settings > system variables and moving ruby from C to D lol. ~105k files, ~810mb. Didn't worked and that messed everything.. ahahah... I just finished re-configuring all (re-installing on top of the one I copied), changing some stuff on regedit to change all pointers from c to d, etc.

Well, testing with Ruby installed on D: actually gave the public_url warning but stopped with the different prefix error! And updated the .map! Woot! What's weird is that I did tested by moving my entre project to C: and tried run from there but had same problem. Seems is something related to rubyinstaller maybe?

Here my ruby specs for anyone who want to try:

ruby -v
ruby 2.0.0p247 (2013-06-27) [i386-mingw32]

gem -v
2.1.9

gem list
*** LOCAL GEMS ***

actionmailer (4.0.0, 3.2.14, 3.2.13)
actionpack (4.0.0, 3.2.14, 3.2.13)
activemodel (4.0.0, 3.2.14, 3.2.13)
activerecord (4.0.0, 3.2.14, 3.2.13)
activerecord-deprecated_finders (1.0.3)
activeresource (4.0.0, 3.2.14, 3.2.13)
activesupport (4.0.0, 3.2.14, 3.2.13)
addressable (2.3.5, 2.3.4)
arel (4.0.0, 3.0.2)
atomic (1.1.13, 1.1.12)
bigdecimal (1.2.1, 1.2.0)
builder (3.2.2, 3.1.4, 3.0.4)
bundler (1.3.5)
chunky_png (1.2.8)
compass (0.13.alpha.10, 0.13.alpha.9, 0.13.alpha.4, 0.12.2)
compass-sourcemaps (0.12.4.sourcemaps.a4836f1)
css_parser (1.3.5, 1.3.4)
css_splitter (0.1.1, 0.0.2)
erubis (2.7.0)
ffi (1.9.0)
fssm (0.2.10)
hike (1.2.3, 1.2.2)
i18n (0.6.5, 0.6.4, 0.6.1)
io-console (0.4.2)
journey (1.0.4)
json (1.8.1, 1.8.0, 1.7.7)
listen (1.3.0, 1.1.6, 0.7.3)
mail (2.5.4)
mime-types (1.24, 1.23)
minitest (5.0.6, 5.0.4, 5.0.3, 5.0.0, 4.7.4, 4.3.2)
multi_json (1.7.9, 1.7.8, 1.7.6, 1.7.3)
polyglot (0.3.3)
psych (2.0.0)
rack (1.5.2, 1.4.5)
rack-cache (1.2)
rack-ssl (1.3.3)
rack-test (0.6.2)
rails (4.0.0, 3.2.13)
rails-observers (0.1.2)
railties (4.0.0, 3.2.14, 3.2.13)
rake (10.1.0, 10.0.4, 0.9.6)
rb-fsevent (0.9.3)
rb-inotify (0.9.1)
rb-kqueue (0.2.0)
rdoc (4.0.1, 4.0.0, 3.12.2)
rubygems-update (2.1.9, 2.0.7, 2.0.6, 2.0.3)
sass (3.3.0.rc.1, 3.3.0.alpha.255, 3.3.0.alpha.243, 3.3.0.alpha.231, 3.3.0.alpha.229, 3.3.0.alpha.227, 3.3.0.alpha.134, 3.2.10, 3.2.9, 3.2.8, 3.2.7)
sprockets (2.10.0, 2.2.2)
sprockets-rails (2.0.0)
test-unit (2.5.5, 2.5.4, 2.0.0.0)
thor (0.18.1)
thread_safe (0.1.2)
tilt (1.4.1)
treetop (1.4.15, 1.4.14, 1.4.12)
tzinfo (1.0.1, 1.0.0, 0.3.37)
tzinfo-data (1.2013.4)
wdm (0.1.0)

(Don't ask me why so many, I can't remember installing all that)

Anyways, thank you very much, that tip of changing ruby place actually worked =D

@tomasdev

👍

@JoernBerkefeld
Contributor

@mzgol - thanks a lot! I had a few problems with the wdm gem being required for some reason but after installing the current dev-kit and using your sass --compass --sourcemaps ... command it worked like a charm without the now old compass-sourcemaps gem

@gorkamolero

Probably stupid to say but did you know this works perfectly well in Opera 18? Is this because they share engine or are the Dragonfly guys catching up?

@benjy
benjy commented Dec 1, 2013

I've had this working in Chrome with the following:

Compass 1.0.0.alpha.12
Sass 3.3.0.rc.2 (Maptastic Maple)
sass --compass --sourcemap --watch sass/styles.scss:css/styles.css

However, as soon as you change a value in the inspector the file name changes. Eg, If it says _760.scss and then you make a change in the inspector it changes back to styles.css

@ericjvandervelden

When I ctrl+click on -webkit-transition-property, Dev Tools should have gone to

$HOME/.rvm/gems/compass-core-1.0.0.alpha.13/stylesheets/compass/css3/_transition.scss

But it doesn't. _transition.scss does an import, _support.scss, and that is where Dev Tools goes to. It shows an empty file.

@szarouski

@ericjvandervelden when you go directly to .scss file does your server shows the file? If not, you might need to set headers for .scss files (I used text/scss).

@sds sds referenced this issue in brigade/scss-lint Dec 3, 2013
Closed

Do you need to use `sass-3.3.0.rc.1`? #50

@ericjvandervelden

@Serge-Z , I "solved" the problem myself. I work with 2 versions of compass. Before you use compass-1.0.0.alpha.13, you must clear your css directory with results of compass-0.12.2. So all the sourcemaps will be created again.

Also you must make a link in your document root to the .rvm directory

@chriseppstein
Member

I've released a basic implementation of sourcemaps support for the 1.0 release (as of 1.0.0.alpha.16). You can try it out now with gem install compass --pre. The basic support doesn't handle some edge cases around extensions, but it works fine for single-user development. I'm going to close this issue and we'll tackle the other aspects with follow-on issues in future releases.

@pauloalem

I cant make it work with sprites, even with 1.0.0.alpha.17. It works fine for files without sprites, though.
I'm getting the following error:

WARNING: Couldn't determine public URL for "folder/*.png" while generating sourcemap.
  Without a public URL, there's nothing for the source map to link to.
  Custom importers should define the #public_url method.

Did any of you guys manage to make it work? With which version?
Thanks

@RaphaelDDL

@pauloalem Actually even with this warning, it should've generated the sourcemaps and sprites, just the sprite class that will not point to the .scss file. How are you importing the sprites?

@scottdavis
Member

I need to get this fixed but i don't know enough about source maps. Any one feel like giving me a tour of whats not working and how it should work?

@proimage
proimage commented Jan 7, 2014

FWIW, the PrePros app has great support for source maps, in case anyone needs to figure out what should be happening but ain't. ;)

@chriseppstein
Member

I need to make a change to Sass in order to let compass silence this warning.

@pauloalem

@RaphaelDDL You are right, the sourcemap IS being generated. I had to cleanup some dirs because of some weird caching issues, but now it seems to be working fine.

@chriseppstein
Member

Requisite pull request for sass: sass/sass#1084

@chriseppstein chriseppstein reopened this Jan 13, 2014
@chriseppstein
Member

@scottdavis Our sprite importer needs to return nil for the public_url method.

@andrew-luhring

TLDR:
So... how can I use compass if I want to generate sourcemaps?

Really quick, I had sass v3.3.0.rc.1 installed earlier and was getting this error

/Library/Ruby/Site/1.8/rubygems/core_ext/kernel_require.rb:55:in `gem_original_require': no such file to load -- sass/script/node (LoadError)

whenever I tried to run compass.

The fix ended up being uninstalling sass and compass and installing sass v.3.2.13 before installing compass.

Now my problem is:
sass 3.2.13 doesn't support the --sourcemap flag.

What do?

@mgol
mgol commented Jan 14, 2014

@andrew-luhring Sass 3.3.0.rc.1 is old, always try the newest one. Sass 3.2.x doesn't support source maps exactly as it told you, no point in trying.

You can't mix Compass 0.12 with Sass 3.3.0, use an alpha version. My configuration is as follows:

source 'https://rubygems.org'
gem 'sass', '3.3.0.rc.2'
gem 'compass', '1.0.0.alpha.17'
gem 'oily_png', '1.1.0'

and works perfectly fine.

@funkyfuture

when i invoke compass compile --sourcemap it immediately breaks with
NoMethodError on line ["87"] of /var/lib/gems/1.9.1/gems/compass-1.0.0.alpha.17/lib/compass/actions.rb: undefined methodindex' for nil:NilClass`

shall i open a new issue on that or elaborate here?

@jackw
jackw commented Feb 9, 2014

I'm suffering the same issue as funkyfuture. Brand new compass project setup and working fine until I enable sourcemaps in config.rb sourcemap = true.
A trace reveals the following:

 NoMethodError on line ["87"] of /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/actions.rb: undefined method `index' for nil:NilClass
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/actions.rb:83:in `basename'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/compiler.rb:212:in `handle_exception'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/compiler.rb:132:in `rescue in block (2 levels) in run'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/compiler.rb:128:in `block (2 levels) in run'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/compiler.rb:127:in `each'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/compiler.rb:127:in `block in run'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/compiler.rb:153:in `timed'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/compiler.rb:126:in `run'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/commands/update_project.rb:49:in `perform'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/commands/base.rb:18:in `execute'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/commands/project_base.rb:19:in `execute'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/lib/compass/exec/sub_command_ui.rb:15:in `run!'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/bin/compass:30:in `block in <top (required)>'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/bin/compass:44:in `call'
  /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.18/bin/compass:44:in `<top (required)>'
  /usr/bin/compass:23:in `load'
  /usr/bin/compass:23:in `<main>'

Tried with 1.0.0.alpha.16 and 1.0.0.alpha.18

@andrew-luhring

I'm using grunt-compass, so that might be a thing.
Also haven't been invoking compass directly; I just use the -compass flag of scss when I run it from the command line.

@dustyfox

Exact same issue as funkyfuture and jackw. I'm using grunt-contrib-compass 0.7.2, Compass 1.0.0.alpha.17 and Sass 3.3.0.rc.3

@mattma
mattma commented Feb 11, 2014

Exact same setup like dustyfox. I have added this issue [https://github.com/gruntjs/grunt-contrib-compass/issues/23] to the project grunt-contrib-compass 0.7.2 as well

@jackw
jackw commented Feb 11, 2014

Slightly different setup to dustyfox and mattma.
I'm using Codekit with Compass 1.0.0.alpha.18 and Sass 3.3.0.rc.3.

@ghost
ghost commented Feb 13, 2014

Updated ruby and getting the same issue.

@Sebastian-Fitzner

have the same problem, does not work with newest ruby, compass and sass ...

@timhettler

This is also an issue for me. Executing the sass command with --sourcemap and --compass flags works as expected, but adding the sourcemap option to my config.rb and then running compass compile raises the same error as others are reporting.

compass 1.0.0.alpha.18
compass-core 1.0.0.alpha.17
sass 3.3.0.rc.5

@Sebastian-Fitzner

the only working solution i found is the following config:
compass 1.0.0.alpha.16
compass-core 1.0.0.alpha.16
sass 3.3.0.rc.2

@tinganho
tinganho commented Mar 4, 2014

@chriseppstein I just wonder what is the status of sourcemap support in compass?

@grayghostvisuals

Wondering why this issue is still opened? It seems this issue was reopened for sass/sass#1084, but it also appears that it was merged in and the nex3 issue 1084 was closed :\

@leevigraham

bundle exec compass compile --sourcemap works with the following Gemfile:

source "https://rubygems.org"

gem "sass",     "~> 3.3"
gem "compass",  "~> 1.0.0.alpha.19"
@JacobDorman

My previous working combination: ( grunt-contrib-sass 0.7.3 w/ compass: 'true' )

    - 'sass -v 3.3.0.alpha.149'
    - 'compass -v 0.12.2'

Confirmed - stable sass & compass --pre are now working:

Sass 3.3.4
Compass 1.0.0.alpha.19
@grayghostvisuals

@JacobDorman
@chriseppstein
@paulirish

Ruby 2.1.1
Compass 1.0.0.alpha.19
Sass 3.3.4

$ sass --compass --sourcemap --watch css/src/styles.scss:css/styles.css

It works, but when making changes (to a background-color for example) from the DevTools Styles Pane, these changes won't map back to the source file. Editing the original Sass file from the DevTools Sources Panel and mapping that file to the network resource will however reflect saved changes an author makes.

You can test this for yourself here https://github.com/grayghostvisuals/sourcemaps

@chriseppstein
Member

@grayghostvisuals Good point. Closing now!

@Avcajaraville

Any update regarding to this ? Im still stuck with the famous warning:

"WARNING: Compass::SpriteImporter should define the #public_url method."

when running

sass --compass --sourcemap --watch ./scss/pages/index.scss:./css/pages/index.css

Anyway, sprites & maps are getting generated, but hate to get a warning on my workflow...

@scottdavis
Member

@Avcajaraville the fix should be in master soon as in minutes

@alademann alademann referenced this issue in gruntjs/grunt-contrib-compass Jun 12, 2014
Closed

Add support for new Compass `--sourcemap` flag #171

@leopic
leopic commented Jul 30, 2014

Don't mean to beat a dead horse, but I just got this error when upgrading from alpha 19 to alpha 21:

ArgumentError on line ["55"] of /Library/Ruby/Gems/2.0.0/gems/compass-1.0.0.alpha.21/lib/compass/sprite_importer.rb: wrong number of arguments (2 for 0)
Run with --trace to see the full backtrace

So I just turned off maps for now. There used to be a warning about having to implement "public_url" back in 19, that's gone now tho...

@chriseppstein
Member

@leopic I'm about to release 1.0.0.rc.0 please file a new issue about this if the issue still exists in that release. please include steps to reproduce.

@jackoverflow

thanks to @chriseppstein for releasing compass 1.0, it also comes with sass 3.3.14. I just added "source_map: true" in my config.rb and ran "sass --compass --sourcemap --watch sass/style.scss :css/style.css" and voila!

I'm using chrome canary for my dev. ;) I hope it works for you guys as well.

@stereokai

Congrats on the release, it's been a long and fruitful road.

@funkyfuture

all Ubuntu-users should be aware that they must install ruby-dev in order to update Compass.

btw, is there a documentation of the confi.rb-options?
i'm curious, because i expected the :development to imply sourcemaps, but i need to set the sourcemap-option for sass.

@stereokai

Sourcemaps instructions for Yeoman users

It is very easy to get sourcemaps working. Official Yeoman generators usually rely on Compass with Autoprefixer to handle CSS. The steps to enable sourcemaps with these are:

  1. Uninstall both current compass and sass with Ruby gem: gem uninstall compass, gem uninstall sass
  2. Install latest Compass: gem install compass.
  3. In your Gruntfile or Gulpfile, add sourcemap: true to the Compass options block.
  4. In the Autoprefixer options block, add map: true.
  5. Rewrite /app/styles to local path ./app/styles.

If you read no. 5's "rewrite" and had visions of hours and hours of messing around with Gruntfile and npm and scouring SO for answers - fear not: I've got you covered. Just copy this snippet to your Gruntfile (replace your current connect settings). It should be easy to adjust for Gulp users.

Et viola! Sourcemaps are operational.

@okaiji
okaiji commented Aug 17, 2014

I was meddling with this for so long. @stereokai thanks!!

@funkyfuture

@stereokai if that intended me as audience, i'm sorry it doesn't help. i don't use grunt, and have hardly an idea what it is anyway.

i just seek for some documentation for pure usage of compass in a shell. or is that so outdated?

@Snugug
Contributor
Snugug commented Aug 18, 2014
@stereokai

@funkyfuture Sorry, I wasn't posting directly to you - it had just came to my attention that I posted this in the wrong issue on the wrong repo. This was supposed to be posted to the Yeoman generator-angular repo. Regardless, I have edited my post to fit this issue.

I don't want to divert further from the topic, but to answer your question - If you're asking me, yes. Using Compass alone in a shell is outdated. However, I guess it depends on what you're doing. If you're just experimenting, I would say it's fine. From the point and beyond, task runners like Grunt or Gulp, and scaffolding suites like Yeoman, Brunch, etc., will make your life a lot easier and a lot more productive by automating your workflow as much as possible - you can look at them like a high-level way to manage and organize your projects, and automate and interact with tools like Compass et al.

@okaiji Glad I could help!

@leopic
leopic commented Aug 18, 2014

@chriseppstein source maps are working fine in my project now, this is g2g on my end.

@neekey
neekey commented Aug 26, 2014

request for http_sass_path support or anyway that can alternate sass file path in the source map file.

I'm writing a compass middleware for express, which compile sass files only when user request the corresponding css file. For example, when the browser request http://localhost/src/index.css, the middleware will compile /users/me/works/project/src/index.scss( actually compile the whole project ) and the css files will be generated in a temporary directory, and be served to the browser.

It works well except for the sass file path in the source map file, it will be something like ../../../../../../../users/me/works/project/src/index.scss depends on where your temp dir is.

So I hope there can be a way that I can specify the path of sass file within the source map and generate source map like "sources": ["index.scss"], and the browser will just request http://localhost/src/index.scss.

@timelf123

@neekey to hack around that at work we just find/replaced all the extra ../

hacky, but worked well enough for us

@chriseppstein
Member

@neekey Please open a new issue about this

@neekey
neekey commented Aug 27, 2014

@timelf123 thank you for sharing your solution~ @chriseppstein new issue #1794

@tanarurkerem tanarurkerem added a commit to tanarurkerem/compass that referenced this issue Dec 29, 2014
@tanarurkerem tanarurkerem Add Sass for correct working cc435d7
@chiva05
chiva05 commented Jan 1, 2015

hi, happy new year for everyone!
i have some error run my compass watch in my first project! 👍

C:\Users\loruko\Desktop\pruebafoundation\grid-test>compass watch
C:/RailsInstaller/Ruby2.1.0/lib/ruby/2.1.0/rubygems/dependency.rb:298:in to_spe cs': Could not find 'compass' (>= 0) among 49 total gem(s) (Gem::LoadError) from C:/RailsInstaller/Ruby2.1.0/lib/ruby/2.1.0/rubygems/dependency.rb:3 09:into_spec' from C:/RailsInstaller/Ruby2.1.0/lib/ruby/2.1.0/rubygems/core_ext/kernel
_gem.rb:53:in gem' from C:/Ruby21/bin/compass:22:in

'

somebody can help me pls?
thanks!

@szarouski

@chiva05 run gem install compass in cmd.

@chiva05
chiva05 commented Jan 2, 2015

thanks! i found the problem.. I uninstall the RailsInstaller and them run again the compas watch... that work !!! 👯 hehe but thanks bro

@Scheka007 Scheka007 referenced this issue in GeoDienstenCentrum/sass-maven-plugin Aug 27, 2015
Closed

Provide sourceMappingURL configuration #72

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment