bug(source-map): incorrect paths in generated source maps #995

Kristinita · 2022-09-15T18:20:14Z

1. Summary

PurgeCSS generates incorrect paths for the value of "sources" source map key.

In my MCVE PurgeCSS generates

"sources":["stylus/KiraStyles.styl"]

instead of correct:

"sources":["../stylus/KiraStyles.styl"]

2. MCVE

I can’t reproduce the problem on PurgeCSS CLI, I get the error error: unknown option '--sourceMap'. Since no information about this option in the CLI documentation, it’s possible that it isn’t currently supported by the CLI. Therefore, Grunt in my MCVE.

In my environment, I compile Stylus to CSS, and then apply PurgeCSS to my CSS.

You can see this MCVE configuration on the KiraPurgeCSSSourceMapPath folder of my GitHub repository for debugging and demonstration.

Gruntfile.coffee:

module.exports = (grunt) ->

	grunt.loadNpmTasks('grunt-contrib-stylus')
	grunt.loadNpmTasks('grunt-purgecss')
	grunt.loadNpmTasks('merge-source-maps')

	grunt.initConfig

		stylus:
			options:
				sourcemap:
					comment: true
					inline: true
			compile:
				files:
					"css/KiraStyles.css": "stylus/KiraStyles.styl"

		purgecss:
			options:
				content: ["KiraHTML.html"]
				sourceMap: true
			target:
				files:
					"css/KiraStyles.css": ["css/KiraStyles.css"]

		'merge-source-maps':
			target:
				files:
					"css/KiraStyles.css": ["css/KiraStyles.css"]

KiraHTML.html:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Kira sourcemaps HTML MCVE</title>
        <link rel="stylesheet" href="css/KiraStyles.css">
    </head>
    <body>
    	Kira Goddess!
    </body>
</html>

stylus/KiraStyles.css:

body
	color red

.KiraNonExistentClass
	color green

The part of the .travis.yml:

install:
- npm install -g grunt-cli
- npm install

script:
- grunt stylus --verbose --stack
- nl css/KiraStyles.css
- grunt purgecss --verbose --stack
- nl css/KiraStyles.css
- grunt merge-source-maps --verbose --stack

3. Source map

3.1. Correct — Stylus

Stylus compiled this CSS file (Travis link):

