use function Roots\config;
use function Roots\view;
+/**
+ * Override Elementor CSS order
+ * Normally, the Sage CSS is the last to load but we need Elementor's post specific CSS
+ * to load after the theme so it can override things like the padding. Elementor's default
+ * frontend CSS contains 10px padding on all populated elements, which messes with our
+ * designs so we override this in our theme. However, to override it, we are forced to use a
+ * CSS selector with high specificity in our theme's CSS:
+ * .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated
+ * When Elementor generates its post-xx.css files for custom styling set on a page, the specificity
+ * of this CSS rule is the same as ours so it can never override ours unless it is the last stylesheet
+ * to load. The desired loading order is:
+ * 1) Elementor Global / Frontend CSS
+ * 2) Sage Main CSS (Theme CSS)
+ * 3) Elementor post specific CSS (post-xx.css)
+ *
+ * Elementor has a hook when registering CSS files - https://code.elementor.com/hooks/elementor-css-file-name-enqueue/
+ * However, I couldn't get this to work properly with add_action and we need to use the post ID (get_the_ID()), which
+ * doesn't always seem to be available. I need to figure out where this hook should be added so that it is ready...
+ *
+ * For now, the solution is quite low-level and we inject a dependency of our theme's 'sage/main.css' CSS file into
+ * Elementor's post specific CSS file just before the stylesheets are printed. By having our theme as a dependency,
+ * Elementor's post-xx.css file is forced to load after the theme's CSS...
+ *
+ * TODO: revisit this and see if there's a better solution. See issue here: https://github.com/elementor/elementor/issues/7658
+ */
+add_action('wp_print_styles', function() {
+ global $wp_styles;
+ $sage_css_handle = 'sage/app.css';
+ $elementor_css_handle = 'elementor-post-'. get_the_ID();
+
+ // First, check if Elementor styles are loaded yet and if not, load them because we need to be able
+ // to make them a dependency of the main theme styles in order to have the correct CSS order...
+ // If we don't do this, on some pages that load Elementor late (eg. index.blade.php), the Elementor CSS
+ // will be loaded when fetching the builder content but it will be in the footer due to the late call.
+ // Although not perfect, it's easiest to always load the Elementor frontend CSS even if it's not strictly needed.
+ if (!isset($wp_styles->registered['elementor-frontend'])) {
+ \Elementor\Plugin::instance()->frontend->enqueue_styles();
+ }
+
+ if (isset($wp_styles->registered[$elementor_css_handle])) {
+ $wp_styles->registered[$elementor_css_handle]->deps = [$sage_css_handle];
+ }
+
+});
+
+
/**
* Theme assets
*/
foreach ($styles as $stylesheet) {
if (asset($stylesheet)->exists()) {
- wp_enqueue_style('sage/' . basename($stylesheet, '.css'), asset($stylesheet)->uri(), false, null);
+ wp_enqueue_style('sage/' . basename($stylesheet, '.css'), asset($stylesheet)->uri(), ['elementor-frontend'], null);
}
}
}, 100);
projects / ccv-wordpress.git / commitdiff