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

Add source map on debug mode with Sprockets 4 #162

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

GCorbel
Copy link

@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.

map = input[:metadata][:map]
end

context.metadata.merge(data: css, map: map)
Copy link
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

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!)

@@ -34,13 +34,36 @@ def call(input)
}
}.merge!(config_options) { |key, left, right| safe_merge(key, left, right) }

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

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
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.

@@ -243,6 +245,18 @@ def test_allows_for_inclusion_of_inline_source_maps
assert_match /sourceMappingURL/, asset
end

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

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
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
Author

GCorbel commented Feb 23, 2021

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

@GregLMcDonald
Copy link

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

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 join this conversation on GitHub. Already have an account? Sign in to comment
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