Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sourcemap support #1108

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

Comments

Projects
None yet
@chriseppstein
Copy link
Member

chriseppstein commented Nov 29, 2012

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

This comment has been minimized.

Copy link
Contributor

paulirish commented Nov 29, 2012

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

This comment has been minimized.

Copy link
Member Author

chriseppstein commented Nov 29, 2012

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

This comment has been minimized.

Copy link

mariusGundersen commented Jan 16, 2013

What is the state of this?

@paulirish

This comment has been minimized.

Copy link
Contributor

paulirish commented Jan 17, 2013

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//issues/1108#issuecomment-12318775.

@scottdavis

This comment has been minimized.

Copy link
Member

scottdavis commented Jan 17, 2013

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

@Saturate

This comment has been minimized.

Copy link

Saturate commented Jan 21, 2013

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
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

This comment has been minimized.

Copy link
Contributor

paulirish commented Mar 19, 2013

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

@Snugug

This comment has been minimized.

Copy link
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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Member Author

chriseppstein commented Mar 19, 2013

@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

This comment has been minimized.

Copy link
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

This comment has been minimized.

Copy link
Contributor

paulirish commented Mar 19, 2013

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//issues/1108#issuecomment-15148517
.

@mgol

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

Saturate commented Mar 20, 2013

@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

This comment has been minimized.

Copy link

benfrain commented Mar 22, 2013

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

This comment has been minimized.

Copy link

superstructor commented Mar 22, 2013

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

This comment has been minimized.

Copy link

benfrain commented Mar 22, 2013

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

This comment has been minimized.

Copy link

s10wen commented Apr 4, 2013

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

👍

@s10wen

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

andfinally commented Apr 22, 2013

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

This comment has been minimized.

Copy link

foiseworth commented Apr 24, 2013

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

This comment has been minimized.

Copy link

benfrain commented Apr 24, 2013

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

This comment has been minimized.

Copy link

foiseworth commented Apr 24, 2013

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

@grayghostvisuals

This comment has been minimized.

Copy link

grayghostvisuals commented Mar 4, 2014

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

This comment has been minimized.

Copy link

leevigraham commented Mar 21, 2014

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

This comment has been minimized.

Copy link

JacobDorman commented Mar 22, 2014

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

This comment has been minimized.

Copy link

grayghostvisuals commented Mar 22, 2014

@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

This comment has been minimized.

Copy link
Member Author

chriseppstein commented Mar 22, 2014

@grayghostvisuals Good point. Closing now!

@Avcajaraville

This comment has been minimized.

Copy link

Avcajaraville commented May 30, 2014

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

This comment has been minimized.

Copy link
Member

scottdavis commented May 30, 2014

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

@leopic

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Member Author

chriseppstein commented Jul 30, 2014

@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

This comment has been minimized.

Copy link

jackoverflow commented Aug 17, 2014

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

This comment has been minimized.

Copy link

stereokai commented Aug 17, 2014

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

@funkyfuture

This comment has been minimized.

Copy link

funkyfuture commented Aug 17, 2014

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

This comment has been minimized.

Copy link

stereokai commented Aug 17, 2014

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

This comment has been minimized.

Copy link

okaiji commented Aug 17, 2014

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

@funkyfuture

This comment has been minimized.

Copy link

funkyfuture commented Aug 17, 2014

@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

This comment has been minimized.

Copy link
Contributor

Snugug commented Aug 18, 2014

@stereokai

This comment has been minimized.

Copy link

stereokai commented Aug 18, 2014

@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

This comment has been minimized.

Copy link

leopic commented Aug 18, 2014

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

@neekey

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

timelf123 commented Aug 26, 2014

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

hacky, but worked well enough for us

@chriseppstein

This comment has been minimized.

Copy link
Member Author

chriseppstein commented Aug 27, 2014

@neekey Please open a new issue about this

@neekey

This comment has been minimized.

Copy link

neekey commented Aug 27, 2014

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

tanarurkerem added a commit to tanarurkerem/compass that referenced this issue Dec 29, 2014

@chiva05

This comment has been minimized.

Copy link

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!

@webuniverseio

This comment has been minimized.

Copy link

webuniverseio commented Jan 2, 2015

@chiva05 run gem install compass in cmd.

@chiva05

This comment has been minimized.

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.