[Feature]: Importing CSS as a String or a URL

[xbzhang2020]

What problem does this feature solve?

I'm applying CSS inside shadow DOM.

It's easy to implement in Vite, because it supports importing CSS as a string (by ?inline query suffix) or a URL (by ?url query suffix).

import styleText from "./style.css?inline";
// import styleUrl from "./style.css?url";

const host = document.getElementById("root");

if (host) {
  const shadow = host.attachShadow({ mode: "open" });

  const root = document.createElement("div");
  root.innerHTML = `
    <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
  `;
  shadow.appendChild(root);

  // Method1: import CSS as a string
  const style = document.createElement("style");
  style.textContent = styleText;
  shadow.appendChild(style);

  // Method2: import CSS as a URL
  // const link = document.createElement("link");
  // link.rel = "stylesheet";
  // link.href = styleUrl;
  // shadow.appendChild(link);
}

But it's failed in Rsbuild. How to implement the feature in Rsbuild? And can Rsbuild support importing CSS as a string or a URL like Vite?

What does the proposed API look like?

import styleText from "./style.css?inline";
import styleUrl from "./style.css?url";

See Vite Docs.

[chenjiahan]

See #3778 for workarounds.

Rsbuild should provide builtin support for ?inline or ?url, however, we are still considering whether to use query or import attributes.

[chenjiahan]

Here is an example of how to implement the `?raw' query:

https://github.com/rspack-contrib/rspack-examples/blob/main/rsbuild/query-raw/rsbuild.config.ts