LESS / CSS enqueue priority

Hey Theirry, beans is a truly amazing framework and I am so glad to have found it!

I have a question regarding enqueuing styles priority.

Basically how can I get beans to load the compiled css file last.

Various plugins like WooCommerce and Gravity Forms have lots of their own styles and while I don't want to completely turn them off, I would like to be able to over-ride them. However when I do so via the style.less file, it requires the !important tag to many styles.

So how can I change the priority of the compiled css file to be last?

Thanks!

Hey Brennen, I am glad to hear you are enjoying using Beans 😉

I am assuming that your style.less is added to the Beans UIkit compiled file using the following snippet:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {
 beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );
}

If that is the case, one approach would be to add your depedencies using the beans_uikit_euqueued_styles_args. Below is a an example to make sure the UIkit (which includes your style.less) styles load after woocommerce-general stylesheet:

add_filter( 'beans_uikit_euqueued_styles_args', 'example_uikit_euqueued_styles_args' );

function example_uikit_euqueued_styles_args( $args ) {

 $depedencies = array(
   'woocommerce-general',
    // Other depedencies...
 );

  if ( ! empty( $args['depedencies'] ) ) {
    $args['depedencies'] = array_merge( (array) $args['depedencies'], $depedencies );
 } else {
    $args['depedencies'] = $depedencies;
  }

 return $args;

}

Another approach would be to change the priority of the UIkit enqueue action. That specific action is one of the only action in Beans which is not overwritable using Beans actions as it may cause issues. Below is how you may change it, at your own risk 🙂

remove_action( 'wp_enqueue_scripts', '_beans_uikit_enqueue_assets', 7 );
add_action( 'wp_enqueue_scripts', '_beans_uikit_enqueue_assets', 999 );

The snippet above will load all assets (CSS and JS) last (unless a plugin has a higher priority than 999 indeed).

Happy coding,

Awesome thanks, I used the first approach and it works great!

For anyone else looking to do this for WooCommerce, the three style dependencies are:

$dependencies = array(
  'woocommerce-layout',
    'woocommerce-smallscreen',
    'woocommerce-general'
 );

Also just FYI, Thierry, there are a few typos and anyone else looking to make the change just make sure to be careful about them if you are running into issues.

"euqueue" vs "enqueue"

"depedencies" vs "dependencies"

Thanks for the heads up Brennen, I made a note of it and it will be fix in the coming releases, with backwards compatibility so your current code won't break indeed 😉

Happy coding,