Option to output raw css instead of ESM module, then process output using asset/resource

[andy1547]

Feature Proposal

Feature Use Case

We currently have .html files which contain link tags to .css files, like so:

// View.html
<link href="../css/example.css" rel="stylesheet" type="text/css" />

// Webpack.config.js
{
    test: /\.css$/i,
    type: 'asset/resource'
},

// example.css
.class {
    color: green
    background: url("./test.png");
}

In response to events at application runtime, JavaScript code then imports these .html files as a string using the html-loader, then updates a DOM element with the associated HTML. This all works great, at runtime once the HTML is appended, the browser will request the CSS file after parsing the link tag.

The issue occurs when the example.css contains urls or import statements, it appears that the asset/resource loader won't follow these links and automatically generate files or inline data (understandable, as it's CSS specific syntax).

The css-loader already handles this, but as far as we're aware it only supports ESM output. Ideally there would be a configuration option for the css-loader to export the raw css content, while emitting files (or inlining data ) for any css url/import statements encountered.

The mini-css-extract-plugin didn't seem like a good fit, because similarly it's output wasn't the raw content.

Perhaps using the postcss-loader before it's handed over to asset/resource would work, parsing any css/import statements and emitting files accordingly, but it feels like we're reinventing the wheel as the css-loader is already doing similar work.

Is there a built-in way to do this already?

Thanks in advance.

[alexander-akait]

Sorry, out of scope css-loader, you can use the same plugins as we use for CSS modules (look at source code) or just only postcss (as you said above), also you can use https://github.com/webpack-contrib/css-loader?tab=readme-ov-file#css-style-sheet to be align for future spec (for old browsers you need polyfill), we can't just resolve @import and url(), because it requred JS code to be imported/exported/generated, anyway for future built-in CSS support for webpack (we are working on it), we will have this feature, also please look at the runtime option of mini-css-extract-plugin (no runtime code, only CSS files), feel free to feedback