feat: add module identifier comments to extracted CSS file

[privatenumber]

• Operating System: mac
• Node Version: 12
• NPM Version: 6
• webpack Version: 5.41.1
• mini-css-extract-plugin Version: 1.6.2

Feature Proposal

I'd like the module identifiers to be inlined in a comment in the extracted CSS file.

For example, an output CSS file with module identifiers:

/*** ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/assets/js/components/block/PlaceholderImage.vue?vue&type=style&index=0&id=54b79ab8&scoped=true&lang=css& ***/

.figure__placeholder-wrapper[data-v-54b79ab8] {
	transition: opacity 200ms ease-in-out;
	position: relative;
	border-radius: 2px;
}
.figure__placeholder-wrapper.display-under[data-v-54b79ab8] {
	position: absolute;
}

/*** ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/assets/js/ImageFigure.vue?vue&type=style&index=0&id=5d9fc422&scoped=true&lang=css& ***/

.figure__aspect-ratio[data-v-5d9fc422] {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}
.figure__aspect-ratio--force-center[data-v-5d9fc422] {
	padding-top: 50%;
}
.figure__aspect-ratio--1_1[data-v-5d9fc422] {
	padding-top: 100%;
}

Feature Use Case

In development mode (or unminified mode), the Webpack bundled JS assets are annotated with module identifier comments. This makes it easier to look at the JS assets and understand which part is what and debug.

Having this for the CSS would be nice too.

Happy to open a PR.

[alexander-akait]

Yes, PR welcome 👍

[alexander-akait]

I think we can respect output.pathinfo and if is true we will output this