Images inside CSS file names that contain space or special char will not be lazyloaded

[hanna-meda]

Before submitting an issue please check that you’ve completed the following steps:

• Made sure you’re on the latest version - 3.15.9 ✓
• Used the search feature to ensure that the bug hasn’t been reported before ✓

Describe the bug When enabling LL for CSS Background Images, images inside CSS file names that contain space or special char will not be lazyloaded.

To Reproduce Steps to reproduce the behavior:

1. Have Lazyload enabled for CSS Background Images.
2. Visit a Page Template that contains a CSS file with special char or space in the URL, and that file also contains a background image. (on new.rocketlabs > lazyload_css_background_images.php contains 'https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/styles/lazyload_css_background%C3%A9images.css')
3. Without scrolling the page, inspect the Network tab > Img.
4. Notice that the 'paper.jpeg' is there.

Expected behavior Enabling LL for CSS Background Images, images inside CSS file names that contain space or special char should also be lazyloaded.

Screenshots

Acceptance Criteria (for WP Media team use only) Clear instructions for developers, to be added before the grooming

[Khadreal]

Using lazyload_css_background_images.php template the stylesheet is not lazyloading cause the regex won't capture this <link rel="stylesheet" href=/wp-content/rocket-test-data/styles/lazyload_css_background%C3%A9images.css> because there's no quote around the href.

https://github.com/wp-media/wp-rocket/blob/631fc90017805c8063340c771598b1ccec713772/inc/Engine/Common/ExtractCSS/Subscriber.php#L67-L70

Modifying the regex above solve the issue to the below fix the problem <link\s+([^>]+[\s"\'])?href\s*=\s*[\'"]?\s*?(?<url>[^\'"]+(?:\?[^\'"]*)?)\s*?[\'"]([^>]+)?\/?>

This basically add ? after the quote to make it optional

Effort [XS]

[Miraeld]

Looks ok to me

[piotrbak]

This is not something that can be implemented in the nearest future.