Inlined SVG extracted with invalid filename

Bug report

What is the current behavior?

When using css-loader with an SVG that is inlined the extracted SVG gets an invalid filename

If the current behavior is a bug, please provide the steps to reproduce.

1. Use css-loader

({
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ]
});

1. Set assetModuleFilename to something

{
  assetModuleFilename: 'media/[name].[contenthash:8][ext]'
}

1. Have CSS with inlined SVG

.className {
  background: url(data:image/svg+xml;utf8,<svg width=%279px%27 height=%276px%27 viewBox=%270 0 9 6%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27><g id=%27Artboard%27 stroke=%27none%27 stroke-width=%271%27 fill=%27none%27 fill-rule=%27evenodd%27 transform=%27translate%28-636.000000, -171.000000%29%27 fill-opacity=%270.368716033%27><g id=%27input%27 transform=%27translate%28172.000000, 37.000000%29%27 fill=%27%230E242F%27 fill-rule=%27nonzero%27><g id=%27Group-9%27 transform=%27translate%28323.000000, 127.000000%29%27><path d=%27M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z%27 id=%27arrow%27></path></g></g></g></svg>)
}

1. Run webpack

The image gets placed in the output with a filename like svg>.abc123 which breaks on a windows machine.

What is the expected behavior?

Webpack produces a file that doesn’t break windows with .svg as the extension or omits the inlined SVG entirely

Other relevant information: webpack version: 5.45.1 Node.js version: 14.16.0 Operating System: Windows

[snitin315]

bump

[sokra]

shouldn’t the asset stay an data url anyway? Did you change that to an real asset?