CSS sourcemaps not working

🐛 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]

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]

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