Source map is incorrect when url()'s is rewrited #379

x-yuri · 2016-11-23T00:02:44Z

package.json:

{
  "dependencies": {
    "css-loader": "^0.26.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  }
}

webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './1.js',
    output: {
        path: 'dist',
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {test: /\.css$/, loaders: ['style', 'css?sourceMap&minimize']},
            {test: /\.png$/, loader: 'file'},
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'template.ejs',
        }),
    ],
};

template.ejs:

<!doctype html>
<html>
<body>

    <div class="d1"></div>
    <div class="d2"></div>

</body>
</html>

1.js:

require('./1.css');

1.css:

.d1 {
    background: url(1.png);
}
.d2 {
    width: 20px;
}

$ npm i
$ rm -rf dist/* && ./node_modules/.bin/webpack

Then open http://example.com/dist in Chrome. Then Developer Tools > Elements tab. Then click on second div, and then on the link for .d2 { width: 20px; } rule. And you'll find yourself on line 5. But if you remove minimize param, you'll be at line 4, which is as it should be.

P.S. node-7.1.0, Arch Linux

The text was updated successfully, but these errors were encountered:

x-yuri · 2016-11-26T20:32:18Z

I now see, here we've got the following css (as json):

".d1{background:url(___CSS_LOADER_URL___0___)}.d2{width:20px}"

and mappings:

AAAA,IACI,wCAAuB,CAC1B,AACD,IACI,UAAY,CACf

([0,0](#0)=>[0,0])
    | ([1,4](#0)=>[0,4])
    | ([1,27](#0)=>[0,44])
    | ([2,1](#0)=>[0,45])
    | ([3,0](#0)=>[0,45])
    | ([4,4](#0)=>[0,49])
    | ([4,16](#0)=>[0,59])
    | ([5,1](#0)=>[0,60])

which are totally correct. You must already see, where this is coming. Now then, this block changes css from

".d1{background:url(___CSS_LOADER_URL___0___)}.d2{width:20px}"

to

".d1{background:url(" + require("./1.png") + ")}.d2{width:20px}"

which then gets replaced with __webpack_require__(4) in the resulting bundle. But source map is never updated since being generated, so no surprise it's wrong.

alexander-akait · 2018-02-15T14:53:18Z

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!

x-yuri · 2018-02-25T11:05:20Z

@evilebottnawi Yeah, I can reproduce it with webpack@^3.0.0. Here's the archive with files needed to reproduce the issue.

1.css

.d1 {
    background: url(1.png);
}
.d2 {
    width: 20px;
    height: 20px;
}
.d3 {
    width: 30px;
    height: 30px;
}
.d4 {
    width: 40px;
    height: 40px;
}

The thing is here we get totally valid source map:

.d1{background:url(___CSS_LOADER_URL___0___)}.d2{width:20px;height:20px}.d3{width:30px;height:3
0px}.d4{width:40px;height:40px}                                                
                                                                  
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjp
bIi4uLy4uLy4uLy4uL2Nzcy1sb2FkZXIhL3Nydi9odHRwL3MxL2ltZy11cmxzLzEuY3NzIl0sIm5hbWVzIjpbXSwibWFwcG
luZ3MiOiJBQUFBLElBQ0ksd0NBQXVCLENBQzFCLEFBQ0QsSUFDSSxXQUFZLEFBQ1osV0FBYSxDQUNoQixBQUNELElBQ0ksV
0FBWSxBQUNaLFdBQWEsQ0FDaEIsQUFDRCxJQUNJLFdBQVksQUFDWixXQUFhLENBQ2hCIiwiZmlsZSI6IjEuY3NzIiwic291
cmNlc0NvbnRlbnQiOlsiLmQxIHtcbiAgICBiYWNrZ3JvdW5kOiB1cmwoMS5wbmcpO1xufVxuLmQyIHtcbiAgICB3aWR0aDo
gMjBweDtcbiAgICBoZWlnaHQ6IDIwcHg7XG59XG4uZDMge1xuICAgIHdpZHRoOiAzMHB4O1xuICAgIGhlaWdodDogMzBweDtcbn1cbi5kNCB7XG4gICAgd2lkdGg6IDQwcHg7XG4gICAgaGVpZ2h0OiA0MHB4O1xufVxuIl19 */

