Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #55, issue with sourcemap output #61

Closed
wants to merge 2 commits into from
Closed

Fix #55, issue with sourcemap output #61

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c002efc
Fix #55, issue with sourcemap output
Saturate Mar 8, 2016
6067f16
Add missing semicolon
Saturate Mar 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ var through = require('through2');
var applySourceMap = require('vinyl-sourcemaps-apply');
var autoprefixer = require('autoprefixer');
var postcss = require('postcss');
var path = require('path');

module.exports = function (opts) {
return through.obj(function (file, enc, cb) {
Expand All @@ -22,10 +23,16 @@ module.exports = function (opts) {
from: file.path,
to: file.path
}).then(function (res) {
var map;
file.contents = new Buffer(res.css);

if (res.map && file.sourceMap) {
applySourceMap(file, res.map.toString());
map = res.map.toJSON();
map.file = file.relative;
map.sources = [].map.call(map.sources, function (source) {
return path.join(path.dirname(file.relative), source);
});
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 :-)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They added it in this commit: postcss/gulp-postcss@9feb6d4#diff-168726dbe96b3ce427e7fedce31bb0bc to fix the relative sourcemaps.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
image

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:

image

Hope this makes a bit more sense.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree it's an issue. I'm just saying you're trying to fix it in the wrong place.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I linked the issue and this PR on the postcss issue (postcss/postcss#240), the information within this PR might be useful.

applySourceMap(file, map);
}

var warnings = res.warnings();
Expand Down