[Bug] Webpack + Sass-Loader sourceMap support not possible

[fokusferit]

Basically the issue is related to libsass (sass/libsass#2312) which is used by node-sass (which is used by sass-loader in webpack).

During our prototyping we discovered two issues:

• https://github.com/wholesale-design-system/scss/blob/master/utils/_helpers.scss#L92
• https://github.com/wholesale-design-system/scss/blob/master/atoms/_buttons.scss#L49

The error report for example is:

  throw new Error('Invalid mapping: ' + JSON.stringify({
      ^

Error: Invalid mapping: {"generated":{"line":1,"column":29588},"source":"webpack:///node_modules/wholesale-styleguide-scss/atoms/_buttons.scss","original":{"line":46,"column":-17},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-map-generator.js:277:13)
    at SourceMapGenerator_addMapping [as addMapping] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-map-generator.js:101:12)
    at /Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-node.js:345:13
    at SourceNode_walk [as walk] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-node.js:224:9)
    at SourceNode_walk [as walk] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-node.js:220:13)
    at SourceNode_walk [as walk] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-node.js:220:13)
    at SourceNode_toStringWithSourceMap [as toStringWithSourceMap] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-node.js:336:8)
    at ConcatSource.proto.sourceAndMap (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack-sources/lib/SourceAndMapMixin.js:30:32)
    at /Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/SourceMapDevToolPlugin.js:66:35
    at Array.map (native)
    at /Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/SourceMapDevToolPlugin.js:53:85
    at Array.forEach (native)
    at Compilation.<anonymous> (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/SourceMapDevToolPlugin.js:52:12)
    at Compilation.applyPlugins1 (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/Compilation.js:639:11)
    at next (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/tapable/lib/Tapable.js:138:11)
    at Compilation.compilation.plugin (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/ProgressPlugin.js:117:6)
    at next (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/tapable/lib/Tapable.js:140:14)
    at Compilation.compilation.plugin (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:230:5)
    at Compilation.applyPluginsAsyncSeries (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/tapable/lib/Tapable.js:142:13)
    at self.applyPluginsAsync.err (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/Compilation.js:635:10)
    at next (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/tapable/lib/Tapable.js:138:11)

it is related to using '&' in mixins heavily which is weird as it is a crucial part of Sass.

[pwoosam]

I'm currently getting this same error with bootstrap, has anyone managed to get node-sass/libsass working with compound "&" selectors?

[fokusferit]

@pwoosam well, as we are also relying on libsass, we are also waiting for a bug fix from their side or need to investigate / change our way of using compound selector. So no support from our side ^^