search

webpack-contrib / style-loader

Style Loader
MIT License
1.65k stars 473 forks source link

Does not apply objectUrl for `<link>` tag when setting `sourceMap: true` #265

Closed Aqours closed 5 years ago

Aqours commented 6 years ago

Move from: css-loader with sourceMap: true cause adding style tag delayed

Actually, above issue is caused by style-loader.

https://github.com/webpack-contrib/style-loader/blob/378e90637f1c2c30bff026d7f92bdc82d9d4ecb8/lib/addStyles.js#L354-L363

I have an idea to resolve this issue, but it's not perfect. Consider to apply this solution.

My solution code: Using code link.href = 'data:text/css;base64,' + btoa(encodeURIComponent(css)); replace line 363.

Test:

alexander-akait commented 6 years ago

@Aqours thank for issue, maybe best to wait when bug was fixed in firefox than change right source code?

Aqours commented 6 years ago

@evilebottnawi can you provide a flag(e.g: options.debug: true) to enable this feature? so we can debug less/sass source code.

alexander-akait commented 6 years ago

@d3viant0ne what do you think about this issue?

WraithKenny commented 6 years ago

I stumbled across this issue, not because of loading delays, but because the sourcemap doesn't actually work. In your tests, was the sourcemap actually loading, or just the stylesheet?

In my test, the stylesheet loads, but the styles in the firefox inspector point to the blob:null/ location, instead of the source file name. Additionally, it doesn't load the source file in the panel when you click on it.

This works correctly in Chrome. It looks like mozilla closed the referenced ticket as invalid. Maybe worth revisiting it?

(edit: or, it might be because I'm loading the html from file:/// Maybe Firefox just breaks for some reason in that case...)

wxlworkhard commented 6 years ago

Why use <link> replace <style> when sourceMap: true ? <link> cannot load url() asset on Chrome.

Why not just use

css += "\n/*# sourceMappingURL=data:application/json;base64," +
            btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";

and 

styleElement.appendChild(document.createTextNode(css));

in addStyles.js file. This is simple and have no problem.