LESS / CSS enqueue priority

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,