I know that this question was (kinda) aksed already in #2240137: Recommendation for Sourcemap Supported Susy/Compass Config but it was just a part of a question incorporatin Susy 2.

This is question on just getting Chrome show SASS line like the Firebug and FireSASS do for Firefox. This is (nearly) last obstacle but a huge one holding me still to Firefox and also a great drawback and time loss in Chrome.

To make question as short as possible while asking just the basic thing:

What is the minimal thing in order to have SASS produce SASS source maps that can help in CSS debugging in (latest, v36) Google Chrome?

I've read a lot and whatever I tried I ended up screwing up the whole thing and not getting any near source maps produced.

So what are dependencies in Gemfile (bundle install) needed to do so and what is gained and what is lost?

I'm not in grunt / node.js camp so I'm trying to do it pure gem style.

I am using guard and live reload but I'm willing to give that up for SASS file name / line number in inspect element.

CommentFileSizeAuthor
#1 omega-sourcemaps.patch5.44 KBjwilson3

Comments

jwilson3’s picture

StatusFileSize
new5.44 KB

I just went through this setup myself, reported in gory detail here:

http://jwilson3.postach.io/add-source-maps-to-omega-4-x-projects

Here is a patch of the resulting changes required to get sourcemaps working.

If you already have a theme, and want to update it to use sourcemaps, you can apply it with patch -p1 < omega-sourcemaps.patch from inside your custom theme directory.

It will ask you which file you want to patch for the themename.styles.scss file and the themename.normalize.scss file.

Also, the patch can be applied inside the omega/starterkits/default/ folder using the same patch -p1 method mentioned above.

After applying the patch you need to pull down the updated gems with:

bundle update

And then recompile your css with:

bundle exec compass compile
macmladen’s picture

I must say this is single most valuable answer here I have ever seen: precise, quality and concise!

bundler is pretty smart so it is just sufficient to demand 'compass', '~>1.0.0.rc.0' and bundle update will do the rest with dependencies.

However, and this is a major thing, that is not enough without changes to config.rb, themename.styles.scss and themename.normalize.scss

I can confirm that it even works with guard and live reload although I've read a ton of posts that said it cannot be resolved. I prefer drush guard to simple compass watch or even more to bundle exec compass compile which I never (needed) to use.

There are some caveats: you must take care not to mix units as SASS 3.3 is more strict than 3.2 and there are some other changes and deprecations you should learn about. So you may end up with error sass/theme.styles.scss (Line xxx of sass/......scss: Incompatible units: 'px' and 'rem'.) which you have to trace and change. The simple explanation is that you cannot add pixels to ems and somewhere rem as a unit does not work (some functions do not support it like add-grid()). On a relatively complex site I needed about an hour to fix those errors and compile successfully.

