Sourcemaps not working #130

berlindave · 2018-10-25T15:50:03Z

Bug Report

Expected Behavior

Displaying the correct sources in Chrome Inspector.

Actual Behavior

Displaying just partly main scss file (which is wrong) and partly the compiled css file as sources.

Steps to Reproduce

npm start

> your-project@1.0.0 start /Users/dave/Documents/MAMP/htdocs/vor-druck.test/wp-content/themes/vordruck
> gulp

[17:44:32] Requiring external module @babel/register
[17:44:34] Using gulpfile ~/Documents/MAMP/htdocs/vor-druck.test/wp-content/themes/vordruck/gulpfile.babel.js
[17:44:34] Starting 'default'...
[17:44:34] Starting 'styles'...
[17:44:34] Starting 'vendorsJS'...
[17:44:34] Starting 'customJS'...
[17:44:34] Starting 'images'...
[17:44:34] Starting 'browsersync'...
[17:44:34] Starting '<anonymous>'...
[17:44:34] Finished 'browsersync' after 319 ms
[17:44:34] Finished 'styles' after 374 ms
[Browsersync] Proxying: http://vor-druck.test
[Browsersync] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.178.20:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ---------------------------------------
[17:44:36] gulp-notify: [Gulp notification]

✅  ===> CUSTOM JS — completed!

[17:44:36] Finished 'customJS' after 2.46 s
[17:44:38] gulp-notify: [Gulp notification]

✅  ===> VENDOR JS — completed!

[17:44:38] Finished 'vendorsJS' after 4.41 s
[17:44:41] gulp-imagemin: Minified 0 images
[17:44:42] gulp-notify: [Gulp notification]

✅  ===> IMAGES — completed!

[17:44:42] Finished 'images' after 7.98 s

node -v: v10.12.0
npm -v: 6.4.1
WPGulp V. 2.8.0

Then, specify:

Operating system: OSX 10.11.6
Browser and version (if relevant): Google Chrome (Mac) Version 69.0.3497.100

Any suggestions what's going wrong?

Besides this little flaw I'm really glad working with WPGulp!

The text was updated successfully, but these errors were encountered:

ahmadawais · 2018-10-27T03:20:02Z

Strange. Something must have broken in an update or so. Would love to receive a PR for this.

berlindave · 2018-11-01T15:10:16Z

I did some further testing. I guess the reason is a problem with gulp-autoprefixer (as described here). Removing the piping to autoprefixer solves the problem (except having a new one without autoprefixer).

// .pipe( autoprefixer( config.BROWSERS_LIST ) )

Alecto · 2018-11-11T19:25:46Z

the same problem.

parys-github · 2018-11-11T21:54:03Z

I noticed that I have exactly the same problem. SourceMap only recognizes the main style file. It does not recognize the structure of individual .scss files.
My specs.
node -v: v10.12.0
npm -v: 6.4.1
WPGulp V. 2.8.0
Operating system: OSX 10.13.6

shadtek · 2018-11-25T23:49:59Z

I did some further testing. I guess the reason is a problem with gulp-autoprefixer (as described here). Removing the piping to autoprefixer solves the problem (except having a new one without autoprefixer).
// .pipe( autoprefixer( config.BROWSERS_LIST ) )

@berlindave Are you trying to say that this is a temp fix? I tried commenting out the line like you suggested but that didn't do anything.

commwork · 2018-11-26T08:20:45Z

I had this problem a while ago, too. Some mixin was the problem. Maybe check that.

berlindave · 2018-11-26T08:46:56Z

@berlindave Are you trying to say that this is a temp fix?

Exactly.

@berlindave I tried commenting out the line like you suggested but that didn't do anything.

I'm sorry to read that. Very strange. That's what I got after commenting out that line
as described (compare to screenshot in the initial post):

commwork · 2018-12-10T11:45:39Z

Tried the new NPX Gulp now, too. Same problem. Doing this:
// .pipe( autoprefixer( config.BROWSERS_LIST ) )
Does not help.

Node: 9.11.2
NPM: 6.4.1
Newsest Chrome + FF
Windows 10

ahmadawais · 2018-12-10T12:50:09Z

Happy to accept a fix via PR. I am on vacations.

…

Walter-Chang · 2018-12-29T06:53:57Z

More clues:
At the bottom of the generated css files, there are 2 sourceMappingURL.
After removing the 2nd one manually, it works fine.
/# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjoz ...
/# sourceMappingURL=style.css.map */

