purgecss icon indicating copy to clipboard operation
purgecss copied to clipboard
verified publisher icon FullHuman

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

Open Kristinita opened this issue 3 years ago • 8 comments

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.

  1. 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"]

  2. 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>

  3. stylus/KiraStyles.css:

    body
	color red

.KiraNonExistentClass
	color green

  4. 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

  1. Operating system:

    1. Local — Microsoft Windows [Version 10.0.19041.1415]
    2. Travis CI — Ubuntu 22.04 LTS Jammy Jellyfish

  2. Node.js v18.9.0

  3. grunt-cli v1.3.2, grunt v1.5.3

  4. grunt-purgecss 5.0.0

  5. grunt-contrib-stylus 1.2.0

  6. merge-source-maps 0.6.1

Thanks.

Kristinita avatar Sep 15 '22 18:09 Kristinita

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.

CxRes avatar Sep 20 '22 20:09 CxRes

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.

github-actions[bot] avatar Dec 20 '22 00:12 github-actions[bot]

This issue is still relevant.

Thanks.

Kristinita avatar Dec 20 '22 05:12 Kristinita

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.

github-actions[bot] avatar Mar 22 '23 00:03 github-actions[bot]

Still relevant. Thanks.

CxRes avatar Mar 22 '23 03:03 CxRes

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?

Ffloriel avatar Mar 27 '23 20:03 Ffloriel

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.

CxRes avatar Mar 27 '23 21:03 CxRes

Sure no problem, thanks.

Ffloriel avatar Mar 27 '23 21:03 Ffloriel