wp-rocket
wp-rocket copied to clipboard
wp-media
Bootstrap 5 incompatibility with RUCSS
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:
- Use bootScore (minimalist bootstrap 5 theme)
- Enable RUCSS
- Purge cache
- 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
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.
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 Did you try with the example provided here? https://github.com/wp-media/wp-rocket/issues/6154#issuecomment-2027376232
@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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
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)
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.