I see no reason not to include this patch with next Omega release (if there is going to be one at all :( )

jwilson3’s picture

Thanks for the compliment! ^

bundler is pretty smart so it is just sufficient to demand 'compass', '~>1.0.0.rc.0' and bundle update will do the rest with dependencies.

Woah, that is awesome. Should have tried that first. I'll also have a look at drush guard.

bundle exec compass compile is just the "safe" way that we know works in all platforms. (Sometimes running "compass compile" will use the wrong versions if you aren't using RVM and the other stack requirements, or have your environment setup with different versions of compass on the $PATH). Telling people to use "bundle exec" ensures they are using bundler, and that they're using the version of compass bundled with the theme, at the very least ;)

fubhy’s picture

Issue tags: -Sass, -source maps, -Chrome, -development

I am going to update the default starterkit to use the "new" toolkit file names and also enable sourcemaps. The rest of the patch provided won't make it in though because it's rather a problem with the Gems themselves. I am going to contact Snugug to fix toolkit 2.5.2 to also support Sass 3.4 which will make this work again without touching the Gemfile at all. Our Gemfile does not have a version restriction atm. which is something I did intentionally so people would benefit from the latest Gem versions whenever they do "bundle install" in a new project. This comes with the downside of running into problems whenever a particular Gem releases a new version which proofs incompatible with others in the list. This is the case right now and caused by Toolkit 2.5.2 not supporting Sass 3.4.

Stay tuned.

fubhy’s picture

fubhy’s picture

I just fixed the default starterkit in http://cgit.drupalcode.org/omega/commit/?id=685c663

https://github.com/Team-Sass/toolkit/pull/74 now fixed the Toolkit Sass dependency to allow for Sass v3.4 which makes our Gemfile work again without changing anything.

Please try creating a new subtheme with 'drush owiz' using the default starterkit. I am going roll a new release once this has been confirmed to work.

jwilson3’s picture

Uh, thanks for credit. :'( Also, if you mention the issue number in the commit message, you don't need to link to the commit in the issue queue, that is done automatically for you: https://www.drupal.org/node/52287, https://www.drupal.org/documentation/git/faq#back-links

fubhy’s picture

I know. That was just me being lazy while on the train. Sorry for not giving you credit. I did not have the issue open while fixing this because I didn't use the patch provided here due to the unneeded changes in the Gemfile. The wifi was too weak to go on an issue hunt. Same with the issue number. Next time....

fubhy’s picture

Can anyone confirm that this is working with 4.x-dev now? I would like to roll 4.3 for this.

macmladen’s picture

I can confirm that it is OK. I made a new Drupal installation, pulled omega-4.x-dev, created omega-new subtheme using drush owiz and then executed bundle install

mladen:~/Sites/omega/sites/all/themes/omega_new 16:04:31 $ bundle install
Fetching gem metadata from https://rubygems.org/..........
Fetching additional metadata from https://rubygems.org/..
Resolving dependencies...
Using addressable 2.3.6
Installing sass 3.4.1
Installing sassy-maps 0.4.0
Installing breakpoint 2.5.0
Installing timers 1.1.0
Installing celluloid 0.15.2
Using chunky_png 1.3.1
Using coderay 1.1.0
Installing multi_json 1.10.1
Installing compass-core 1.0.1
Installing compass-import-once 1.0.5
Using rb-fsevent 0.9.4
Using ffi 1.9.3
Installing rb-inotify 0.9.5
Installing compass 1.0.1
Using compass-normalize 1.5
Using compass-rgbapng 0.2.1
Using compass-validator 3.0.1
Using css_parser 1.3.5
Using eventmachine 1.0.3
Using http_parser.rb 0.6.0
Using em-websocket 0.5.1
Installing formatador 0.2.5
Installing listen 2.7.9
Installing lumberjack 1.0.9
Using method_source 0.8.2
Installing slop 3.6.0
Installing pry 0.10.1
Using thor 0.19.1
Using guard 2.6.1
Using guard-compass 1.1.0
Installing guard-livereload 2.3.0
Using guard-shell 0.6.1
Using oily_png 1.1.1
Using rb-fchange 0.0.6
Installing sass-globbing 1.1.1
Installing singularitygs 1.3.0
Installing susy 2.1.3
Installing toolkit 2.6.0
Installing yajl-ruby 1.2.1
Using bundler 1.6.2
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.
Post-install message from compass:
    Compass is charityware. If you love it, please donate on our behalf at http://umdf.org/compass Thanks!

After fetching all needed gems and dependencies, compass compile produced source maps as expected:

mladen:~/Sites/omega/sites/all/themes/omega_new 16:10:24 $ compass compile
    write css/omega-new.no-query.css
    write css/omega-new.no-query.css.map
    write css/omega-new.normalize.css
    write css/omega-new.normalize.css.map
    write css/omega-new.styles.css
    write css/omega-new.styles.css.map
mladen:~/Sites/omega/sites/all/themes/omega_new 16:16:26 $ 
macmladen’s picture

I included whole bundler listing where you can see what is pulled new and what was used from previous omega setup (though this may not be exact due to some of my previous testing).

@Fubhy, it would be nice to have just Gemfile and not any version declared, however, I am not sure that it will still be working some time from now. These gems are changing like crazy and at some point people may get p*ssed as dependencies may be more broke that they would work. Until recently, it was nearly impossible to get source maps and work with omega (I tried that myself in May 2014 and failed) and kept trying until jwilson3 resolved change in config.rb which enabled the whole thing.

I hope that this combination would continue to work but we will have to constantly monitor not to have some dependency broken.

As it is now, with this exact version of gems, everything works.

mrpauldriver’s picture

@fuhby ref#10
The dev installed cleanly and reported no errors but I did later run in to problems with sass-globbing.

The current version is 1.1.1 but this seems to be broken. See http://drupal.stackexchange.com/questions/116157/file-to-import-not-foun... and https://github.com/chriseppstein/sass-globbing/issues/19 . Contrary to one comment, this is not just a Windows problem, I found the same on osx.

ref #12. Agree with @MacMladen
I am pretty new to all this sass and gem stuff, nor have I got my head around version control yet either. All in all it has been very steep learning curve! But you have to start somewhere and Omega has been the catalyst for me to up my game. (git is next on my list).

Recently I have been getting really confused when gems stop to be compatibile with each other or when their methods change. As far as Omega goes, I believe this is a barrier to entry and a pretty huge banana skin for anybody who is new to this stuff.

I think it would be a good idea to standardise on a collection of compatible gems and somehow make it harder for noobs to run bundle update and to potentially break things.

Experts would know how to tweak the config.rb file for advanced purposes, whilst us lesser mortals could enjoy a stable workflow and would be blissfully unaware of any issues.

macmladen’s picture

...therefore, it would make sense to declare some versions in Gemfile that are tested and proved to work and to make progress in each release toward newer versions of gems.

New Omega release may be justified even for some gems change or smaller improvements, as we learn from all modern projects, the world seems to abandon great releases and focus on smaller but more rapid improvements (even WP does that).

Personally, I do not like this rapidness, I prefer solid and tested releases and do not like the need to update every week for some small thing I will never experience but then, when I face a problem I do get "itchy" why something is not fixed when it known for some time.

There I said it and I add that I am comfortable with Fubhy release pace although I am not too comfortable that project is still here after that ugly dispute with Jake, but that is another issue.

fubhy’s picture

I think I agree with #12 too. More experienced users can simply do/try a forceful update to the latest version and we can do new releases every now and then with the latest Gem versions.

macmladen’s picture

...and we can do new releases every now and then with the latest Gem versions.

I'd add to that: ...latest Gem versions that are tested and proved to work (although it may seem self evident but that is precisely why fubhy asked if those work because sometimes our special cases may not be the case for everyone and sometimes, yes, we are just too tired and cannot see the forest for the trees anymore.

fubhy’s picture

Sooo... Does someone want to provide a Gemfile that is more or less locked on a working combination of Gem versions? I am going to release 4.3 today so it's probably not going to make it in there but I still want to add this to prevent this from happening again in the future.

macmladen’s picture

This issue is overcome by new Omega version 4.4 and by moving to node based workflow (that raises new set of issues) I think we can assume this fixed.

macmladen’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.