Skip to content
This repository was archived by the owner on Oct 24, 2025. It is now read-only.

Add source map on debug mode with Sprockets 4#162

Open
GCorbel wants to merge 2 commits intosass:masterfrom
GCorbel:add-source-maps-on-debug
Open

Add source map on debug mode with Sprockets 4#162
GCorbel wants to merge 2 commits intosass:masterfrom
GCorbel:add-source-maps-on-debug

Conversation

@GCorbel
Copy link
Copy Markdown

@GCorbel GCorbel commented Feb 17, 2021

This fix #161. With Sprockets 4, when debug mode was enabled, the source map wasn't added correctly at the end of the file.

Comment thread lib/sassc/rails/template.rb Outdated
map = input[:metadata][:map]
end

context.metadata.merge(data: css, map: map)
Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

map metadata wasn't transmitted to sprockets and wasn't aware of dependencies, so it wasn't able to generate the source map with complete data.

@jrochkind
Copy link
Copy Markdown

This branch does make SCSS sourcemaps work for me with sprockets 4 (in Rails).

Without the fix in this branch, dev tools debugging of SCSS was pretty impossible in sprockets 4; I had to disable source maps in my browser. (The source maps resulted in unusable mapping, where Chrome just though every line of CSS came from an @import statement, and I couldn't figure out how to disable source map generation altogether for sprockets).

Thanks @GCorbel, amazing work.

I would love to see this merged and in a sassc-rails release, so I can re-enable use of source maps in Chrome.

(Still very mystified why this hasn't been a higher-profile issue; is nobody else using SCSS and sprockets 4? That seems hard to believe, as they are both standard installs in a new rails app. Mystified!)

Comment thread lib/sassc/rails/template.rb Outdated
}
}.merge!(config_options) { |key, left, right| safe_merge(key, left, right) }

if Rails.application.config.assets.debug && Sprockets::VERSION.start_with?("4")
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps to be forward compatible this should be written in a way that it will still be enabled for sprockets 5 and other >4? It seems likely this will continue to be needed -- if it causes problems, sassc-rails will be broken with sprockets 5 either way, so doing this even in Sprockets 5+ seems the most likely to lead to things keeping working when/if a sprockets 5 is released.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked and there are some options :

Sprockets::VERSION.to_i >= 4
Gem.loaded_specs['sprockets'].version.segments.first >= 4
!Sprockets::VERSION.start_with?("3")

Sassc-rails doesn't support sprockets < 3 so, because the last line is the simplest, I think this is the better option.

Comment thread test/sassc_rails_test.rb Outdated
end

def test_adds_source_map_in_debug_mode
if Sprockets::VERSION.start_with?("4")
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you should definitely write the test so if sprockets 5 is ever released, the test will be run under sprockets 5 too and raise on failure, instead of just skipping this test!

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed to make this working with Sprockets >= 4

@GCorbel
Copy link
Copy Markdown
Author

GCorbel commented Feb 23, 2021

@jrochkind thanks for your review. I applied your comments and did some refactoring.

@GregLMcDonald
Copy link
Copy Markdown

Would love to see this fix deployed in a new release. Debugging sass in a complex app is pretty painful as things stand.

@panozzaj
Copy link
Copy Markdown

panozzaj commented Oct 4, 2023

I ran into this issue today, and fixed by using the code in this PR:

  1. Made my Gemfile reference these commits:
gem 'sassc-rails', github: 'GCorbel/sassc-rails', branch: 'add-source-maps-on-debug'
  1. Changed ./config/environments/development.rb to have:
  config.sass.inline_source_maps = true
  config.assets.debug = true
  1. rm -rf ./tmp/cache based on the gem's README
  2. Restarted my development server
  3. Now the Chrome Inspector directly links to the SCSS source.

I would +1 merging and cutting a new release, as a result.

(I am not a maintainer of this project, just a user.)

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Sourcemaps aren't available in debug mode with Sprockets 4

4 participants