Lazyload CSS Background Images is not working with multiple identical selectors.

[johan-las]

Describe the bug
If multiple instances of the same selector exist, it selects the first instance without verifying whether it contains a background image.

As a result, the background image is not replaced with the variable, causing the image to load directly on page load instead of being lazy-loaded.

To Reproduce
Steps to reproduce the behavior:

1. Create a page with background images.
2. Create multiple instances of the same selector before the one with the background image, as shown in the example below.

.section_0 { height: 1000px; }
.section_0 { font-size:13px; }
.section_0 { background-image: url('https://domain.com/image.jpg'); }

3. Verify the CSS of the element, it's not replaced by the variable.

Expected behavior
It should detect the block containing the background image while ignoring the others.

Additional context

• Related discussion: https://wp-media.slack.com/archives/C08N8J6VC/p1733495043235919?thread_ts=1733392504.072519&cid=C08N8J6VC
• Ticket : https://secure.helpscout.net/conversation/2776648393/527016?viewId=8127840

The issue is tracked in /inc/Engine/Media/Lazyload/CSS/Subscriber.php, specifically in the generate_content() function.

Printing the variable $url_tags show that the block is not the correct one.:

Array
(
    [0] => Array
        (
            [selector] => .kadence-column5373_1cb77f-f6 > .kt-inside-inner-col
            [url] => https://xxxx/wp-content/uploads/2024/03/focus-on-improving.webp
            [original] => url('https://xxxx/wp-content/uploads/2024/03/focus-on-improving.webp')
            [block] => .kadence-column5373_1cb77f-f6 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}
            [hash] => 9bd2d540-fe97-45c6-a56e-5e6d8197b61b
        )

)