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