Critical CSS (#744)

* Moves critical CSS to their own partials

* Adjusts entry points for main and critical files

* Updates webpack for multiple entry points

* Inlines the critical CSS file

inc/scripts.php

@@ -32,6 +32,20 @@ function _s_scripts() {
 }
 add_action( 'wp_enqueue_scripts', '_s_scripts' );
 
+/**
+ * Inline Critical CSS.
+ *
+ * @author Corey Collins
+ */
+function _s_critical_css() {
+	?>
+	<style>
+		<?php include get_stylesheet_directory() . '/build/critical.css'; ?>
+	</style>
+	<?php
+}
+add_action( 'wp_head', '_s_critical_css', 1 );
+
 /**
  * Preload styles and scripts.
  *

src/critical.js

@@ -0,0 +1 @@
+import './scss/critical.scss';

src/index.js

@@ -1,8 +1,3 @@
-/* eslint eslint-comments/disable-enable-pair: error */
-/* eslint-disable no-undef, no-unused-vars */
-
 import './scss/tailwind.scss';
 import './scss/index.scss';
 import './js/index';
-
-/* eslint-enable no-undef, no-unused-vars */

src/scss/critical.scss

@@ -0,0 +1,4 @@
+//----------------------------------------
+// Critical CSS.
+//----------------------------------------
+@import 'critical/index.scss';

src/scss/critical/index.scss

@@ -0,0 +1,9 @@
+//----------------------------------------
+// Critical CSS
+//
+// Import partials for "above the fold" (barf) styles.
+//----------------------------------------
+
+@import 'header';
+@import 'menus';
+@import 'mobile-menus';

src/scss/template-tags/index.scss

@@ -5,8 +5,6 @@
 //----------------------------------------
 
 @import 'forms';
-@import 'menus';
-@import 'mobile-menus';
 @import 'modals';
 @import 'off-canvas';
 @import 'svg-sprite-wrapper';

src/scss/templates/index.scss

@@ -7,5 +7,4 @@
 
 @import 'comments';
 @import 'footer';
-@import 'header';
 @import 'posts';

webpack.config.js

@@ -14,6 +14,10 @@ const StylelintPlugin = require( 'stylelint-webpack-plugin' );
  */
 module.exports = {
 	...defaultConfig,
+	entry: {
+		index: './src/index.js',
+		critical: './src/critical.js',
+	},
 	module: {
 		rules: [
 			{