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.

Sign up for GitHub

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

Jump to bottom

Sourcemaps aren't available in debug mode with Sprockets 4 #161

Open
GCorbel opened this issue Jan 29, 2021 · 0 comments · May be fixed by #162
Open

Sourcemaps aren't available in debug mode with Sprockets 4 #161

GCorbel opened this issue Jan 29, 2021 · 0 comments · May be fixed by #162

Comments

@GCorbel
Copy link

GCorbel commented Jan 29, 2021

I'm working on a Rails 5.2 application. I upgraded Sprockets from 3.7.2 to 4.0.2 and changed sass-rails 5.0.7 by sassc-rails 2.1.2.

To have sourcemap working for JS files, I have Rails.configuration.assets.debug = true. This work for JS files but don't for scss files. The generated sourcemap don't include dependencies introduce by @import.

For example, I have those files :

// main.scss
@import 'dep';

body.user-form {
  background-color: blue;
}

//dep.scss
body {
  color: red;
}

The sourcemap generated looked like :

{"version":3,"file":"main.scss","sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"file":"main.scss","mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["main.source.scss"],"names":[],"x_sprockets_linecount":9}}]}

Information about dep.scss are missing.

I tried to set Rails.configuration.sass.inline_source_maps = true. The file main.css was generated correctly like this :

/* line 1, app/assets/stylesheets/dep.scss */
body {
  color: red;
}

/* line 3, app/assets/stylesheets/main.scss */
body.user-form {
  background-color: blue;
}

/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiYXBwL2Fzc2V0cy9zdHlsZXNoZWV0cy9tYWluLmNzcyIsCgkic291cmNlcyI6IFsKCQkiYXBwL2Fzc2V0cy9zdHlsZXNoZWV0cy9tYWluLnNjc3MiLAoJCSJhcHAvYXNzZXRzL3N0eWxlc2hlZXRzL2RlcC5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiQGltcG9ydCAnZGVwJztcblxuYm9keS51c2VyLWZvcm0ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlO1xufVxuIiwKCQkiYm9keSB7XG4gIGNvbG9yOiByZWQ7XG59XG4iCgldLAoJIm5hbWVzIjogW10sCgkibWFwcGluZ3MiOiAiO0FDQUEsQUFBQSxJQUFJLENBQUM7RUFDSCxLQUFLLEVBQUUsR0FBRztDQUNYOzs7QURBRCxBQUFBLElBQUksQUFBQSxVQUFVLENBQUM7RUFDYixnQkFBZ0IsRUFBRSxJQUFJO0NBQ3ZCIgp9 */

But when debug is enabled, sprockets loads main.debug.css which look like this :

/* line 1, app/assets/stylesheets/dep.scss */
body {
  color: red;
}

/* line 3, app/assets/stylesheets/main.scss */
body.user-form {
  background-color: blue;
}

/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiYXBwL2Fzc2V0cy9zdHlsZXNoZWV0cy9tYWluLmNzcyIsCgkic291cmNlcyI6IFsKCQkiYXBwL2Fzc2V0cy9zdHlsZXNoZWV0cy9tYWluLnNjc3MiLAoJCSJhcHAvYXNzZXRzL3N0eWxlc2hlZXRzL2RlcC5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiQGltcG9ydCAnZGVwJztcblxuYm9keS51c2VyLWZvcm0ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlO1xufVxuIiwKCQkiYm9keSB7XG4gIGNvbG9yOiByZWQ7XG59XG4iCgldLAoJIm5hbWVzIjogW10sCgkibWFwcGluZ3MiOiAiO0FDQUEsQUFBQSxJQUFJLENBQUM7RUFDSCxLQUFLLEVBQUUsR0FBRztDQUNYOzs7QURBRCxBQUFBLElBQUksQUFBQSxVQUFVLENBQUM7RUFDYixnQkFBZ0IsRUFBRSxJQUFJO0NBQ3ZCIgp9 */

/*# sourceMappingURL=main.css-06368f2ebb8ca98cf10b6bd70c61bd6e64161d93c3ebf7f85e002ca438f83e77.map */

As you can see, the sourceMappingURL is included twice and only the last line is taken by dev tools. The related sourcemap file still doesn't include data about dep.scss.

If I set debug to false, the file main.css is loaded by the application so sourcemap is correct for css files BUT it isn't for JS files.

I inspected sprockets and sassc-rails source code and found that it works in debug mode for both kind of files when I change lib/sassc/rails/railtie.rb#L57 from :

env.register_transformer 'text/scss', 'text/css', SassC::Rails::ScssTemplate.new

To

env.register_transformer 'text/scss', 'text/css', Sprockets::ScsscProcessor.new(importer: SassC::Rails::Importer, sass_config: Rails.application.config.sass)

This way, the soucepmap generated by sprockets includes all dependencies when debug is true. Rails.configuration.sass.quiet as to be set to false (don't ask me why).

I'm not a sprocket expert so let me know if I miss something.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add source map on debug mode with Sprockets 4 GCorbel/sassc-rails
1 participant
@GCorbel