Regenerate post CSS (in wp-content/uploads/elementor/css) when missing

[tristanleboss]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest stable version of Elementor.

Description

If a post CSS file auto-generated by Elementor in the folder wp-content/uploads/elementor/css folder is missing, it's not recreated when either a logged-in or not logged-in user displays the page.

I have the feeling that it was different at some point and the behaviror changed recently. Indeed, when we deploy a site, we flush the CSS cache using the dedicated WP CLI command. Beofre, Elementor was recreating the styles automatically (don't know exactly when). Now, it doesn't and we have to go to "Tools" > "Regenerate CSS".

I think it would be a good idea to regenerate the CSS file if missing on page load.
Adding a WP Cli command to regenerate the CSS cache globally after being flushed could be usefull.

Steps to reproduce

Create a post with Elementor. Publish it. Go to the wp-content/uploads/elementor/css folder. Delete the post-XX.css file. Browse to the page. You will get a 404 error on the style file you just deleted. Elementor will never recreate it.

Isolating the problem

• This bug happens with only Elementor plugin active (and Elementor Pro).
• This bug happens with a default WordPress theme active.
• I can reproduce this bug consistently using the steps above.

Environment

Elementor v2.4.7
Elementor Pro v2.4.5
WordPress 5.1

[bainternet]

@tristanleboss

Elementor create the CSS file only once unless you update and there is regenerated for the updates to apply.

There is no reason for the file to get deleted unless you have a 3rd party code which does that, then it should be up to him to notify Elementor that the CSS needs to be regenerated.

Checking if the file exists on every page load is simply bad performance and like I said there is no real reason for that.

Also, there is a WP-CLI command to flush the CSS files:
wp elementor flush_css

ref: https://docs.elementor.com/article/461-wp-cli

thanks.

[tristanleboss]

@bainternet Thanks for your answer but, for me, to flush means "To clear something of its contents.".
The documentation is not really detailled on what this WP Cli command actually do... it only uses the word flush.

So, does the flush_css WP Cli command removes the files AND recreate them? If so, the name should be regenerate_css.

If the flush_css command only removes the files, what's the point if there is no automatic ways to recreate them? (except to edit each post/page manually with Elementor to change something)

notify Elementor that the CSS needs to be regenerated.

How can I notify Elementor that a CSS for a post need to be regenerated?

Checking if the file exists on every page load is simply bad performance and like I said there is no real reason for that.

I highly doubt checking for a file using a PHP function like file_exists lead to performance impact. This PHP function is mapped to its C counterpart. If you consider how many require / include commands executed in a WP page load which have to check for file existence in the many includes_dir or use SPL autoloaders (like Composer which extensively call file_exists) before reading them... or throwing a missing file error. I doubt checking for a CSS file would have any measurable cost.

[pacotole]

There is no reason for the file to get deleted unless you have a 3rd party code which does that, then it should be up to him to notify Elementor that the CSS needs to be regenerated

How can inform Elementor that the CSS needs to be regenerated for a Header/Footer template?

[NAROLLES]

@pacotole @tristanleboss @bainternet
Good morning
I'm joining this discussion because I'm having the same problem.
I seem to have identified the problem....I emptied memcached on the server and I deactivated the jetpack plugin and at the same time as I make this message I open a ticket with jetpack
To be continued

[abdobsg]

There is no reason for the file to get deleted unless you have a 3rd party code which does that, then it should be up to him to notify Elementor that the CSS needs to be regenerated

How can inform Elementor that the CSS needs to be regenerated for a Header/Footer template?

go to WP admin > Elementor > Tools > Regenerate CSS. Then, you can clear the cache (WP cache and browser cache) and refresh the page.

[buckmanhands]

What do you do when using the Tools->Regenerate CSS does not bring the missing CSS file back?

[shane-js]

I am experiencing this too using Azure Wordpress which sets up W3 Total Cache Azure blobstorage CDN. Manually looking the css files are not found in the uploads dir anywhere. Regenerating appears to do nothing as well (even if followed uploading custom files in W3).

[huynhlongdev]

How to move "wp-content/uploads/elementor/css/post-x" in footer when using Elementor\Plugin::instance()->frontend->get_builder_content_for_display(12, true) to head tag. I want the css to load before the DOM is finished loading

[krlabs]

Today I went to one of my publications and saw that the layout was completely broken. It turns out that there are no CSS styles for the post in the /uploads/elementor/css/post-xx.css folder. And i have to republish the post to update the CSS. I don't understand why this happens.I use Litespeed and Cloudflare.

[shashwat-kalpvaig]

After regenerating, it doesn't do anything. There is no css file.

[miguel-cravidao]

I get the same problem, specifically on some projects. Although, all the projects use the same WordPress stack and hosting.

Once the problem starts... I dont understand how i can solve it. Tried all the steps/tips previously shared, but in some cases it just doesn't work.

I've disabled also Object Cache, Varnish Cache, NGINX Cache and WordPress cache and the problems persists. Very hard to debug and even harder to fix.

[alexbovey]

I also have this issue on lots of sites and have been unable to find the cause. With all of those experiencing the issue, is there a particular pattern? The majority of my sites are hosted on Cloudways with their Breeze/varnish cache. I haven't 100% been able to verify it, but I presume that setting Elementor to output the CSS in the page head will solve the issue.