Use WordPress logic to load CSS and JavaScript

[marcinkrzeminski]

I have been doing this in my latest projects and it works really good. It makes it much more flexible and like it should be actually (using dependencies logic, etc). Here's how it looks on my end in a sample project.

1. Remove references to our CSS and JS files from base.twig
2. Load Chisel JS the WordPress way

add_action( 'wp_enqueue_scripts', function () {
			$chisel = new ChiselTwig();
			$file   = $chisel->revisionedPath( 'scripts/app.bundle.js' );
			$deps   = [ 'jquery', 'wp-a11y', 'wp-i18n' ];
			wp_enqueue_script( 'chisel-js', $file, $deps, '', true );
			wp_set_script_translations( 'chisel-js', 'mdll' );
		}, 10 );

Since we have jQuery in the list of dependencies in most cases there's no need to install the newest jQuery version via our generator and just use the globally available window.jQuery in our custom JS.

3. Load custom fonts the WordPress way

add_action( 'wp_enqueue_scripts', function () {
			$file = '//fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Raleway:400,400i,700,700i&display=swap';
			wp_enqueue_style( 'chisel-fonts', $file, false );
		}, 10 );

4. Load Chisels' CSS the WordPress way

add_action( 'wp_enqueue_scripts', function () {
			$chisel = new ChiselTwig();
			$file   = $chisel->revisionedPath( 'styles/main.css' );
			wp_enqueue_style( 'chisel-main', $file, [ 'chisel-fonts' ] );
		}, 10 );

Maybe it's worth to consider changing the revisionedPath into a static method so we don't need to create an instance of ChiselTwig class every time we need to use the revisionedPath method.