CSS sourcemaps not working

[alexplummer]

🐛 bug report

With Parcel 2 (2.0.0-alpha.2.1) the Sass gets bundled into an index.css, src and style files with corresponding .map files, but the sourcemaps actually don't work. If I switch back to Parcel 1 (1.12.4) the CSS is bundled into src and style files and the sourcemaps work.

Parcel 2:

Parcel 1:

As you can see every CSS declaration is listed under style.scss rather than in the source files as per the second screenshot.

If there is a CSS import within the Sass the sourcemaps stop working:

// Prevents Sourcemaps:
@import "../../node_modules/normalize.css/normalize.css";

@import "../components/Article/Article.scss";
@import "components/Article/_Article.custom.scss";

🎛 Configuration (.babelrc, package.json, cli command)

Package.json

{
    "name": "hot-parcel",
    "version": "1.0.0",
    "license": "MIT",
    "scripts": {
        "start": "parcel serve src/index.html --open --port 8080",
        "build": "parcel build src/index.html --target main --public-url .",
        "favicons": "node favicon-config",
        "create:component": "node createComponent.js",
        "cypress:watch": "cypress open",
        "cypress:serve": "yarn build && http-server ./dist",
        "cypress:open": "cypress open --config baseUrl=http://127.0.0.1:8080/#/",
        "cypress:run": "cypress run --config baseUrl=http://127.0.0.1:8080/#/",
        "test-watch": "jest --watchAll",
        "lint-js": "eslint src/ --ext .js --ext .tsx --fix",
        "fix-js": "prettier --write src/**/*.tsx",
        "fix-styles": "stylelint src/**/*.scss --fix",
        "test": "jest"
    },
    "devDependencies": {
        "@babel/core": "^7.12.3",
        "@babel/plugin-proposal-export-default-from": "^7.12.1",
        "@babel/plugin-proposal-optional-chaining": "^7.12.1",
        "@babel/plugin-transform-runtime": "^7.12.1",
        "@babel/preset-env": "^7.12.1",
        "@babel/preset-react": "^7.12.1",
        "@babel/preset-typescript": "^7.12.1",
        "@babel/runtime": "^7.12.1",
        "@types/enzyme": "^3.10.7",
        "@types/jest": "^26.0.15",
        "@types/react": "^16.9.53",
        "@typescript-eslint/eslint-plugin": "^4.6.0",
        "@typescript-eslint/parser": "^4.6.0",
        "animate-sass": "^0.8.2",
        "babel-eslint": "^10.1.0",
        "babel-jest": "^26.6.1",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-env": "^1.7.0",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.5",
        "eslint": "^7.12.1",
        "eslint-config-airbnb": "^18.2.0",
        "eslint-config-prettier": "^6.14.0",
        "eslint-plugin-import": "^2.22.1",
        "eslint-plugin-jsx-a11y": "^6.4.1",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react": "^7.21.5",
        "eslint-plugin-react-hooks": "^4.2.0",
        "flexboxgrid-sass": "^8.0.5",
        "http-server": "^0.12.3",
        "jest": "^25.3.0",
        "mkdirp": "^1.0.4",
        "normalize.css": "^8.0.1",
        "parcel": "2.0.0-beta.1",
        "prettier": "^2.1.2",
        "prettier-stylelint": "^0.4.2",
        "purecss-sass": "^2.0.3",
        "react-test-renderer": "^16.13.1",
        "sass": "^1.27.0",
        "stylelint": "^13.7.2",
        "stylelint-config-prettier": "^8.0.2",
        "stylelint-config-rational-order": "^0.1.2",
        "stylelint-order": "^4.1.0",
        "stylelint-prettier": "^1.1.2",
        "typescript": "^4.0.5"
    },
    "dependencies": {
        "axios": "^0.21.0",
        "bulma": "^0.9.1",
        "core-js": "^3.6.5",
        "cypress": "^5.5.0",
        "dayjs": "^1.9.4",
        "faker": "^5.1.0",
        "is-json": "^2.0.1",
        "ol": "^6.4.3",
        "react": "^16.13.1",
        "react-accessible-accordion": "^3.3.3",
        "react-datepicker": "^3.3.0",
        "react-dom": "^16.13.1",
        "react-dropzone": "^11.2.1",
        "react-jsonschema-form": "^1.8.1",
        "react-modal": "^3.11.2",
        "react-resizable": "^1.11.0",
        "react-router-dom": "^5.2.0",
        "react-table": "^7.6.1",
        "react-tabs": "^3.1.1",
        "react-toastify": "^6.0.9",
        "react-tooltip": "^4.2.10",
        "react-use-dimensions": "^1.2.1",
        "recoil": "^0.0.13",
        "use-debounce": "^5.0.1",
        "use-deep-compare-effect": "^1.4.0"
    }
}

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
    "plugins": [
        "transform-class-properties",
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-export-default-from",
        "@babel/plugin-proposal-optional-chaining"
    ]
}

