Divi 4.10+ compatibility improvement

[piotrbak]

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

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

Describe the bug
When we have specific settings enabled, we'll change the order of the styles. Which might cause the layout problems. Problematic setup:

1. WP Rocket's CSS Combination enabled
2. WP Rocket's RUCSS disabled
3. Divi's Load Dynamic Stylesheet Inline enabled

This is happening because we're not combining internal styles <style></style>. This is how it works for a long time, however, Divi 4.10+, for any reason, is adding some important styles to CSS files and some others (that could be related to the same elements) to internal styles.

To Reproduce
Steps to reproduce the behavior:

1. Enable settings as described above
2. Check the source of the cached page
3. The combined CSS file is at the very top
4. Check the source of the not cached page
5. Divi CSS files are below the internal styles - the order is changed!

Expected behavior
We should preserve Divi's CSS order. We could:

1. Disable their feature when RUCSS is disabled + Combine CSS is enabled
2. Disable our Combine CSS when their option is enabled + RUCSS is disabled
3. Exclude their files from combination when RUCSS is disabled

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

Additional context
Add any other context about the problem here.

Backlog Grooming (for WP Media dev team use only)

• Reproduce the problem
• Identify the root cause
• Scope a solution
• Estimate the effort

[mostafa-hisham]

Reproduce the issue ✔️

Identify the root cause ✅

Divi CSS files order is changed when we use combined CSS
in some cases, it will be above the Divi inline style which is not the correct order

Scope a solution ✅

I think the third solution that @piotrbak suggested is the better solution
we need to exclude all Divi CSS files which are stored in /wp-content/et-cache/ From being Compiend.

1. In inc/ThirdParty/Themes/Divi.php
   add an event rocket_combine_css_excluded_external when Rucss is disabled

		if ( ! (bool) $this->options->get( 'remove_unused_css', 0 ) ) {
			$events['rocket_combine_css_excluded_external'] = 'exclude_divi_css_from_combine';
		}

2. In inc/ThirdParty/Themes/Divi.php add the function to exclude Divi CSS files

public function exclude_divi_css_from_combine( $exclude_css ) {
		$wp_content  = wp_parse_url( content_url( '/' ), PHP_URL_PATH );
		$exclude_css [] = $wp_content."et-cache/(.*).css";
		return $exclude_css;
	}

3. Create tests

Estimate the effort ✅

Effort [S]

[remyperona]

@mostafa-hisham wouldn't checking for the value of the remove_unused_css value be enough, instead of injecting the whole controller?

[mostafa-hisham]

@Tabrisrp
You are right and I updated the grooming to use options

In UsedCSS::is_allowed() have other conditions not only if the rucss is enabled or not
that's why i injected the controller