Sourcemaps no longer working as expected with Sage update

sage
23

Thanks for posting this. It fixed the problem for me, at least.

24

iā€™ve applied the fix from @drew and itā€™s better but not working as it should. when i run gulp i get the source maps from bootstrap files but the reference line number is wrong. IE: <body> element is referenced as sacaffolding.less:24 when it should be sacaffolding.less:27. so itā€™s off by 3 lines. but it gets the file right. but when using theme .less files like _global.less than the source maps reference completely the wrong file: IE: if i add background-color: red; on <body> in _global.less the source map points to _grid.less:4.

25

Any other possible fixes for this? @drewā€™s fix didnā€™t work for me. Also I will add that having added fontawesome and slick.js via bower, in my console it shows the filename as font-awesome.css or slick.css depending on which one was installed via bower first.

Photo of my console below.

26

Just thought I would follow up again here. I tried doing a plain vanilla install just to make sure it wasnā€™t some configuration change I made. Here are the steps:

  1. Install WordPress
  2. Pull Sage
  3. npm install
  4. bower install
  5. Update assets/manifest.json with local url
  6. Run gulp && gulp watch
  7. Change a style via layouts/_header.less (in this case the background
    of .banner)
  8. Inspect it in chrome
  9. Hang head as source maps do not display the original less file

I badly need to get this working. I just started my first major project using sage and not roots and this is really causing me issues. Any help would be appreciated.

27

Perhaps this issue is the reason? All the partial less files do start with underscores. I have no clue.

28

Since Sage v8.10, thereā€™s no more Sass sourcemap! Itā€™s being generated inside dist > styles. But, Web Inspector just sees main.css.

29

iā€™ve noticed that my main.css file has the whole source map file at the bottom encoded with base64 in the sourceMappingURL, and after that there is another sourceMappingURL with the map file name. here is the file. after the minfied css there is a huge block of code. i ran it to base64 decode and realized it was the source map. itā€™s on two sites iā€™m working on now that use Sage 8.0.1 and i pulled the latest version of Sage (8.1.0.) and all have the same ā€œissueā€. so my question is: is this an issue or is this how itā€™s supposed to be? i know that older Roots versions didnā€™t compile source maps like that and that the sourceMappingURL only referenced the file name. i tried gulp and gulp watch and both have the same results. gulp --production compiles normal minified styles without source maps (i presume this is expected because source maps are disabled on gulp --production). iā€™m on Windows 7 (64 bit), node 0.12.0, npm 2.6.0, bower 1.3.12, gulp 3.8.11. alsoā€¦ donā€™t know if this is related in some way to this post.

30

Iā€™m not seeing this on a project I am using Sage on. Last line is /*# sourceMappingURL=main.css.map */ with CSS above it in dist/main.css.

Have you modified the gulpfile at all?

31

no. i didnā€™t modify the file at all on all the sites. i also have the line /*# sourceMappingURL=main.css.map */ but i just have one line before that but instead of the map file name reference i have the source map encoded. it looks like this: /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjoz ... */. iā€™m also experiencing the issue with source maps not referencing the right file and line number that i posted on the topic i referenced on my first post.

32

Looks like itā€™s not happening on the project Iā€™m working on, but it is happening on a fresh Sage install. Now to investigate

33

Since this looks like an actual bug, Iā€™ve opened it on Github: https://github.com/roots/sage/issues/1386

34

Hey all,

Iā€™m investigating a fix that allows us to use csswring and still have correct sourcemap functionality. I need test data however. If you guys could please send me your stylesheets or reduced testcases either here or in a private message that will help to debug. Worst case scenario I just write my own css minifier and publish it lol.

35

hey @austin, i can send whatever you need. just to point out that i tried a new Sage (8.1.0) install with no edits in the styles. I just compiled the CSS and JS with no edits in .less other than the default ones that Sage has (grid, brand ā€¦). so i donā€™t think anything i do in the styles has any effect on the issue. here are the files (iā€™ve uploaded both assets and dist folders). if you need anything else let me know. thnx for your help.

1 Like
36

@ben has a fix here:

trying to debug. disabling pleeeaseā€™s minification makes the sourcemap work as expected:

  .pipe($.pleeease, {
    minifier: false,
    autoprefixer: {
      browsers: [
        'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4',
        'opera 12'
      ]
    }
  })
37

It seems to fix it but first delete the old source maps.

38

doesnā€™t work for meā€¦ tried disabling pleeeaseā€™s minification (with and without and deleting the old source maps). it does change how the issue behaves. iā€™ve posted more details on the GitHub issue page.

39

Having same issue withe sage and lessā€¦
Adding ā€œminifier: false,ā€ doesnā€™t fix but let you inspect less files with wrong line numbersā€¦
We really need help from Roots guys,
this is a very embarrassing issue.
Thanks

40

Weā€™re not embarrassed by Sage at all. In fact weā€™re all really proud of whatā€™s been achieved. Sage brings together umpteen different tools (most with multiple additional dependencies) and modernises WordPress theme development in a way no other starter theme can.

As with any complex software it relies on a multitude of dependencies, so the trade off is you will occasionally get issues that canā€™t be resolved instantly. This doesnā€™t mean weā€™re not working on it. It just means that we havenā€™t had the time in amongst our full time jobs to fix it yet.

If you need source maps working instantly, just remove the gulp-pleeease task from the gulp file and handle prefixing yourself.

5 Likes
41

Sorry for my poor english I was only saying I am embarrassed for my work on CSSā€¦
I was not saying you were embarrassed for for Sage!
I worked with roots for many projects so I know that you can be proud of Roots Sage Bedrock & coā€¦
I understand you need time to fix bugs and answer issues.
I spent time trying to make this works without success and I just asked your help, simply because you built the app.

42

Anyone following this thread might also want to subscribe to notifications on https://github.com/roots/sage/issues/1386

Latest update: switching to pleeease 3.2.0 works for me