source-map omits some mappings when regenerating source map
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- javascript, webpack
- Domain
- tooling
Research direction
Start with the supplied Webpack 3 reproduction archive, package.json, webpack.config.js, and 1.scss, then run the documented npm and webpack commands. Trace sourceAndMap() in webpack-sources into the source-map package and compare the logged mappings with the expected entries; done means the reproduced mappings are retained or the cause is documented with a regression test.
Written by the indexing model from the issue text.
Description
See next post for a lower level case.
I hope you don't mind me explaining how to reproduce the issue with webpack:
package.json:
{
"dependencies": {
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.24.1",
"node-sass": "^3.13.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
}
}
webpack.config.js:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './1.js',
output: {
path: 'dist',
filename: 'bundle.js',
},
module: {
loaders: [
{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&minimize!sass?sourceMap')}, // (1)
// {test: /\.scss$/, loaders: ['style', 'css?sourceMap&minimize!sass?sourceMap']}, // (2)
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'template.ejs',
}),
new ExtractTextPlugin('[name].css'), // (1)
],
devtool: 'source-map', // (1)
};
template.ejs:
<!doctype html>
<html>
<body>
<div>
<div></div>
</div>
</body>
</html>
1.js:
require('./1.scss');
1.scss:
div {
width: 10px;
div {
width: 20px;
}
}
$ npm i
$ rm -rf dist/* && ./node_modules/.bin/webpack
With extract-text-webpack-plugin (1) you get source map in dist/main.css.map and the following mappings:
AAAA,IACI,UAAY,CAIf,QAFO,UAAY
([0,0](#0)=>[0,0])
| ([1,4](#0)=>[0,4])
| ([1,16](#0)=>[0,14])
| ([5,1](#0)=>[0,15])
| ([3,8](#0)=>[0,23])
| ([3,20](#0)=>[0,33])
And if you open the page in Chrome (http://example.com/dist), open Developer Tools > Elements tab. Click on inner div, you'll see:
Now, if you comment out lines marked with (1), and uncomment the one marked with (2), run webpack, you'll get the following mappings (in bundle.js, search for word mappings):
AAAA,IACI,UAAY,CAIf,AALD,QAGQ,UAAY,CACf
([0,0](#0)=>[0,0])
| ([1,4](#0)=>[0,4])
| ([1,16](#0)=>[0,14])
| ([5,1](#0)=>[0,15])
| ([0,0](#0)=>[0,15]) // source-map removes this
| ([3,8](#0)=>[0,23])
| ([3,20](#0)=>[0,33])
| ([4,5](#0)=>[0,34]) // and this lines
and the following line in Chrome:
Which is arguably correct. Anyways, line 6 doesn't even come close to it.
Now, if you change node_modules/webpack/lib/SourceMapDevToolPlugin.js like so:
--- node_modules/webpack/lib/SourceMapDevToolPlugin.js 2016-11-26 20:37:53.178777196 +0200
+++ node_modules/webpack/lib/SourceMapDevToolPlugin.js.new 2016-11-26 20:37:51.612119017 +0200
@@ -52,7 +52,16 @@
return;
}
if(asset.sourceAndMap) {
+if (file == 'main.css') {
+console.log('number of children: ', asset.children.length);
+console.log(asset.children[0]._sourceMap.mappings);
+console.log(options);
+}
var sourceAndMap = asset.sourceAndMap(options);
+if (file == 'main.css') {
+console.log('source changed: ', asset.children[0].source() != sourceAndMap.source);
+console.log(sourceAndMap.map.mappings);
+}
var sourceMap = sourceAndMap.map;
var source = sourceAndMap.source;
} else {
you'll see:
number of children: 1
AAAA,IACI,UAAY,CAIf,AALD,QAGQ,UAAY,CACf
{ filename: '[file].map[query]',
moduleFilenameTemplate: undefined,
fallbackModuleFilenameTemplate: undefined,
append: null,
module: true,
columns: true,
lineToLine: false,
noSources: false,
test: /\.(js|css)($|\?)/i }
source changed: false
AAAA,IACI,UAAY,CAIf,QAFO,UAAY
sourceAndMap() function is defined here. And here's where it passes control to source-map package.
Having that said, we can see that source map was changed, for no clear reason. Can you explain it? This seems like a bug in source-map.
Files needed to reproduce it with Webpack 3
- Dominant language
- JavaScript
- Stars
- 3.7k
- Forks
- 370
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from mozilla/source-map
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
mozilla/source-map#530 ·
-
Difficulty 4/5 3-5 days Newbie friendliness 55/100
mozilla/source-map#527 ·
-
Difficulty 4/5 3-5 days Newbie friendliness 45/100
mozilla/source-map#524 · 6 comments ·
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
mozilla/source-map#516 ·
-
Difficulty 5/5 Over a week Newbie friendliness 30/100
mozilla/source-map#510 · 1 reaction ·
All issues in mozilla/source-map
Similar issues
-
Bug
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
Automattic/safe-publish#594 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
dream-num/dsh-univer-office#104 ·
-
comp/dashboard invalid P3
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
NousResearch/hermes-agent#121143 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
avniproject/avni-webapp#1811 ·
-
area/auroraboot area/webui bug
Difficulty 2/5 1-3 hours Newbie friendliness 75/100