1438238 - CSS source mapping wrong

Status: RESOLVED INCOMPLETE

(DevTools :: Inspector: Rules, defect, P3)

Description

[imarkthomson]

Attachment: Screenshot_998cf9.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180214111549

Steps to reproduce:

When viewing a site I'm developing (not yet available to public), Firefox is reporting the incorrect file name as the source map. Safari and Chrome work fine.

Problem occurs in regular release, current nightly (60.0a1) and developer version.


Actual results:

The wrong file was reported as containing the relevant CSS rule.


Expected results:

The right file (and line) should be reported.

Comment 1

[Tom Tromey :tromey]

Without more information it's hard to diagnose this problem.
Could you give us the source map file?  That might help.
Knowing the location of the wayward rule in the generated css file would also be good;
or maybe you could also attach that file as well?

Comment 2

[justwebman]

Hi, I encountered this problem too.

I just configured the Gulp to compile some SASS files and I noticed that some rules from source map do not appear in the Firefox inspector. Instead, in Chrome all the rules in the source map are displayed.

For example, I have the main file frontend.css (compiled with gulp). The next rules are both from "__cart.scss" file.

Firefox:

.cart-collaterals .shipping td ----> frontend.css:4703
.cart-collaterals td ----> __cart.scss:308

Chrome:

.cart-collaterals .shipping td ----> __cart.scss:308
.cart-collaterals td ----> __cart.scss:304

Also the rule ".cart-collaterals td" has different line number in Firefox ( line 308 ) compared to Chrome ( line 304 ).

Screenshot -> https://webcompat.com/uploads/2020/1/3590232e-201d-4d23-b541-b660679251a7.jpeg

---

Here you can find a part of my local website for debugging: http://sourcemaps.craftit.ro/

It contains all the scss, css and sourcemap.

I noticed that the bug does not only appear on the nested css, or by other patterns. It seems that the correct rules are displayed randomly.

The sourcemap file compiled with yuicompressor works correctly.

Here is my Gulp SASS compilation script:

<------ start code ------->
const { src, dest } = require( 'gulp' );
const sass = require( 'gulp-sass' );
const argv = require('yargs').argv;
const filename = ( argv.filename === undefined ) ? false : argv.filename;

const cssPath = 'src/css/' + filename + '/';
const cssDestPath = 'assets/css';

// Compile the SASS files
function jwmCompileStyle() {
if ( filename === false ) {
return console.log( 'The SCSS filename is not defined!' );
}

return src( cssPath + filename + '.scss', { sourcemaps: true } )
.pipe( sass().on( 'error', sass.logError ) )
.pipe( dest( cssPath, { sourcemaps: '.' } ) );

}

exports.compilestyle = jwmCompileStyle;
<------ end code ------->

In the above code I used the src() built-in sourcemaps.

I also tried to include separately the gulp-sourcemaps plugin but I encountered the same bug.

Thanks !

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

A needinfo is requested from the reporter, however, the reporter is inactive on Bugzilla. Closing the bug as incomplete.

For more information, please visit auto_nag documentation.