search

wp-media / wp-rocket

Performance optimization plugin for WordPress
https://wp-rocket.me
GNU General Public License v2.0
701 stars 218 forks source link

Bootstrap 5 incompatibility with RUCSS #6154

Closed androidacy-user closed 3 months ago

androidacy-user commented 1 year ago

Describe the bug With bootstrap 5.3.1, even if we exclude the entire css file from RUCSS, it does very strange things with the CSS. Backgrounds become transparent. Pseudo elements stop working. Text and background color utilities stop working.

To Reproduce Steps to reproduce the behavior:

  1. Use bootScore (minimalist bootstrap 5 theme)
  2. Enable RUCSS
  3. Purge cache
  4. See strange CSS glitches. Adding the nowprocket query parameter makes them go away.

Expected behavior Page renders normally

Screenshots N/A

Additional context N/A

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

androidacy-user commented 1 year ago

Further inspection shows it's messing with the :root properties bootstrap uses by default. -rgb properties specifically become invalid or disappear entirely when using RUCSS

What's even worse is the critical css generation service must be down because we keep getting errors.

androidacy-user commented 8 months ago

Anything new?

binvoyons commented 7 months ago

Having the same issue. Unfortunately, with WP Rocket's RUCSS:

.bg-white {
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}

Becomes

.bg-white {
    background-color: rgba(var(--bs-white-rgba),, 1) !important;
}
Khadreal commented 5 months ago

Couldn't replicate this, tried with 5.3.1 and 5.3.3

piotrbak commented 4 months ago

@Khadreal Did you try with the example provided here? https://github.com/wp-media/wp-rocket/issues/6154#issuecomment-2027376232

mostafa-hisham commented 3 months ago

@piotrbak I couldn't reproduce the issue using the example in the comment

test template

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
.bg-white {
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}
body{
background:black;
}
</style>
  </head>
  <body>
    <h1 class="bg-white">Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>
piotrbak commented 3 months ago

We'll reopen when we're able to reproduce the issue

androidacy-user commented 3 months ago

It's amazing that a feature you so heavily shove down users' throats (going so far as to show a giant banner advising against the critical css option!) is broken on one of the web's most popular frameworks and your only response is to shrug it off after 10 months insisting you can't reproduce it. I believe it's also been suggested on this very issue tracker that you want to make it the only css optimization option.

In spite of being told what's going wrong, in spite of being given easily reproducible examples. (Your tool is breaking specifically rgb() vars in certain situations, and in this scenario only when bootstrap is in dark mode is the issue apparent [data-bs-theme="dark" has overrides for backgrounds and related, facilitating a dark theme].)

(Also ignoring that your tool doesn't render JavaScript properly so in order to use RUCSS we have to have a mile long exception list just to have random bugs like this but that's a separate issue)

piotrbak commented 3 months ago

Hello @androidacy-user thanks for your comment.

It's amazing that a feature you so heavily shove down users' throats (going so far as to show a giant banner advising against the critical css option!) is broken on one of the web's most popular frameworks and your only response is to shrug it off after 10 months insisting you can't reproduce it.

Please note that we didn't have a single customer complaining about this issue over 10 months. I understand that it might be frustrating, but we need to be able to reproduce the issue in order to understand why it happens. If you could contact our Support Team and provide the URL or template we'll take care of it. You could also paste the template or URL here, if you prefer.