css-loader: Places incorrect paths in extracted source maps for input that has relative sources
- Operating System: Windows 10
- Node Version: 10.15.3
- NPM Version: 6.9.0
- webpack Version: 4.31.0
- mini-css-extract-plugin Version: 0.7.0
Expected Behavior
When offered compiled CSS content backed by a source map where sources are relative URLs, extracts a .css file with a source map that has correct path information. That is: the sources are resolved against this.context of the compiled CSS content, producing the correct source locations.
Actual Behavior
When offered compiled CSS content backed by a source map where sources are relative URLs, extracts a css file with a source map that has incorrect path information. The sources seem to be output as-is to be interpreted by debuggers and dev-tools as relative to the extracted CSS file. This produces incorrect source locations.
Code
N/A
How Do We Reproduce?
Minimal repro case:
https://github.com/NetMatch/mini-css-extract-plugin-testcase
About this issue
- Original URL
- State: open
- Created 5 years ago
- Comments: 15 (9 by maintainers)
@evilebottnawi
I’m now running a small experiment, using esprima and escodegen to parse the JS module output by
css-loader; re-transform the relative URLs in its embedded CSS source-map to absolute disk paths; and then re-emit the corrected module.Sofar, that seems to work well with the MiniCssExtractPlugin as well. If this holds up, I’ll consider building up a pull request with a real fix. (There’s some performance-related motivation there for me to provide an integrated fix. Because of course; using esprima for outside manipulation is not cheap. 😉 )