.parcelrc

{
    "extends": "@parcel/config-default",
    "transformers": {
        "*.{jpg,png,svg}": [
            "@parcel/transformer-raw"
        ]
    }
}

🤔 Expected Behavior

Sourcemaps should be created with declarations matched up to their original files and respective line numbers.

😯 Current Behavior

No effective sourcemaps are created, everything is listed under one style.scss file (the root Sass file).

💁 Possible Solution

🔦 Context

I can't match up bundled CSS with the point of origin making dev harder. The JS sourcemaps are working fine.

Devtools for Parcel 2 (sourcemaps not working):

Devtools for Parcel 1 (working sourcemaps):

💻 Code Sample

https://github.com/alexplummer/parcel-exampled-no-sourcemap

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-beta.1
Node	12.16.1
npm/Yarn	Yarn 1.22.4
Operating System	Windows

[DeMoorJasper]

Thanks for reporting this issue, could you create a minimal reproduction case for this?

[alexplummer]

Sample repo added, I have noticed the issue is caused by having a CSS import within the Sass.

[alexplummer]

HMR is also failing for CSS with this build.

[DeMoorJasper]

I think all bugs you're experiencing have been fixed by now as I can't reproduce any of the bugs on your example when using the latest Parcel nightly.

The HMR issue was probably because of cache issues with sass imports that have been fixed as far as I know and sourcemaps have been improving steadily as well since the latest beta, especially css sourcemaps.

I tried out "parcel": "2.0.0-nightly.438", please try out the latest nightly as well and let me know if you still see issues. The nightlies should be about as stable as the beta at this point as we usually don't push changes unless they get tested on a fairly large codebase.

[alexplummer]

@DeMoorJasper I have tried again with "parcel": "2.0.0-nightly.442" and the sourcemaps are still not loading unless I take out the CSS import:

[pstaender]

Hi,

I have the similar issue. The final sourcemap "forgets" the import context if any imported files has an url() inside.

I have uploaded an example:

1) That's how it should be:

https://github.com/pstaender/parcel-v2-sourcemap-issue/blob/main/dist/good.eebdc2d1.css.map#L4

2) That's how it actually became:

https://github.com/pstaender/parcel-v2-sourcemap-issue/blob/main/dist/bad.48ee0c0f.css.map#L4

As you can see, 1) source map references to the correct file (without_url.scss). 2) should reference to with_url.scss but reference instead to the parent with_import_having_url.scss, which imports the file with_url.scss.

Is this here the correct issue? Otherwise I would open a new one.

[alexplummer]

@pstaender this is the same issue I am facing, it also seems to break HMR for the CSS.

@DeMoorJasper any chance you could take another look?

[DeMoorJasper]

@alexplummer yeah, it's on my todo list but I'm currently a bit busy with my day job so will probably be for the weekend.

The reproduction cases and details will definitely help

[alexplummer]

Thanks very much for looking into it, would be great to be able to use Parcel 2.