Open SourceMap Inspector, put it into Output field, click Analyze, use Left, Right arrow buttons.

But then this block of code turns it into:

".d1{background:url(" + escape(require("./1.png")) + ")}.d2{width:20px;height:20px}.d3{width:30px;height:30px}.d4{width:40px;height:40px}"

And in the bundle we've got:

exports.push([module.i, ".d1{background:url(" + escape(__webpack_require__("./1.png")) + ")}.d2{width:20px;height:20px}.d3{width:30px;height:30px}.d4{width:40px;height:40px}"...

escape(__webpack_require__("./1.png")) gets replaced with something similar to 52647b79be294c690caeecc2fa55ef92.png. Then it's converted to absolute url, but source map was never updated since we got it in processCss's callback.

And then:

But when I comment out the background: url(1.png); line, I get:

P.S. Most likely, it's not only about image urls. Here's another thing that changes css code without updating source map.

P.P.S. I can reproduce it even with extract-text-webpack-plugin (link to the archive). From user's perspective it totally looks like bug. Meaning, without extract-text-webpack-plugin it seems like it can't decide on resulting url when generating a bundle. Only when executed in the browser it has all the info needed. But with extract-text-webpack-plugin it's no longer the case. The asset is available after webpack has finished its job, but with incorrect source map.

I'm not sure how hard that is to fix. Do you have any ideas? Is this possible?

alexander-akait · 2018-02-26T09:47:19Z

@x-yuri Thanks!

alexander-akait · 2018-12-04T18:54:06Z

Don't have ideas how we can fix it on loader level, maybe implementing native support css in webpack can solve this problem, but on loader level we need pass all url() in require (for supporting resolving url and change their publicPath, outputPath and etc) so we use replace. Anyway feel free to investigate how we can fix it.

alexander-akait · 2020-07-21T18:14:53Z

Let's close in favor #622, I have some ideas

x-yuri changed the title ~~Source maps are wrong when css contains url()'s and is minimized~~ Source maps are incorrect when css contains url()'s and is minimized Nov 23, 2016

x-yuri changed the title ~~Source maps are incorrect when css contains url()'s and is minimized~~ Source map is incorrect when css contains url()'s and is minimized Nov 23, 2016

michael-ciniawsky added the type: Bug label Mar 6, 2017

alexander-akait closed this as completed Feb 15, 2018

alexander-akait reopened this Feb 26, 2018

alexander-akait added severity: 3 (broken) priority: 4 (important) labels Feb 26, 2018

alexander-akait changed the title ~~Source map is incorrect when css contains url()'s and is minimized~~ Source map is incorrect when url()'s is rewrited Aug 8, 2018

alexander-akait added this to the 2.0.1 milestone Aug 8, 2018

alexander-akait added the semver: Patch label Oct 30, 2018

alexander-akait added type: Feature type: Bug and removed type: Bug labels Dec 4, 2018

alexander-akait removed this from the 2.0.1 milestone Mar 5, 2019

mbehzad mentioned this issue Mar 30, 2020

feat(webpack-config): generate exact source-maps for css files pro-vision/fe-tools#66

Merged

alexander-akait closed this as completed Jul 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Source map is incorrect when url()'s is rewrited #379

Source map is incorrect when url()'s is rewrited #379

x-yuri commented Nov 23, 2016 •

edited

Loading

x-yuri commented Nov 26, 2016

alexander-akait commented Feb 15, 2018

x-yuri commented Feb 25, 2018 •

edited

Loading

alexander-akait commented Feb 26, 2018

alexander-akait commented Dec 4, 2018

alexander-akait commented Jul 21, 2020

Source map is incorrect when url()'s is rewrited #379

Source map is incorrect when url()'s is rewrited #379

Comments

x-yuri commented Nov 23, 2016 • edited Loading

x-yuri commented Nov 26, 2016

alexander-akait commented Feb 15, 2018

x-yuri commented Feb 25, 2018 • edited Loading

alexander-akait commented Feb 26, 2018

alexander-akait commented Dec 4, 2018

alexander-akait commented Jul 21, 2020

x-yuri commented Nov 23, 2016 •

edited

Loading

x-yuri commented Feb 25, 2018 •

edited

Loading