less-plugin-clean-css
less-plugin-clean-css copied to clipboard
less
Source map reference fails in Edge/IE 11
Problem
Microsoft Edge doesn't attempt to load the .map file due to the location of the source map comment in the CSS output.
This is somewhat a known phenomenon (with both CSS and JavaScript): https://stackoverflow.com/q/34687049/404623
Reproduce
main.less
html{color:red}
body{color:blue}
index.html
<!DOCTYPE html>
<link rel=stylesheet type=text/css href=main.css>
<p>Hello world</p>
Run lessc with the clean-css plugin:
lessc --source-map --clean-css main.less main.css
Output (main.css)
html{color:red}body{color:#00f}/*# sourceMappingURL=main.css.map */
Upon loading index.html in Microsoft Edge and opening Debugger in the F12 Developer Tools, there is no request made to the server for the map file, and inspect element shows main.css references in the Styles panel instead of main.less
Expected results
Edge should attempt to load the main.css.map file and refer to the code in the main.less file in the Styles panel in the F12 Developer Tools.
Expected output of main.css (note the newline)
html{color:red}body{color:#00f}
/*# sourceMappingURL=main.css.map */
Manually editing the files to add the newline character fixes the problem but defeats the purpose of the build tool.
The author of clean-css has corrected the issue, however it seems that this plugin concatenates the results of clean-css as indicated in the comment from the cross-referenced issue.
Would it be possible to prepend a newline character (os.EOL) when concatenating with the sourcemap?
Would it be possible to prepend a newline character (os.EOL) when concatenating with the sourcemap?
It is I guess.