wp-rocket icon indicating copy to clipboard operation
wp-rocket copied to clipboard

Published 20 hours ago • verified publisher icon wp-media

Wrong CSS generated when "lazyload background images" feature is enabled and stylesheet has `#` as `href` attribute

Open wordpressfan opened this issue 11 months ago • 0 comments

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

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

Describe the bug When lazyload background images feature is enabled and there is a stylehseet has the url # as below:

<link rel='stylesheet' href="#" type='text/css' media='all' />

This will break all upcoming CSS by replacing # with a real url, that's because our code considers this # as a real url so it replaces it with a variable as in here (this replaces all hashes in the whole content).

and this happens mainly with GDPR compliant plugins that converts the following stylesheet link:

<link rel='stylesheet' id='google-fonts-style-css' href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C600%2C700%7CRoboto%3A400%2C500%2C700%7CRoboto+Condensed%3A400%2C500%2C700%7COswald%3A400%7COpen+Sans%3A400&#038;display=swap&#038;ver=12.6.4' type='text/css' media='all' />

to be

<link data-service="google-fonts" data-category="marketing" rel='stylesheet' id='google-fonts-style-css' href="#" data-href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C600%2C700%7CRoboto%3A400%2C500%2C700%7CRoboto+Condensed%3A400%2C500%2C700%7COswald%3A400%7COpen+Sans%3A400&#038;display=swap&#038;ver=12.6.4' type='text/css' media='all' />

To Reproduce Steps to reproduce the behavior:

  1. Create a page template with the following HTML:
<?php
/**
 * Template Name: LLBG Template
 */
?>
<!doctype html >
<html>
<head>
    <title>Test</title>
    <link rel='stylesheet' href="#" type='text/css' media='all' />
</head>
<body>
<style>
    .tdi_35_rand_style{
        background-color: #ddb373 !important;
    }
</style>
</body>
</html>
  1. Create a page with this template
  2. Enable lazyload background images feature in WP Rocket plugin.
  3. Check the page source and you will find this background-color attribute has a url.

Expected behavior We shouldn't corrupt the page CSS.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context I believe we have many solutions here, like excluding # from the files when we extract them from the page here

For now, we can fix this by only excluding this # in media lazyload exclusion textarea:

image

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

wordpressfan avatar Mar 11 '24 10:03 wordpressfan