[Feature]: Support `?raw` and `?inline` in bundleless mode

[Timeless0911]

What problem does this feature solve?

At present, we externalize all request in bundleless mode, which means transform the source code.

For example, when users want to import raw CSS files as strings in JavaScript by using the ?raw query parameter in bundleless mode to avoid processing in app side since some app bundlers may not have some loader or users want to reduce loader processing in app side.

What does the proposed API look like?

Source code

import reactToastifyRootStyles from "react-toastify/dist/ReactToastify.css?raw";
const reactToastifyHostStyles = reactToastifyRootStyles.replaceAll(
  ":root",
  ":host"
);
console.log("reactToastifyHostStyles: ", reactToastifyHostStyles);

Actual

import * as __WEBPACK_EXTERNAL_MODULE_react_toastify_dist_ReactToastify_css_raw_922fb197__ from "react-toastify/dist/ReactToastify.css?raw";
const reactToastifyHostStyles = __WEBPACK_EXTERNAL_MODULE_react_toastify_dist_ReactToastify_css_raw_922fb197__["default"].replaceAll(":root", ":host");
console.log("reactToastifyHostStyles: ", reactToastifyHostStyles);

Expected

const ReactToastifyraw_namespaceObject = "";
const reactToastifyHostStyles = ReactToastifyraw_namespaceObject.replaceAll(
  ":root",
  ":host"
);
console.log("reactToastifyHostStyles: ", reactToastifyHostStyles);

[Timeless0911]

Users can configure like this:

• set module externals to false
• ignore module entry

export default defineConfig({
  lib: [
    {
      bundle: false,
      output: {
        externals: {
          './foo.css?raw': false,
          '!!raw-loader!./bar.css': false,
        },
      },
    },
  ],
  source: {
    entry: {
      index: ['src', '!src/foo.css'],
    },
  },
  output: {
    target: 'web',
  },
});

[joshwooding]

@Timeless0911 with the workaround, do you have to specify each CSS file as external, or is there a way to do this in a generic way?

[Timeless0911]

@Timeless0911 with the workaround, do you have to specify each CSS file as external, or is there a way to do this in a generic way?

externals can be set to a function.

[joshwooding]

@Timeless0911 with the workaround, do you have to specify each CSS file as external, or is there a way to do this in a generic way?

externals can be set to a function.

Can't believe I missed that in the docs! Thank you!

For anyone else, I've added this:

externals: [
      ({ request }, callback) => {
        if (request?.endsWith(".css?inline") || request?.endsWith(".css?raw")) {
          return callback(undefined, false);
        }

        callback();
      },
    ],

and it worked. Ideally I would have used null for the first parameter but it causes a type error.