CSS in shadow DOM with Webpack 5

Question

Is there any possibility with webpack 5 to correctly generate a bundle with CSS injectable in a shadow DOM? If I try to load some CSS with the new assets, url are not transformed, but I need them to be adapted to integrate with the generated bundle. For example I have a CSS file like the following:

/* src/components/header.css */
#logo {
  background-image: url('./images/logo.png');
}

It would be nice if webpack can url encode or replace the url to be embedded in a shadow dom. If I configure webpack as follows:

...
module.rules: [{
  test: /\.css$/,
  oneOf: [
    {
      resourceQuery: /raw/,  // import css from 'path/to/file.css?raw'
      type: 'asset/source',
      use: [
        {loader: 'css-loader'}
      ]
    },{
      ...
    }
  ]
}]
...

The loaded string isn't CSS anymore, but is some Webpack script. If I remove the use part in the rule the CSS is loaded without changes. There is any plugin that can make the CSS inlining and load it as string?

CSS in shadow DOM with Webpack 5

0 Answers