Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

source-map omits some mappings when regenerating source map

Abierto
#252 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
javascript, webpack
Área
tooling

Línea de trabajo

Comience con el archivo de reproducción de Webpack 3 proporcionado, package.json, webpack.config.js y 1.scss, y luego ejecute los comandos documentados de npm y webpack. Rastree sourceAndMap() en webpack-sources hasta el paquete source-map y compare los mappings registrados con las entradas esperadas; se considera terminado cuando se conservan los mappings reproducidos o se documenta la causa con una prueba de regresión.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

feat

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:

extract-text-webpack-plugin

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:

no-extract-text-webpack-plugin

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

Lenguaje dominante
JavaScript
Estrellas
3.7k
Forks
370
Sin PR fusionados en 30 d

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de mozilla/source-map

Todos los issues de mozilla/source-map

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.