Module rule with css-loader using CSSStyleSheet

[ShaneYu]

Hello,

I have been trying to setup a module rule in the config via tools.rspack where I unshift the rules (insert new rule at the start) to target imports like import cssSheet from "./my-element.css?sheet" where the rule will run the postcss-loader first, then the css-loader with output type css-style-sheet.

However when I build the rsbuild application it fails with the following error:

error   Build error: 
File: D:\Code\Personal\local\custom-elements-exp\src\elements\ads-select\ads-select.css?sheet:1:1
  × Module build failed:
  ╰─▶   ×
        │ SyntaxError
        │
        │ (1:1) D:\Code\Personal\local\custom-elements-exp\src\elements\ads-select\ads-select.css Unknown word //
        │
        │ > 1 | // Imports
        │     | ^
        │   2 | import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from "../../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/css-loader/dist/runtime/noSourceMaps.js";
        │   3 | import ___CSS_LOADER_API_IMPORT___ from "../../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]/node_modules/css-loader/dist/runtime/api.js";
        │

 @ ./src/elements/ads-select/ads-select-element.ts
 @ ./src/elements/ads-select/index.ts
 @ ./src/elements/index.ts
 @ ./src/index.ts

error   Rspack build failed.
    at file:///D:/Code/Personal/local/custom-elements-exp/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.js:6394:219
    at D:\Code\Personal\local\custom-elements-exp\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\index.js:8390:43
    at #getInstance (D:\Code\Personal\local\custom-elements-exp\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\index.js:8430:40)
    at D:\Code\Personal\local\custom-elements-exp\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\index.js:8388:38
    at D:\Code\Personal\local\custom-elements-exp\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\index.js:2175:13
    at done (D:\Code\Personal\local\custom-elements-exp\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:402:13)
    at AsyncParallelHook.callAsyncStageRange (D:\Code\Personal\local\custom-elements-exp\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:409:20)
    at AsyncParallelHook.callAsync (D:\Code\Personal\local\custom-elements-exp\node_modules\.pnpm\@[email protected]\node_modules\@rspack\lite-tapable\dist\index.js:82:21)
    at Cache_Cache.shutdown (D:\Code\Personal\local\custom-elements-exp\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\index.js:2239:33)
    at D:\Code\Personal\local\custom-elements-exp\node_modules\.pnpm\@[email protected]_@[email protected]\node_modules\@rspack\core\dist\index.js:8387:28

My config (the rspack part) looks like this:

rspack: (opts) => {
      opts.experiments ??= {};
      opts.experiments.css = true;

      opts.module ??= {};
      opts.module.rules ??= [];

      opts.module.rules.unshift(
        {
          test: /\.css$/i,
          resourceQuery: /sheet/,
          type: "javascript/auto",
          use: [
            "postcss-loader",
            {
              loader: "css-loader",
              options: {
                exportType: "css-style-sheet",
              },
            },
          ],
        }
      );

      return opts;
    },

Any clue as to what I need to do to support this correctly with rspack?

In short, I need normal css imports in ts files to work as normal whereby they are processed, extracted and then injected inline as usual; but when importing with ?sheet then I need it to be processed and converted to a exported CSSStyleSheet which I can the use in my custom element shadow dom.

[ShaneYu]

In the end I gave up trying to configure rsbuild so that I could use import sheet from "./styles.css?sheet". Since CSS and the SASS plugin support ?inline queries, I ended up doing this instead:

import styles from "./styles.scss?inline";

const styleSheet = new CSSStyleSheet();
styleSheet.replaceSync(styles);

This works as I need/want it to, just a shame I have to create the style sheet and sync replace it opposed to just importing a sheet directly.