[Bug] Webpack + Sass-Loader sourceMap support not possible #62
Description
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.