Source map reference fails in Edge/IE 11

[RinkAttendant6]

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

I also tried opening an issue at less/less-plugin-clean-css#21, but was redirected here.

Environment

• clean-css version - npm ls clean-css: 3.4.26
• node.js version - node -v: 0.10.3
• operating system: Windows 10

Configuration options

Not applicable. Default options passed by lessc I assume.
I am using this plugin: https://github.com/less/less-plugin-clean-css

Input CSS

main.less

html{color:red}
body{color:blue}

without the less-plugin-clean-css plugin it generates the following CSS, which I assume is the input css:

html {
  color: red;
}
body {
  color: blue;
}
/*# sourceMappingURL=main.css.map */

Actual output CSS

html{color:red}body{color:#00f}/*# sourceMappingURL=main.css.map */

Upon loading index.html in Microsoft Edge (which refers to main.css) 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 output CSS

html{color:red}body{color:#00f}
/*# sourceMappingURL=main.css.map */

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.
Manually editing the files to add the newline character fixes the problem but defeats the purpose of the build tool.

[jakubpawlowicz]

Thanks @RinkAttendant6 for flagging it. This is an easy fix.

[jakubpawlowicz]

Quick question: clean-css can only control formatting of source map comment in the output CSS file (let's call it main.min.css). By saying "Manually editing the files ..." do you also mean editing CSS file generated from less file (main.css)? If so then it's beyond what clean-css does and it would also need to be handled in Less.

[RinkAttendant6]

Quick question: clean-css can only control formatting of source map comment in the output CSS file (let's call it main.min.css). By saying "Manually editing the files ..." do you also mean editing CSS file generated from less file (main.css)? If so then it's beyond what clean-css does and it would also need to be handled in Less.

No the intermediate file (main.css) appears to be fine when I tried it. It was the final output that I needed to add the newline in to make it work.

Also is there any chance that this can be backported into the 3.x branch, as I'm not sure when the less plugin will be ready to support clean-css 4.x?

[jakubpawlowicz]

Gotcha!

No problem backporting the change to 3.4.

[jakubpawlowicz]

In 4.x the issue belongs to clean-css-cli repo - @RinkAttendant6 please note that in your case it's probably due to be solved in less-plugin-clean-css since it uses clean-css API so gets output in two pieces - styles and source map separately and then concatenates the result - see https://github.com/less/less-plugin-clean-css/blob/master/lib/clean-css-processor.js#L55

The fix to CLI is already on 3.4 branch.

[jakubpawlowicz]

Fixed in 3.4.27.