Constant problems with CSS returning 404 when using "regenerate css" + external file print method & html caching

[s60v5]

Prerequisites

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

Description

Hi Elementor Team! First of all, thanks for all your work on the Elementor plugin.

We noticed an issue with the Elementor regenerate CSS functionality. Even though it's called "Regenerate CSS" it doesn't actually regenerate CSS, but just removes the content of the wp-content/uploads/elementor/css directory and the actual regeneration happens on the next visit. If this is designed like this purposely, it should be renamed to something like "Purge CSS", otherwise I noticed that a lot of people including me use this hoping that it will preregenerate css for their site.

I have noticed that many people on the Elementor GitHub repository and WordPress forum who have this problem, use some kind of caching like Varnish, a plugin, or a CDN html caching (Azure, Cloudflare, Kinsta etc), so my guess is that there is some conflict and the actual CSS generation never happens because request never hits the server.

I think this function needs to be renamed to "Purge" or the Elementor team should consider adding an actual "Warm Up/Generate CSS" option. I believe this would make life easier for many people, as we currently have constant problems with missing CSS on our sites. To address this issue I temporarily wrote my custom plugin to purge Elementor CSS using Elementor API, and then regenerate CSS for every post that is created with Elementor, this includes posts, pages, header, footer etc.

// Purge Elementor
Plugin::$instance->files_manager->clear_cache();

// Regenerate CSS
$posts = get_posts(array(
    'post_type' => get_post_types(),
    'posts_per_page' => -1,
));

foreach ($posts as $post) {
    $post_id = $post->ID;
    $document = Plugin::$instance->documents->get_doc_for_frontend($post_id);
    if ($document && $document->is_built_with_elementor()) {
        $css_file = Post_CSS::create($post_id);
        $css_file->update();
    }
}

For a medium-sized site, this code takes around 1-2 seconds to finish, but of course, there might be performance concerns with bigger sites, so perhaps there is a better way to implement this.

The main point of this whole thing is to allow people to use caching mechanisms like Varnish or CDN, and the external file print method, because this provides better performance, and at the same time ensure that we NEVER see 404 CSS errors. I saw that in previous GitHub issues, someone from Elementor suggested switching to the CSS embed method, but for us, this is not good as we are always aiming for the best speed and optimization.

Thanks!

Steps to reproduce

1. Go to the Elementor -> Tools tab.
2. Click on the "Regenerate CSS & Data" button.
3. CSS will be missing on frontend if you use caching like Varnish or any other plugins for HTML caching.

Expected behavior

1. After clicking on "Regenerate CSS & Data" the CSS should be regenerated not only purged.

Isolating the problem

• This bug happens when only the Elementor (and Elementor Pro) plugins are active.
• This bug happens with the Hello Elementor theme active.
• I can reproduce this bug consistently by following the steps I described above.

Elementor System Info

== Server Environment ==
	Operating System: Linux
	Software: Apache/2.4.57 (Debian)
	MySQL version: mariadb.org binary distribution v11.0.3-MariaDB-1:11.0.3+maria~ubu2204
	PHP Version: 8.2.15
	PHP Memory Limit: 1024M
	PHP Max Input Vars: 1000
	PHP Max Post Size: 64M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.4.2
	Site URL: http://localhost:8000
	Home URL: http://localhost:8000
	WP Multisite: No
	Max Upload Size: 64 MB
	Memory limit: 40M
	Max Memory limit: 1024M
	Permalink Structure: /%postname%/

== Theme ==
	Name: Skelementor Child
	Version: 1.0.0
	Author: ChildThemeWP.com
	Child Theme: Yes
	Parent Theme Name: Skelementor
	Parent Theme Version: 1.1.4
	Parent Theme Author: Mousebuilt (Konker)

== User ==
	Role: administrator

== Active Plugins ==
	Elementor
		Version: 3.20.3
		Author: Elementor.com

	Elementor Pro
		Version: 3.20.2
		Author: Elementor.com

Agreement

• I agree that my issue may be closed without action if it doesn't meet all the requirements.

[roymckenzie]

I have noticed this issue, too. A client of mine uses Cloudways to host many of their websites and they have Varnish enabled. If I purge Varnish and then "Regenerate Files & Data" in Elementor, the CSS also returns 404. If I refresh the admin panel, the CSS seems to be regenerated at this point and the site loads as expected on the frontend without missing CSS.

[clikitllc]

We are also seeing the same issue as Roy on a few sites. WP Engine sites seem to be fine, only Cloudways (and we use CloudFlare).

[nicholaszein]

Hi @s60v5.

We appreciate your involvement in our community. For efficient troubleshooting, please remember to include the
FULL, and essential System Info with each issue reported. We'll need it to help you effectively.

⚠️ As a gentle reminder, issues without it may need to be closed without troubleshooting. Providing this information upfront aligns with our guidelines, saves time, and ensures swift resolution. Thank you for understanding.

[s60v5]

OK, tested again with the latest Elementor, WP and the Elementor Hello Theme. "Regenerate CSS" still doesn't regenerate CSS, but just removes the content of the wp-content/uploads/elementor/css.

Here is the full system info (minus the email address):

== Server Environment ==
	Operating System: Linux
	Software: Apache/2.4.57 (Debian)
	MySQL version: mariadb.org binary distribution v11.0.3-MariaDB-1:11.0.3+maria~ubu2204
	PHP Version: 8.2.10
	PHP Memory Limit: 256M
	PHP Max Input Vars: 1000
	PHP Max Post Size: 8M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.5.3
	Site URL: http://localhost:8000
	Home URL: http://localhost:8000
	WP Multisite: No
	Max Upload Size: 2 MB
	Memory limit: 40M
	Max Memory limit: 256M
	Permalink Structure: /%postname%/
	Language: en_US
	Timezone: 0
	Debug Mode: Active

== Theme ==
	Name: Hello Elementor
	Version: 3.0.2
	Author: Elementor Team
	Child Theme: No

== User ==
	Role: administrator
	WP Profile lang: en-US
	User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:126.0) Gecko/20100101 Firefox/126.0

== Active Plugins ==
	Elementor
		Version: 3.21.8
		Author: Elementor.com


== Elementor Experiments ==
	Improved Asset Loading: Active by default
	Improved CSS Loading: Active by default
	Inline Font Icons: Inactive by default
	Additional Custom Breakpoints: Active by default
	admin_menu_rearrangement: Inactive by default
	Flexbox Container: Active
	Upgrade Swiper Library: Active by default
	Grid Container: Active by default
	Nested Elements Performance: Inactive by default
	Optimized Control Loading: Inactive by default
	Hello Theme Header & Footer: Active by default
	Elementor Home Screen: Active by default
	Editor Top Bar: Inactive by default
	Build with AI: Active by default
	Landing Pages: Active by default
	Nested Elements: Active
	Lazy Load Background Images: Inactive by default


== Log ==
	


== Elementor - Compatibility Tag ==