Source maps get source mapped

[mattbrunetti]

First of all, excellent package. Far superior to sassify. Thank you :+1:

I found one little performance problem though...

If you're generating source maps (using the browserify --debug option, which also signals this module to generate source maps), the scss-to-css source maps are included in the js source code which then itself gets source-mapped. Since source maps use base 64 encoding, the total file size gets pretty big.

I did an experiment to compare. My sample includes the latest bootstrap-sass (styles only; no javascript) and a few lines of actual js.

• Using gulp-sass to bundle styles separately, my app.js is 3 kb and my app.css is 652 kb
• Using scssify to bundle everything in js, my app.js is 1595 kb

Any idea how we could get Browserify to not generate source maps for the intermediate js this module feeds it?

[cody-greene]

Ahh... yes that is troubling. Sounds like I'll have to take a closer look at the browserify internals later this month to see what's possible. But at least this only affects source-map bundles and not production bundles. As a stopgap measure you might try including only the bootstrap modules that you actually need. e.g

// my-bootstrap.scss
// node-sass --include-path node_modules my-bootstrap.scss
@import 'bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/mixins';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/normalize';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/print';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/scaffolding';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/type';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/code';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/grid';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/tables';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/forms';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/buttons';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/component-animations';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/dropdowns';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/button-groups';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/input-groups';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/navs';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/navbar';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/pagination';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/pager';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/labels';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/badges';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/jumbotron';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/thumbnails';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/alerts';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/progress-bars';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/media';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/list-group';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/panels';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/wells';
// @import 'bootstrap-sass/assets/stylesheets/bootstrap/close';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/utilities';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities';

[mattbrunetti]

Actually it's not the development builds I'm worried about. We want to use source maps in production so if any errors are reported to Rollbar we can use the stack trace.

I may have time to look into this myself later this month, after we've demoed the project to management and I'm on my 3 week vacation :smile:

Keep me posted if you do get around to this, and I'll do the same.

Thanks so much!

p.s. I inspected the code and found one more optimization issue: The signal from Browserify's options to use source maps overrides the sourceMapEmbed and sourceMapContents options passed directly to this module, so I can't generate source maps for just scripts and not styles. I'll definitely submit a PR to fix this once I have a little more time.

[cody-greene]

Oh! Finally a fair use case for #18 then. Maybe you could revive that pull request and see if it works for you.