The style.css.map will be changed if I comment .pipe( autoprefixer( config.BROWSERS_LIST ) ). So it seems to be something wrong of sources when enabling autoprefixer.
Before comment:
{"version":3,"sources":["style.scss","style.css","_normalize.scss"],....
After comment:
{"version":3,"file":"style.css","sources":["style.scss","variables-site/_variables-site.scss","variables-site/_colors.scss","variables-site/_typography.scss","variables-site/_structure.scss","variables-site/_columns.scss","mixins/_mixins-master.scss","_normalize.scss","typography/_typography.scss","typography/_headings.scss","typography/_copy.scss","elements/_elements.scss","elements/_lists.scss","elements/_tables.scss","forms/_forms.scss","forms/_buttons.scss","forms/_fields.scss","navigation/_navigation.scss","navigation/_links.scss","navigation/_menus.scss","modules/_accessibility.scss","modules/_alignments.scss","modules/_clearings.scss","site/secondary/_widgets.scss","site/_site.scss","site/primary/_posts-and-pages.scss","site/primary/_comments.scss","modules/_infinite-scroll.scss","media/_media.scss","media/_captions.scss","media/_galleries.scss"],

parys-github · 2019-01-08T23:16:54Z

berlindave, your solution working good but I suppose this is an only temporary solution because you losing all browsers prefixes. Honestly not really useful :-/
Does anyone try to figure out how to fix it?

tony-keller · 2019-02-06T10:45:54Z

I simply commented line 128 & 129 and things just worked :)
//.pipe( sourcemaps.write({ includeContent: false }) )
//.pipe( sourcemaps.init({ loadMaps: true }) )

Anything I should know with this quick fix?

mware · 2019-02-06T14:24:52Z

@AntonKeller fix worked for me on at least one test project.
Thx

berlindave · 2019-02-18T06:36:47Z

@AntonKeller Great, worked also for me in one test project so far!

berlindave · 2019-02-18T06:38:55Z

@parys-github

berlindave, your solution working good but I suppose this is an only temporary solution because you losing all browsers prefixes. Honestly not really useful :-/

Yes, of course, it's just what I call a "cheesy workaround", far away from a real solution.
Did you try the solution by @AntonKeller? #130 (comment)

keramzyt · 2019-03-22T09:21:25Z

Same here but solution by @AntonKeller is working fine and doesn't lose autoprefixer functionality.
Strange is that code even without fix works fine on Safari dev tools on OSX 10.14.3

mkreckovic · 2019-04-10T23:27:18Z

I had the same problem, and I solved it by adding .pipe(sourcemaps.identityMap()) after .pipe(sourcemaps.init()).

JakeMcilvenna · 2019-04-20T02:04:50Z

Works fine with firefox, but not with chrome. Tried all of the solutions above to no avail.

Elschnuppero · 2020-04-09T20:08:06Z

Doesnt work on FF nor Chrome. None of the above solutions worked unfortunately.

DeoThemes · 2020-08-02T03:47:10Z

Same here, none of the solutions worked for me. When I run npm start it compiles everything, but my browser doesn't see any of the source maps, it's simply pointing to styles.min.css. I think the problem here is that source map is created for regular unminified CSS, while there is not source map for a minified CSS.

UPD: After some debugging, what worked for me is this version, the only problem is that I can't pass array with the BrowserList to autoprefixer:

gulp.task( 'styles', () => {
	return gulp
		.src( config.styleSRC, { allowEmpty: true })
		.pipe( plumber( errorHandler ) )
		.pipe( sourcemaps.init() )
		.pipe(
			sass({
				errLogToConsole: config.errLogToConsole,
				outputStyle: config.outputStyle,
				precision: config.precision
			})
		)
		.on( 'error', sass.logError )
		// .pipe( sourcemaps.write({ includeContent: false }) )
		// .pipe( sourcemaps.init({ loadMaps: true }) )
		.pipe(postcss([autoprefixer] ))
		//.pipe( sourcemaps.write('./'))	
		.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
		.pipe( gulp.dest( config.styleDestination ) )
		.pipe( filter( '**/*.css' ) ) // Filtering stream to only css files.
		//.pipe( mmq({ log: true }) ) // Merge Media Queries only for .min.css version.
		.pipe( browserSync.stream() ) // Reloads style.css if that is enqueued.
		.pipe( rename({ suffix: '.min' }) )
		.pipe( minifycss() )
		.pipe( sourcemaps.write('./'))
		.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
		.pipe( gulp.dest( config.styleDestination ) )
		.pipe( filter( '**/*.css' ) ) // Filtering stream to only css files.
		.pipe( browserSync.stream() ) // Reloads style.min.css if that is enqueued.
		.pipe( notify({ message: '\n\n✅  ===> STYLES — completed!\n', onLast: true }) );
});

sstruemph · 2020-11-07T04:14:51Z

I am interested in helping resolve this bug. I use WPGulp on a daily basis and have tried following the suggestions here and the only fix basically breaks Autoprefixer. Unless I am not understanding and there's a workaround for Autoprifixer?

I tried re-writing the CSS task to troubleshoot and it quickly became a rabbit hole. Several packages needed to be added and swapped out. A new autoprefixer was needed. Etc. But I gave up because even then I couldn't get it to work.

Is there anything in particular that is needed to move this forward? I would love to have sourcemaps 💯

grayayer · 2021-01-08T03:26:18Z

As AntonKeller wrote

I simply commented line 128 & 129 and things just worked :)
//.pipe( sourcemaps.write({ includeContent: false }) )
//.pipe( sourcemaps.init({ loadMaps: true }) )

