new URL() emits an extra blank css file

• Operating System: Ubuntu Linux 16.04 LTS
• Node Version: 14.15.0
• NPM Version: 6.14.8
• webpack Version: 5.44.0
• mini-css-extract-plugin Version: 2.1.0

Expected Behavior

css should be extracted cleanly into a css bundle without emitting artifacts

Actual Behavior

css is extracted into bundle but a bogus css file is also emitted

Code

// webpack.config.js

import CssPlugin from "mini-css-extract-plugin";

export default {
	entry: { app: "./src/test-new-url.js" },
	mode: "development",
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [CssPlugin.loader, "css-loader"]
			}
		]
	},
	output: { filename: "[name].js" },
	plugins: [new CssPlugin({ filename: "[name].css" })]
};

// src/test-new-url.js

new URL("./test-new-url.css", import.meta.url);

/* src/test-new-url.css */

body {
	font-size: 14px;
}

How Do We Reproduce?

Place the three files in an environment and build. You will get the following files in dist: app.js app.css (contains the correct, extracted css) b88d04fba731603756b1.css (your hash may vary) which contains the following:

// extracted by mini-css-extract-plugin
export {};

This is the bogus file. The bogus file does not get emitted with a standard import import "./src/test-new-url.css";

[alexander-akait]

@GregNing Please create reproducible test repo

[alexander-akait]

Original issues can be solved using type: 'javascript/auto', i.e.

module.exports = {
  entry: "./index.js",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [Self.loader, "css-loader"],
        type: 'javascript/auto'
      },
    ],
  },
  plugins: [
    new Self({
      filename: "[name].css",
    }),
  ],
};