CSS-loader: exportType: "css-style-sheet" breaks build

[maltevesper]

I am trying to use the css-style-sheet option (load css module as a CSSStyleSheet for use in a CustomElement), however this breaks my build. Apparently webpack tries to compile the javascript generated for the CSS module and is unable to find CSSStyleSheet.
Unfortunately I am not a webdeveloper, thus not to familiar with node.js/webpack. What is the error in my configuration, and how could I start debugging this/Fix it?

stacktrace

ERROR in ./src/test.module.css
Module build failed (from ./node_modules/html-bundler-webpack-plugin/src/Loader/cssLoader.js):
HookWebpackError: CSSStyleSheet is not defined
    at tryRunOrWebpackError (/home/malte/projects/logview/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/malte/projects/logview/node_modules/webpack/lib/Compilation.js:5241:12)
    at __webpack_require__ (/home/malte/projects/logview/node_modules/webpack/lib/Compilation.js:5198:18)
    at /home/malte/projects/logview/node_modules/webpack/lib/Compilation.js:5270:20
    at symbolIterator (/home/malte/projects/logview/node_modules/neo-async/async.js:3485:9)
    at done (/home/malte/projects/logview/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/home/malte/projects/logview/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/malte/projects/logview/node_modules/webpack/lib/Compilation.js:5176:43
    at symbolIterator (/home/malte/projects/logview/node_modules/neo-async/async.js:3482:9)
    at timesSync (/home/malte/projects/logview/node_modules/neo-async/async.js:2297:7)
-- inner error --
ReferenceError: CSSStyleSheet is not defined
    at Module.<anonymous> (/home/malte/projects/logview/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[0]!/home/malte/projects/logview/src/test.module.css?HTMLBundlerCSSLoader:19:36)
    at /home/malte/projects/logview/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:452:10
    at Hook.eval [as call] (eval at create (/home/malte/projects/logview/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /home/malte/projects/logview/node_modules/webpack/lib/Compilation.js:5243:39
    at tryRunOrWebpackError (/home/malte/projects/logview/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/malte/projects/logview/node_modules/webpack/lib/Compilation.js:5241:12)
    at __webpack_require__ (/home/malte/projects/logview/node_modules/webpack/lib/Compilation.js:5198:18)
    at /home/malte/projects/logview/node_modules/webpack/lib/Compilation.js:5270:20
    at symbolIterator (/home/malte/projects/logview/node_modules/neo-async/async.js:3485:9)
    at done (/home/malte/projects/logview/node_modules/neo-async/async.js:3527:9)

Generated code for /home/malte/projects/logview/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[0]!/home/malte/projects/logview/src/test.module.css?HTMLBundlerCSSLoader
 1 | __webpack_require__.r(__webpack_exports__);
 2 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 3 | /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 4 | /* harmony export */ });
 5 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ "/home/malte/projects/logview/node_modules/css-loader/dist/runtime/noSourceMaps.js");
 6 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
 7 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "/home/malte/projects/logview/node_modules/css-loader/dist/runtime/api.js");
 8 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 9 | // Imports
10 | 
11 | 
12 | var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
13 | // Module
14 | ___CSS_LOADER_EXPORT___.push([module.id, `body {
15 |     background-color: pink;
16 | }
17 | `, ""]);
18 | // Exports
19 | var ___CSS_LOADER_STYLE_SHEET___ = new CSSStyleSheet();
20 | ___CSS_LOADER_STYLE_SHEET___.replaceSync(___CSS_LOADER_EXPORT___.toString());
21 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_STYLE_SHEET___);
22 | 
 @ ./src/test.js 1:0-47
... /* follow up error */

webpack.config.js

const path = require("path");
const HtmlBundlerPlugin = require("html-bundler-webpack-plugin");

module.exports = {
    mode: "development", // TODO: how should we switch this between development and production?
    devtool: false, // TODO: what is the correct setting here, to either do no transform or fast builds?
    entry: {
        test: "./src/test.html",
    },
    plugins: [
        new HtmlBundlerPlugin({
            css:{inline:true},
            js:{inline:true},
        }),
    ],
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "css-loader",
                        options: {
                            exportType: "css-style-sheet",
                            modules: {
                                auto: true,
                                localIdentName: "[name]__[local]--[hash:base64:5]",
                                exportLocalsConvention: "camelCase",
                            },
                        },
                    },
                ],
            },
            {
                test: /\.(png|jpe?g|svg|webp|woff2?)$/i,
                type: "asset/inline",
            },
        ],
    },
    resolve: {
        extensions: [ ".tsx", ".ts", ".js" ],
        extensionAlias: {
            ".js": [".ts", ".js"],
        },
    },
    output: {
        //filename: "[name].js",
        path: path.resolve(__dirname, "dist"),
        clean: true,
    },
};

test.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>

<body>
    <script src="test.js" async defer></script>
</body>

</html>

test.js

import dropdownstyles from "./test.module.css";

test.module.css

body {
    background-color: pink;
}

[webdiscus]

I have created the issue #93.