loadCss with WordPress example with WooCommerce

myhooks.php

<?php 

// #1 We register LoadCss script, and we load it in the footer
// LoadCss is here -> https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js
add_action( 'wp_enqueue_scripts', 'register_my_scripts' );

function register_my_scripts() {
  wp_enqueue_script( 'loadCss', get_template_directory_uri() . '/js/libs/loadCss.js',false, '1.2.1', true );
 }

 
// #2 We dequeue some styles (Example with WooCommerce)
add_filter( 'woocommerce_enqueue_styles', 'dequeue_styles' );
function dequeue_styles( $enqueue_styles ) {
  unset( $enqueue_styles['woocommerce-general'] );	// Remove the gloss
  unset( $enqueue_styles['woocommerce-smallscreen'] );	// Remove the smallscreen optimisation
  return $enqueue_styles;
}

// #3 Re Register stylesheets the we dequeued in an aync way
add_action( 'wp_footer', 'register_plugin_styles',999 );

function register_plugin_styles() {
  echo "<script>loadCSS( '".plugins_url( 'woocommerce/assets/css/woocommerce.css' )."');</script>";
  echo "<script>loadCSS( '".plugins_url( 'woocommerce/assets/css/woocommerce-smallscreen.css' )."');</script>";

}

remove-css.php

<?php 
add_filter( 'style_loader_tag', function($tag){

   
    $cssToRemove = array();

    // If we are on of of these page we don't want to load some CSS 
    if( 
      is_front_page() || is_product() || is_product_category() || is_page_template( 'template-offline.php') 
    ){
      
     
      array_push($cssToRemove,
        "woocommerce.css", // we list the CSS we want to remove 
        "woocommerce-smallscreen.css",
        "woocommerce-layout.css",
        "titan-framework-flux-settings-css"
      );

    } 


    // if the current tag that WP tries to enqueu is in the list we return false 
    foreach($cssToRemove as $css){

      if(strpos($tag, $css ) ) return false;
    
    }

    return $tag;

  }, 10 );