Map path is being duplicated

[glenn2223]

My VSCode extension uses autoprefixer, on it someone posted an issue - glenn2223/vscode-live-sass-compiler#135

I made a very basic sample - zipped example

Below is my code

const result = await prefixer.process(css, {
    from: filePath, // 'c:\\Users\\Glenn\\Documents\\GitHub\\TESTING\\vscode-live-sass-compiler\\Issue 135\\themes\\hold\\sass\\hold\\style.scss'
    to: savePath, // 'c:\\Users\\Glenn\\Documents\\GitHub\\TESTING\\vscode-live-sass-compiler\\Issue 135\\themes\\hold\\css\\style.css'
    map: {
        inline: false,
        prev: map,
    },
});

// REMOVED FOR BREVITY

return {
    css: result.css,
    map: generateMap ? result.map.toString() : null,
};

The inputs are as follows:

• CSS: '.Test-Issue-135 {\n color: pink;\n}'
• MAP: '{"version":3,"sourceRoot":"","sources":["../sass/hold/style.scss"],"names":[],"mappings":"AAAA;EACI","file":"file:///c:/Users/Glenn/Documents/GitHub/TESTING/vscode-live-sass-compiler/Issue%20135/themes/hold/sass/hold/style.css"}'

And your outputs are:

• CSS: '.Test-Issue-135 {\n color: pink;\n}'
• MAP: '{"version":3,"sources":["../sass/sass/hold/style.scss","../sass/hold/style.scss"],"names":[],"mappings":"AAAA;EACI,WAAA;ACCJ","file":"style.css"}'

As you can see it seems to be adding "../sass/hold/style.scss" again and changing it to "../sass/sass/hold/style.scss"

[ai]

Seems like from and map.sources is not valid.

What is arguments which you passed to Sass compiler to get this source map?

[glenn2223]

This is the data I'm providing to the sass compiler

[ai]

The problem is that if you take from option and add sassMap.source to it, you will not get path to the Sass source.

It leads to sources duplication.

You need to fix paths, but I can’t help you where exactly is a mistake.

[glenn2223]

I'm sorry but I don't understand. From the docs, from is the source of the original file and to is the destination so from will never be navigable to any sassMap.source, whereas to will

[ai]

From the docs, from is the source of the original file

Origin file which you pass to PostCSS. Not origin file that you pass to Sass.

For your case it should be sassMap.file.

But Sass source map looks broken too. Try to add sassMap.source to sassMap.file, it will point to a wrong file.

Maybe you set a wrong root to Sass compiler.

[glenn2223]

Thanks for your help on this btw.

So it now doesn't add the duplicate invalid line but is adding a new source as the output file itself.

Map after SASS compilation: '{"version":3,"sourceRoot":"","sources":["../sass/hold/style.scss"],"names":[],"mappings":"AAAA;EACI","file":"style.css"}'

Map after autoprefixing: '{"version":3,"sources":["../sass/hold/style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,WAAA;ACCJ","file":"style.css"}'

As you can see it's added "style.css" as a source and also added new mappings ,WAAA;ACCJ

[ai]

Show example of input options to Sass and to PostCSS

[glenn2223]

Sass input

PostCSS input

const result = await prefixer.process(css, {
  from: savePath, //'c:\\Users\\Glenn\\Documents\\GitHub\\TESTING\\vscode-live-sass-compiler\\Issue 135\\themes\\hold\\css\\style.css'
  to: savePath, //'c:\\Users\\Glenn\\Documents\\GitHub\\TESTING\\vscode-live-sass-compiler\\Issue 135\\themes\\hold\\css\\style.css'
  map: {inline: false, prev: map,//'{"version":3,"sourceRoot":"","sources":["../sass/hold/style.Scss"],"names":[],"mappings":"AAAA;EACI","file":"style.css"}'
  },
});

[ai]

It could be because of the parts which was not marked by Sass in their source map.

Investigate both source map by https://sokra.github.io/source-map-visualization/

[glenn2223]

Edit: Removed source map comment reference in CSS as this was added by code (no difference though)

So the source map provided by SASS gave me the below

And the source map after running it through PostCSS gave me this

It's like PostCSS is picking up on the ~commented map file reference~ last end tag (}) and mapping it 🤷‍♂️

[ai]

Yeap, the problem is }. Sass doesn’t add mapping or it. This is why PostCSS doesn’t know where to map it and map to style.css.

[glenn2223]

Sorry, just so I'm clear.

So you're saying that, technically, the map data that sass/dart-sass is creating is invalid? Or should PostCSS be ignoring these "unknowns"

[ai]

So you're saying that, technically, the map data that sass/dart-sass is creating is invalid?

Not. It is correct, but it is not full.

[glenn2223]

Not. It is correct, but it is not full.

Is there a way of stopping PostCSS from guessing where these lines belong, causing unnecessary bloat to files?

[ai]

Is there a way of stopping PostCSS from guessing where these lines belong, causing unnecessary bloat to files?

You can write a JS script which will clean source map.

But I suggest you to ignore this problem. We spend too many time for this small issue.