Fix #55, issue with sourcemap output #61
Conversation
This fixes issue sindresorhus#55 for me with css generated from less. Code adapted from `gulp-postcss`
| map.file = file.relative; | ||
| map.sources = [].map.call(map.sources, function (source) { | ||
| return path.join(path.dirname(file.relative), source); | ||
| }); |
There was a problem hiding this comment.
Why is this needed? We already pass the file.path to the postcss function. Seems rather like an issue with either postcss or vinyl-sourcemaps-apply.
There was a problem hiding this comment.
It works without, but the reason gulp-postcss is doing it is that it's missing the path. If we don't do this, all files will look like they are coming from the root of the website.
I did it mostly due to gulp-postcss doing the same thing, and they are maintaining both postcss and gulp-postcss seeming that they think it's the right solution. But one can argue that the problem is postcss.
I can remove it if you like :-)
There was a problem hiding this comment.
They added it in this commit: postcss/gulp-postcss@9feb6d4#diff-168726dbe96b3ce427e7fedce31bb0bc to fix the relative sourcemaps.
There was a problem hiding this comment.
No, I mean the whole change. Why is any of this needed. It should just work. I don't think it makes sense to work around stuff here. It should rather be fixed upstream so it benefits all consumers.
There was a problem hiding this comment.
If it's a requirement to make the sourcemap paths relative, I think it's the job of https://github.com/floridoo/vinyl-sourcemaps-apply which already get's the file object and should handle any sourcemap related task.
There was a problem hiding this comment.
Sorry for being a bit unclear. Without these changes it's simply not working right now.
Right now it only keeps the autoprefixer sourcemaps, and throws away the LESS ones, it outputs this:
version: 3,
sources: [
"top-navigation.css"
],
names: [ ],
mappings: "..",
file: "/Styles/Domain/Navigation/top-navigation.css",
sourcesContent: [
"..."
],
sourceRoot: "/source/"
}
Giving this in DevTools, that's not useful at all since it's not the real source.
After this patch it gives this:
version: 3,
sources: [
"/Styles/Domain/Navigation/top-navigation.css",
"/Styles/Domain/Navigation/top-navigation.less",
"/Styles/TextMixins.less",
"/Styles/BoxMixins.less"
],
names: [ ],
mappings: "..",
file: "/Styles/Domain/Navigation/top-navigation.css",
sourcesContent: [
"...",
"...",
"...",
"..."
],
sourceRoot: "/source/"
}
that's translated to the real source in DevTools:
Hope this makes a bit more sense.
There was a problem hiding this comment.
I agree it's an issue. I'm just saying you're trying to fix it in the wrong place.
There was a problem hiding this comment.
I linked the issue and this PR on the postcss issue (postcss/postcss#240), the information within this PR might be useful.
This fixes issue #55 for me with css generated from less. Code adapted from
gulp-postcss