Webpack is emitting incorrect sourcemaps for Sass

[rhaglennydd]

So, I've been tearing my hair out over this problem with Webpack generating incorrect sourcemaps for my Sass files. When I inspect in developer tools (or use a tool like this one), the generated CSS maps to the wrong source files. This only seems to happen with my own code, not third-party Sass files (I'm including Bootstrap in my project). I've definitely narrowed the issue down to being Webpack-related: When I compile from the command line with (Dart) Sass, the emitted sourcemap is correct. I've setup an example project to prove this. The Webpack configuration there is nearly identical to my actual project's config (except the actual project's config also compiles JS, images, fonts, etc.). Compare the output in the dist directory when you run npm run build to when you run sass --embed-sources -I ./node_modules/ src/scss/app.scss:dist/app.css, there's definitely a difference in the main sourcemap. If it matters, you'll notice that I'm using @use directives instead of @import (as opposed to Bootstrap's outdated Sass code).

[alexander-akait]

Looks like there's a bug in postcss, because if you will use:

{
               type: "asset/resource",
               test: /\.s?css$/,
               generator: {
                   binary: false,
                   filename: pathInfo => path.basename(pathInfo.filename).replace(/\.scss/gi, ".css")
               },
               use: [ 
                   {
                       loader: "sass-loader",
                       options: {
                           sassOptions: {
                               quietDeps: true,
                               silenceDeprecations: [
                                   "import",
                                   "color-functions",
                                   "global-builtin",
                                   "mixed-decls",
                               ]
                           },
                           sourceMap: true,
                       },
                   },
               ],
           },

i.e. ask webpack generate scss like an asset it will contain the correct source maps, css-loader and mini-css-extract-plugin do not touch the original maps, but only pass them to postcss.

For debug goals - comment postcss-loader and put a comment - https://github.com/webpack-contrib/css-loader/blob/master/src/index.js#L176C3-L199C4

console.log('prev', map.mappings);
try {
    result = await postcss(plugins).process(content, {
      hideNothingWarning: true,
      from: resourcePath,
      to: resourcePath,
      map: options.sourceMap
        ? {
            prev: map ? normalizeSourceMap(map, resourcePath) : null,
            inline: false,
            annotation: false,
          }
        : false,
    });
  } catch (error) {
    if (error.file) {
      this.addDependency(error.file);
    }

    callback(
      error.name === "CssSyntaxError" ? syntaxErrorFactory(error) : error,
    );

    return;
  }
console.log('generated', result.map.toJSON().mappings);

And you will see that mappings is wrong at all...

[alexander-akait]

/cc @romainmenke @ai

[ai]

Can somebody create a small map file after Sass and after PostCSS? We can compare input/output to see who break source map.

[alexander-akait]

@rhaglennydd That intresting because if you set sassOptions.style: "expanded" you will get the correct mappings

/cc @nex3 Is style: "compressed" not compatible with sourcemaps?

[nex3]

It should be totally compatible. We don't change anything about how we generate source maps for different output styles.

[alexander-akait]

@nex3 weird, because when we use expanded, sourcemaps works good, but with compressed no...

[nex3]

Can you reproduce this with a stand-alone call to the Sass API?

[rhaglennydd]

Sorry for taking awhile to get back to this. I am now getting correct sourcemaps after specifying "expanded" for sassOptions.style. I have updated the GitHub project.