By passing false to includeContent, you're telling the sourcemaps to use the original files.

According to the gulp-sourcemaps documentation "Including the content is the recommended way, because it "just works". When setting this to false you have to host the source files and set the correct sourceRoot."

Since wpgulp isn't including a sourceRoot value, then of course this isn't going to work.

commenting out .pipe( sourcemaps.init({ loadMaps: true }) ) is also the right thing to do because we don't want to load existing source maps. We want to load the sourcemaps that we just created.

alirexa · 2021-05-14T08:54:15Z

This bug still exists and fix from @AntonKeller worked for me as well!
@ahmadawais I will make a PR for this soon!

Harry-Cowshed · 2022-03-17T14:19:30Z

Any one find an alt fix? @tony-keller fix didn't work for me.

datalooper · 2022-06-14T18:07:41Z

This maybe a bonehead move, but during development, I changed my functions.php to enqueue the pre-minified style.css and it worked.
wp_enqueue_style( 'styles', MY_THEME_URL . '/style.css', array(), MY_THEME_VER, 'all' );
I'll have to just change it back to minified for production.
Is there any reason the gulp file specifies the minification step after the sourcemap? It seems to mess things up.

ahmadawais added the 🐛 BUG label Oct 31, 2018

webdevsuperfast mentioned this issue Nov 1, 2018

Conflict sorce map with autoprefixer webdevsuperfast/bootstrap-for-genesis#14

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sourcemaps not working #130

Sourcemaps not working #130

berlindave commented Oct 25, 2018 •

edited

ahmadawais commented Oct 27, 2018

berlindave commented Nov 1, 2018

Alecto commented Nov 11, 2018

parys-github commented Nov 11, 2018

shadtek commented Nov 25, 2018

commwork commented Nov 26, 2018

berlindave commented Nov 26, 2018

commwork commented Dec 10, 2018

ahmadawais commented Dec 10, 2018 via email

Walter-Chang commented Dec 29, 2018 •

edited

parys-github commented Jan 8, 2019 •

edited

tony-keller commented Feb 6, 2019

mware commented Feb 6, 2019

berlindave commented Feb 18, 2019

berlindave commented Feb 18, 2019 •

edited

keramzyt commented Mar 22, 2019 •

edited

mkreckovic commented Apr 10, 2019

JakeMcilvenna commented Apr 20, 2019

Elschnuppero commented Apr 9, 2020 •

edited

DeoThemes commented Aug 2, 2020 •

edited

sstruemph commented Nov 7, 2020

grayayer commented Jan 8, 2021

alirexa commented May 14, 2021

Harry-Cowshed commented Mar 17, 2022

datalooper commented Jun 14, 2022

Sourcemaps not working #130

Sourcemaps not working #130

Comments

berlindave commented Oct 25, 2018 • edited

Bug Report

Expected Behavior

Actual Behavior

Steps to Reproduce

ahmadawais commented Oct 27, 2018

berlindave commented Nov 1, 2018

Alecto commented Nov 11, 2018

parys-github commented Nov 11, 2018

shadtek commented Nov 25, 2018

commwork commented Nov 26, 2018

berlindave commented Nov 26, 2018

commwork commented Dec 10, 2018

ahmadawais commented Dec 10, 2018 via email

Walter-Chang commented Dec 29, 2018 • edited

parys-github commented Jan 8, 2019 • edited

tony-keller commented Feb 6, 2019

mware commented Feb 6, 2019

berlindave commented Feb 18, 2019

berlindave commented Feb 18, 2019 • edited

keramzyt commented Mar 22, 2019 • edited

mkreckovic commented Apr 10, 2019

JakeMcilvenna commented Apr 20, 2019

Elschnuppero commented Apr 9, 2020 • edited

DeoThemes commented Aug 2, 2020 • edited

sstruemph commented Nov 7, 2020

grayayer commented Jan 8, 2021

alirexa commented May 14, 2021

Harry-Cowshed commented Mar 17, 2022

datalooper commented Jun 14, 2022

berlindave commented Oct 25, 2018 •

edited

Walter-Chang commented Dec 29, 2018 •

edited

parys-github commented Jan 8, 2019 •

edited

berlindave commented Feb 18, 2019 •

edited

keramzyt commented Mar 22, 2019 •

edited

Elschnuppero commented Apr 9, 2020 •

edited

DeoThemes commented Aug 2, 2020 •

edited