parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.28k stars 2.26k forks source link

Incorrect source map generated if CSS comment with /*! present #9780

Open jamie-gifford opened 3 weeks ago

jamie-gifford commented 3 weeks ago

🐛 bug report

Parcel generates an incorrect source map for the following SCSS file (a.scss):

/*! */
* {
  background-color: #aaa;
}

Command:

parcel build a.scss

🤔 Expected Behavior

Expected source map (dist/a.css.map) should contain a reference to the a.scss source file, and be something along the lines of

{
    "file": "a.css.map",
    "mappings": "...",
    "names": [],
    "sources": [
        "a.scss"
    ],
    "sourcesContent": [
        "/*! */\n* {\n  background-color: #aaa;\n}\n"
    ],
    "version": 3
}

😯 Current Behavior

Parcel emits an incorrect source map. Crucially, it makes no reference to the original source file a.scss. The contents of dist/a.css.map, pretty-printed, are:

{
    "file": "a.css.map",
    "mappings": "A",
    "names": [],
    "sources": [
        "a.css"
    ],
    "sourcesContent": [
        "* {\n  background-color: #aaa;\n}\n/*# sourceMappingURL=a.css.map */\n"
    ],
    "version": 3
}

🔦 Context

The problem appears to be with the exclamation mark in the comment. The problem is that when importing CSS files from third party node modules, they can have such comments and so there is no simple way to ensure that such comments don't appear in the project's imported dependency stylesheets. The consequence is that if any CSS dependency contains a comment starting with an exclamation mark (quite common in CSS in npm modules), source maps don't work for the entire CSS bundle generated by Parcel.

🌍 Your Environment

Parcel version 2.12 Operating system: Linux Node version 21.7.3