W3 missing CSS files in combination/minify process

Hello @magestyx

Thank you for reaching out.

I am not quite sure I understand the problem because W3TC does not remove any files. This being said, I’ve tried to replicate this behavior and everything worked just fine.

Can you please share the website URL with CSS minify enabled, and also let me know which CSS?minifier you are using and what is the Minify caching method?

Thanks!

Hi, Marko. Thanks for responding quickly.

I understand W3TC doesn’t remove actual files, I’m just saying that during the Combining process maybe some are being removed from the ‘gathering up’ process or something to that effect. We updated additional sites today that seem to have this same issue – removing any combining solved the problems right away.

One of the main pages we’ve been troubleshooting is: https://www.blackcommunitydevelopersgroup.org/testimonials/

Currently combining is off so it looks correct – also see here for reference: https://imgur.com/MsVmm0e

As soon as we turn on Combine in any way for CSS, we get this: https://imgur.com/a3iUeCs
The plugin displaying the testimonials is called Strong Testimonials. There doesn’t seem to be anything unusual about the plugin, but W3 is leaving out its files like /wp-content/plugins/strong-testimonials/public/css/grid.css if we have Combine on. With only Minify on, it works and gives a file like: https://www.blackcommunitydevelopersgroup.org/wp-content/cache/minify/f0e9f.css

With Combine on, it leaves out 100% of that grid.css file’s content. As mentioned, this is just one specific example. We also found where it leaves out CSS files from AIO SEO. But many other plugins like GiveWP it includes the CSS files in the combine process just fine.

We’re stumped, but we’re getting the feeling why Combine has been a volatile setting on many sites we manage. This whole time we thought maybe files were combined in different orderings or something like that which broke the pages or functions, but perhaps really the issue is that Combine is leaving out entire files.

Magestyx

Oh – I forgot to answer two of your questions:

Minify Cache Method: Disk
CSS minifier: Minify (default)

Hello @magestyx

Thank you for your feedback. So as I can see, currently CSS minify is enabled, and can you please confirm that you are using the Minify-only method for CSS minify?

Correct – on the live/current site with the page you displayed, only minify is on for CSS. The testimonials display correctly on the page as 40% wide flexbox elements because grid.css code from Strong Testimonials is included. As soon as we change the minify method to Combine, or to Combine & Minify, certain files like grid.css have all their content inexplicably missing from the final output CSS, so the testimonials display as default 100%-width columns like https://imgur.com/a3iUeCs

Again, that’s just a single specific example. There’s others like with AIOSEO – other plugins like that also suddenly have their CSS left out using any form of W3 CSS Combine.

Hello @magestyx

Thank you for your feedback.

This means that the file you are mentioning is not agreeing with being combined/minified. This can mean that either that file is dependent, or was not written properly.

What you can do is to try the CSS Tidy minifier for CSS Minify, or to exclude a specific css file form being minified in Performance>Minify>Advanced>”Never Minify following CSS files”

I hope this helps!

Hi, Marko.

We tried the other minifiers and the situation remains (only if Combine is set in the CSS minify settings).

After more testing we’ve found one other peculiarity.
Apparently it’s making a big difference exactly WHERE the Combine is adding back the new css files in the page code. If we use the Chrome inspector, it looks like the combined css files from Strong Testimonials (for instance) are missing. However, we can find the combined Strong Testimonials css file (2 small css files – content.css and grid.css) added somehow inside the html code for the search popup. So if we look in the raw page output code (Ctrl+U) we can find that css file. (All other css files on the site are combined into 3 other combo files) But in the inspector, it only shows if we click on the search icon in the displayed page, which display the search popup. Seriously this is one of the strangest issues we’ve ever seen.

So, the testimonials all load into the page without formatting as three 100%-wide-rows. Then clicking the search icon, the search popup/form shows, and through the transparent page overlay behind it you can see the three testimonials suddenly format perfectly as they should be (and that missing css combo file now can be found in the inspector). Closing the search box does the opposite – the css file disappears from the inspector and the testimonials lose their formatting, going back to 3 default 100%-wide stacked rows.

The question then is – what controls where the combined css files are re-added into the overall page structure? If we could specify that then they wouldn’t be added into problematic places.

That’s all the more info I have at the moment. What a strange situation.

Magestyx

The code loading the css files in the plugin is as below. In the html output the files are back to back, so I guess that’s why they’re combined together.
Excluding the content.css and grid.css for Strong Testimonials does do the trick – the files are recognized and in the right location – but we’re only talking one plugin on one site here. To go through every site and find every css file not combining correctly wouldn’t be practical.

wp_register_style( ‘wpmtst-grid-style’,
WPMTST_PUBLIC_URL . ‘css/grid.css’,
array(),
$plugin_version );

FYI – we tried using the Plugin Organizer plugin to change the order plugins are loaded, but it didn’t help. The combined css files are still loading in the html of the hidden search form popup.