search

FullHuman / purgecss

Remove unused CSS
https://purgecss.com
MIT License
7.76k stars 249 forks source link

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

Open Kristinita opened 2 years ago

Kristinita commented 2 years ago

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.

CxRes commented 1 year ago

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[bot] commented 1 year ago

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 commented 1 year ago

This issue is still relevant.

Thanks.

github-actions[bot] commented 1 year ago

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 commented 1 year ago

Still relevant. Thanks.

Ffloriel commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Sure no problem, thanks.