404 error on background-image using relative paths when Minify CSS is enabled

[johan-las]

Describe the bug

EDIT: After further testing, I noticed that this issue occurs only in an already minified CSS file from the customer’s website. So, the issue is specific to that file.

I noticed that the CSS contains a large data:application block, which likely prevents the optimization of that file from being finalized.

@font-face {
    font-family: fontello;
    src: url(data:application/octet-stream;base64,d09GRgABAAAABhvEAAsAA......) format("truetype")
}

So, we are moving the file, but we are not checking its size, and the process stops because it's too big, and doesn’t rewrite the path.

---

When we use a relative path for a background-image in a CSS file and enable the Minify CSS optimization, it results in 404 errors for each background image used on the page.

This happens because the CSS file is moved to the /cache/min/1/ folder, while the image paths remain unchanged, which causes them to point to incorrect locations.

• Original code example included in the CSS file :
  background-image: url(../images/right-caret@2x.png);

• Without Minify CSS activated, the URL is :
  https://domain.com/wp-content/themes/osrplus/assets/images/right-caret@2x.png

• With Minify CSS activated, the URL is :
  https://domain.com/wp-content/cache/min/1/wp-content/themes/osrplus/assets/images/right-caret@2x.png

To Reproduce
Steps to reproduce the behavior:

1. Add the CSS file screen.min.css from the customer case that has the background-image with relative path into the test site.
2. Add an element that use the background-image into the testing page.
3. Activate the Minify CSS optimization and deactivate any other optimization into the setting.
4. See 404 error.

Expected behavior
We should check the file size before moving it.
This way, the process can update the paths of any background-image references and prevent 404 errors or broken layouts if the folder’s location changes.

Screenshots
Original code example into the CSS file :

404 errors once Minify CSS activated :

Desktop (please complete the following information):

• OS: Macos
• Browser Chrome
• Version Latest

Additional context
Ticket: https://secure.helpscout.net/conversation/3175416612/609563?viewId=273761

[johan-las]

I provided more information on the issue after doing further tests.

[Mai-Saad]

Probably similar to #4791 @piotrbak