webpack-contrib/image-minimizer-webpack-plugin

CSS paths for PNG to WebP incorrectly use backslash on Windows, resulting in invalid URLs

Ambient-Impact opened this issue · 4 comments

Ambient-Impact commented

Bug report

Hi there. I'm not sure if this is a bug with this plug-in or something with Webpack itself, or one of the other loaders (MiniCssExtractPlugin.loader, css-loader, postcss-loader, or sass-loader), but when I build on my Windows laptop, the paths that are altered in the resulting CSS use backslashes rather than slashes, which results in invalid URLs.

The workaround I'm using right now is with:

              filename: function(file) {
                return file.filename.replaceAll('\\', '/');
              },

But that shouldn't be necessary.

Actual Behavior

URLs altered end up like the second one (note the backslashes):

    background-image: url(../../components/founder_message/founder_message_portait_1x.png?v=3);
    background-image: url(../../components\founder_message\founder_message_portait_1x.webp?v=3);

Expected Behavior

URLs should all use slashes rather than backslashes like so:

    background-image: url(../../components/founder_message/founder_message_portait_1x.png?v=3);
    background-image: url(../../components/founder_message/founder_message_portait_1x.webp?v=3);

How Do We Reproduce?

I'm compiling from Sass:

$photo-url-1x: 'founder_message_portait_1x.png?as=webp&v=3';

[...]

      background-image:     url(founder-message.$photo-url-fallback);
      background-image:     url(founder-message.$photo-url-1x);

I've attached my webpack.config.js in case I'm doing something wrong there.

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:

    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
    Memory: 3.11 GB / 15.37 GB
  Binaries:
    Node: 18.9.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.4 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (107.0.1418.26)
    Internet Explorer: 11.0.19041.1566
  Monorepos:
    Yarn Workspaces: 3.2.4
alexander-akait commented

Can you provide reproducible test repo (github?) with example of code, because it is hard to say where is bug without additional infromation, thank you

Ambient-Impact commented

I'll try and throw together one when I get a chance.

  • 👍1
Ambient-Impact commented

@alexander-akait I can confirm that #377 does fix the problem for me on Windows. Let me know if you still need a test repo.

alexander-akait commented

@Ambient-Impact Great, let's do release 👍

  • 🎉1