Singleton + sourcemap do not work together

[edi9999]

if I set "singleton&sourcemap" in my webpack options, it seems that sourcemap doesn't work anymore (eg no sourcemaps are generated at all)

It seems here : https://github.com/webpack/style-loader/blob/cff991ea90a416b44f4fa75c9cd6e1eb2d18b977/addStyles.js#L146 that both options cannot be used together.

Is this expected, and are they any workarounds around this ?

Without the singleton property, our pages css doesn't show well at the start, so we would like to use both sourcemap and singleton

[niksy]

Also looking for this. Is there any technical difficulty for implementing this?

[alexander-akait]

@niksy yes, it is technical difficulty, but if you have idea how to solve this PR welcome

[garygreen]

This is annoying because using the singleton option really helps improves rendering performance when developing as it avoids lots of layout thrashing. See https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing for more info. I'm not sure how that can be avoided except single style tags...

The only downside to the singleton option is (obviously no sourcemaps) but also slower HMR - it has to replace the whole of the singleton style tag and not just the style tag for the module that's been updated.

[alexander-akait]

It is limitation for singleton and can be unfortunately won't fix, we need update docs about it

[alexander-akait]

In theory it is possible, but it is create overload in runtime code because we need merge source maps and it is not cheap for client computer, also we don't recommend use singleton due it is only for old browsers, if you have problem with performance using multiple tags better open issue with reproducible example (also you should consider extracting css). Sorry, mark as won't fix. Anyway we are open for PRs and can revisit this.