Sourcemaps not working when not enough css to split
entozoon opened this issue · 16 comments
When there isn't quite enough CSS for it to split to separate files, the sourcemaps outputs only a small amount of empty base64 data that decodes to:
{"version":3,"file":"site.min.css","sources":["site.min.css"],"sourcesContent":[]}
Whereas when adding more CSS to the point it splits into a separated blessed file, the sourcemaps in both generated files are just fine.
Hard to tell if it's an issue with gulp-bless or gulp-sourcemaps but removing bless entirely from my gulp stack makes sourcemaps work again so presumably it's an issue here.
I have a hunch that this is related to #33. Do you happen to have a example project I can take a look at? Don't worry if you don't I will try to debug it bit later when I have some free time.
Not a public project as such but you're welcome to look through my gulpfile -
https://github.com/entozoon/lapis-compiler/blob/master/gulpfile.js#L153
I tried to use the fixing_sourcemaps branch with the command mentioned:
#33 (comment)
But it didn't play nice:
map.file = fileToAddTo.relative;
^
TypeError: Cannot set property 'file' of undefined
at addSourcemap (X:\project\node_modules\lapis-compiler\node_modules\gulp-bless\i
ndex.js:60:26)
Let me know if I can be of more help, and thanks for looking into it :)
I think I know what happened, I will work on a fix that is based on fix for #33
Ok I lied, I didn't make my fix on top of the fix for #33 as I found some other issue within the fix. I put my fix in base on master instead.
@entozoon if possible can you get the fix from https://github.com/alvinlin123/gulp-bless.git and see if it solves your problem (sorry I don't have write access to the main repo yet ...).
Hello, I've tried a few things but to no avail I'm afraid.
Perhaps I need a specific branch? I separately tried the following in my gulpfile's dependencies (and npm update of course)
"gulp-bless": "git://github.com/alvinlin123/gulp-bless.git",
"gulp-bless": "git://github.com/alvinlin123/gulp-bless.git#fixing-issue-36",
They both compile but no change, i.e. no sourcemap output
Hmm okay, after a btg of more trial and error, I found that gulp-bless does not play well with gulp-concat ... need to look further why.
I wish I could say it was working but I'm afraid not :(
If I have scss that compiles to a single 185kb file (unminified), it only contains this sourcemap at the end:
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2l0ZS5taW4uY3NzIiwic291cmNlcyI6WyIvc3JjL3Njc3MvU2l0ZS9zaXRlLm1pbi5jc3MiXSwic291cmNlc0NvbnRlbnQiOltdfQ== */
However if I cut and paste a bunch of @imports such that it splits to two separate files - 39kb and 257kb, they both then contain the full sourcemap data.
(Without including gulp-bless, they both compile with appropriate sourcemaps)
Perhaps my gulp stack is ordered wrongly? It essentially boils down to:
gulp.src(source)
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: 'expanded' }))
.pipe(concat(filename))
.pipe(autoprefixer())
.pipe(bless({ imports: true })
.pipe(sourcemaps.write())
Hi @entozoon, I tried with similar setup you have and used the gulp-bless from git://github.com/alvinlin123/gulp-bless.git#fixing-issue-36 branch and I was able to get correct source map at the end of the css file.
Can we try this? I have created a test project at https://github.com/alvinlin123/gulp-bless-issue36-sample can you clone that project and inspect the gulpfile.js and css/*.scss? Let me know if they are similar to what you have. You can run the code by doing:
npm installgulp- Once it's done there should be a newly created
processed-cssdirectory that contains a css file calledmerged.css, which contains correct source map.
One thing to note is in package.json I have dependency of "gulp-bless": "git://github.com/alvinlin123/gulp-bless.git#fixing-issue-36"
It would help if you can fork the project with your modified gulpfile.js and scss files to demonstrate the problem if possible :)
I don't think it matter, but just FYI I am using Node v6.9.1
Thank you very much for this, I massively appreciate the effort you're going to!
I've cloned it, and ran the commands exactly as you suggest.. and it totally works (Node v7.0.0).
Well, it didn't work with yarn install at first (I guess it had an older version cached) but npm install did.
So I reckon you've fixed it!
It doesn't quite work right with my lapis-compiler setup but that's no doubt a fault of my own as it's definitely outputting a bunch of sourcemap code now, so that's awesome. I'll close the issue and thanks again, you've made my life a lot easier.
No problem let me know if you encounter any other issue.
@entozoon just FYI I have release this fix to version 3.2.1 on npm, feel free to use that version instead of my personal branch :)
Wonderful, thanks again :D
So sorry to re-open the issue, you must be sick of me by now!
I've looked closer at our test repo (forked here:)
https://github.com/entozoon/gulp-bless-issue36-sample
And although it is outputting sourcemap data, it's actually wrong.
If you look at the index.html and inspect element (chrome with sourcemaps enabled) you can see that it shows the css properties line numbers in the compiled css file, rather than their source sass files.
e.g. in this repo, stuff like:
[merged.css:5301]
body {
color: tomato;
}
But without using bless in the gulpfile, it shows the proper output of:
[child.scss:1]
body {
color: tomato;
}
Sorry for pointing it out and, again i'm not sure if it's gulp-bless or gulp-sourcemaps.. or the gulpfile ordering itself that's the issue.
I can alternate between using either sourcemaps/bless separately in dev/production so it's not a bother :)
No worry man, I'm glad you report the problem. I have been wondering how bless/gulp-bless when stack it with gulp-concat and sounds like it's not working as expected heh.
I will take a look. However I am going to close this issue and create a new one so we keep one problem to one issue :)