body{color:#f00}.KiraNonExistentClass{color:#008000}/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3N0eWx1cy9LaXJhU3R5bGVzLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsS0FDQyxNQUFNLEtBRVAsc0JBQ0MsTUFBTSIsImZpbGUiOiJLaXJhU3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJvZHlcblx0Y29sb3IgcmVkXG5cbi5LaXJhTm9uRXhpc3RlbnRDbGFzc1xuXHRjb2xvciBncmVlblxuIl19 */

Decoded base64:

{"version":3,"sources":["../stylus/KiraStyles.styl"],"names":[],"mappings":"AAAA,KACC,MAAM,KAEP,sBACC,MAAM","file":"KiraStyles.css","sourcesContent":["body\n\tcolor red\n\n.KiraNonExistentClass\n\tcolor green\n"]}

../stylus/KiraStyles.styl is the correct path to my Stylus file.

3.2. Incorrect — PurgeCSS

PurgeCSS create this CSS file (Travis link):

body{color:#f00}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWx1cy9LaXJhU3R5bGVzLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsS0FDQyxVQUFNIiwiZmlsZSI6InRvLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJvZHlcblx0Y29sb3IgcmVkXG5cbi5LaXJhTm9uRXhpc3RlbnRDbGFzc1xuXHRjb2xvciBncmVlblxuIl19 */

Decoded base64:

{"version":3,"sources":["stylus/KiraStyles.styl"],"names":[],"mappings":"AAAA,KACC,UAAM","file":"to.css","sourcesContent":["body\n\tcolor red\n\n.KiraNonExistentClass\n\tcolor green\n"]}

stylus/KiraStyles.styl is the incorrect path to Stylus file.

I use merge-source-maps for merging separate source maps on each step of compilation. merge-source-maps throws an error due to an invalid value of "sources" field (Travis link):

Error: ENOENT: no such file or directory, open '/home/travis/build/Kristinita/SashaGruntDebugging/css/stylus/KiraStyles.styl'

    at Object.openSync (node:fs:599:3)

    at Object.readFileSync (node:fs:467:35)

    at new SourceFile (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/merge-source-maps/lib/source_file.js:22:38)

    at /home/travis/build/Kristinita/SashaGruntDebugging/node_modules/merge-source-maps/lib/source_file.js:108:21

    at Array.map (<anonymous>:null:null)

    at SourceMap._updateMap (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/merge-source-maps/lib/source_file.js:107:59)

    at new SourceMap (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/merge-source-maps/lib/source_file.js:100:14)

    at SourceFile.getMapFromUrl (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/merge-source-maps/lib/source_file.js:56:16)

    at new SourceFile (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/merge-source-maps/lib/source_file.js:41:30)

    at mergeFile (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/merge-source-maps/lib/index.js:14:22)

    at /home/travis/build/Kristinita/SashaGruntDebugging/node_modules/merge-source-maps/lib/index.js:51:48

    at Array.forEach (<anonymous>:null:null)

    at Object.merge (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/merge-source-maps/lib/index.js:51:15)

    at Object.<anonymous> (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/merge-source-maps/tasks/merge.js:18:25)

    at Object.<anonymous> (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/grunt/lib/grunt/task.js:252:15)

    at Object.thisTask.fn (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/grunt/lib/grunt/task.js:70:16)

    at Object.<anonymous> (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/grunt/lib/util/task.js:294:30)

    at Task.runTaskFn (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/grunt/lib/util/task.js:244:24)

    at Task.<anonymous> (/home/travis/build/Kristinita/SashaGruntDebugging/node_modules/grunt/lib/util/task.js:293:12)

    at /home/travis/build/Kristinita/SashaGruntDebugging/node_modules/grunt/lib/util/task.js:220:11

    at processTicksAndRejections (node:internal/process/task_queues:77:11)

4. Environment

Operating system:
1. Local — Microsoft Windows [Version 10.0.19041.1415]
2. Travis CI — Ubuntu 22.04 LTS Jammy Jellyfish
Node.js v18.9.0
grunt-cli v1.3.2, grunt v1.5.3
grunt-purgecss 5.0.0
grunt-contrib-stylus 1.2.0
merge-source-maps 0.6.1

Thanks.

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

CxRes · 2022-09-20T20:48:23Z

I am observing this as well. PurgeCSS maps my scss definitions to Bootstrap files which I also include. For a while I was extremely confused while debugging until realizing that PurgeCSS is doing this. I am using PurgeCSS through Parcel/PostCSS.

github-actions · 2022-12-20T00:02:52Z

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.

Kristinita · 2022-12-20T05:09:32Z

This issue is still relevant.

Thanks.

github-actions · 2023-03-22T00:02:23Z

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.

CxRes · 2023-03-22T03:06:42Z

Still relevant. Thanks.

Ffloriel · 2023-03-27T20:53:59Z

I have not found a solution for this so far. But you can specify the path of the source file manually if needed with sourcemap.from

		purgecss:
			options:
				content: ["KiraHTML.html"]
				sourceMap:
					from: "../stylus/KiraStyles.styl"
			target:
				files:
					"css/KiraStyles.css": ["css/KiraStyles.css"]

@CxRes, do you have a repo with this issue I could look into by any chance?

CxRes · 2023-03-27T21:35:34Z

I have, but I had removed the offending postcss config file (So, I am not using PurgeCSS). I will need to create a separate branch and reproduce the bug for that.

@Ffloriel Can I get back to you on this next week, I have a deadline for Saturday.

Ffloriel · 2023-03-27T21:46:59Z

Sure no problem, thanks.

github-actions bot added the Stale label Dec 20, 2022

github-actions bot removed the Stale label Dec 21, 2022

github-actions bot added the Stale label Mar 22, 2023

Ffloriel added bug help wanted and removed Stale labels Mar 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug(source-map): incorrect paths in generated source maps #995

bug(source-map): incorrect paths in generated source maps #995

Kristinita commented Sep 15, 2022

CxRes commented Sep 20, 2022 •

edited

github-actions bot commented Dec 20, 2022

Kristinita commented Dec 20, 2022

github-actions bot commented Mar 22, 2023

CxRes commented Mar 22, 2023

Ffloriel commented Mar 27, 2023 •

edited

CxRes commented Mar 27, 2023

Ffloriel commented Mar 27, 2023

bug(source-map): incorrect paths in generated source maps #995

bug(source-map): incorrect paths in generated source maps #995

Comments

Kristinita commented Sep 15, 2022

1. Summary

2. MCVE

3. Source map

3.1. Correct — Stylus

3.2. Incorrect — PurgeCSS

4. Environment

CxRes commented Sep 20, 2022 • edited

github-actions bot commented Dec 20, 2022

Kristinita commented Dec 20, 2022

github-actions bot commented Mar 22, 2023

CxRes commented Mar 22, 2023

Ffloriel commented Mar 27, 2023 • edited

CxRes commented Mar 27, 2023

Ffloriel commented Mar 27, 2023

CxRes commented Sep 20, 2022 •

edited

Ffloriel commented Mar 27, 2023 •

edited