style-loader
style-loader copied to clipboard
webpack-contrib
Style loader is not respecting the devtool option
Hello! First of all, thank you for your amazing work. I hope I was able to pinpoint the problem and I'm writing to a correct repository.
I'm using the following combination of loaders to treat my *.scss files:
sass-loader(dart sass)css-loaderstyle-loader
I'm making a production build and using the following options for Webpack:
{
mode: 'production',
devtool: 'hidden-source-map',
}
And I can see that CSS sourcemaps are added both to the resulting bundle.js file and to the bundle.js.map file as well. This leads to a serious problem, because proprietary source code is getting added to the publicly available bundle, disregarding the devtool option.
- Operating System:
Ubuntu 20.04.1 LTS - Node Version:
v14.15.4 - NPM Version:
6.14.11 - webpack Version:
4.46.0 - style-loader Version:
2.0.0
Expected Behavior
Style loader should respect the devtool option and not emit/embed sourcemaps to the JavaScript bundle when options like hidden-source-map are used.
Actual Behavior
Style loader emits CSS sourcemaps to the JavaScript bundle when devtool option is set to hidden-source-map.
style-loader doesn't work with the devtool option, you can look at code, we only inject them in style tags when they available https://github.com/webpack-contrib/style-loader/blob/master/src/runtime/injectStylesIntoStyleTag.js#L190 and style loader can't emit source maps because it is injected in DOM from JS
@alexander-akait thank you for clarification. It corresponds with my understanding. However, how do I remove sourcemaps from the generated bundle then? I guess when developers are using the hidden-source-map option, they expect that sourcemaps wouldn't be added to the generated code. The current behavior looks very counter-intuitive and even dangerous. Is it possible for this plugin to actually respect the value of the devtool option? I guess, it would be a better solution.
You can set
sourceMap: falsetocss-loaderright now
If I do this, it will remove sourcemaps both from the bundle.js and from the bundle.js.map file. However, I want sourcemaps to be preserved in external bundle.js.map file.
No, it will remove source maps only for CSS files inside JS files, bundle.js.map doesn't have sense here
@alexander-akait I'm not sure I follow. When I'm not using sourceMap: false in css-loader, I'm getting sourcemaps in two places: in the bundle.js and in the bundle.js.map. When I'm setting it to false, I'm not getting any sourcemaps for CSS at all. Could you elaborate on that please?
All I want is external sourcemaps for my CSS, so the source code wouldn't be published to production servers.
All I want is external sourcemaps for my CSS, so the source code wouldn't be published to production servers.
It is impossible, because CSS, source maps and runtime code for @import/url() inside bundle.js (i.e. in JS file)
As it's difficult to implement external sourcemaps for CSS and there is no really urgent need for this feature I've decided to just disable the sourcemaps on the css-loader level as suggested by @alexander-akait.
However, I still consider that it's an issue that the plugin ignores the devtool option when it comes to adding sourcemaps to the JavaScript bundle. This could lead to a source code leakage and overgrowth of the bundle size without authors really knowing about it.
We fixed support nosources https://github.com/webpack-contrib/css-loader/pull/1391, anyway hidden-source-map is impossible for style-loader due limitation, we have CSS code and source map in runtime, so style-loader always works as inline source map, in theory we can support hidden (i.e. do not add sourceMapURL), but there is no sense, because we don't have separated file, it is in runtime code