Render app shell with inlined critical CSS

aduth · May 27, 2017 · 8075ee8 · 8075ee8
1 parent b97281d
commit 8075ee8
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 59 deletions.
diff --git a/index.php b/index.php
@@ -3,10 +3,16 @@
 	<head>
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<meta charset="<?php bloginfo( 'charset' ); ?>">
+		<style><?php @include( dirname( __FILE__ ) . '/dist/critical.css.php' ); ?></style>
 		<?php wp_head() ?>
 	</head>
 	<body <?php body_class(); ?>>
-		<div id="app"></div>
+		<div id="app">
+			<!-- App Shell -->
+			<main class="page">
+				<header class="sidebar"></header>
+			</main>
+		</div>
 		<?php wp_footer(); ?>
 	</body>
 </html>
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   },
   "license": "GPL-2.0+",
   "scripts": {
-    "clean": "rimraf dist",
+    "clean": "rimraf dist && mkdir -p dist",
     "prebuild": "npm run clean",
     "build": "cross-env NODE_ENV=production webpack",
     "build-theme": "./bin/build-theme.sh",
@@ -63,6 +63,7 @@
     "flatpickr": "^2.6.0",
     "lodash": "^4.17.4",
     "path-to-regexp": "^1.7.0",
+    "postcss-critical-css": "^2.1.3",
     "preact": "^8.1.0",
     "preact-redux": "^2.0.1",
     "querystringify": "^1.0.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+	plugins: [
+		require( 'autoprefixer' ),
+		require( 'postcss-critical-css' )( {
+			outputPath: 'dist',
+			outputDest: 'critical.css.php'
+		} )
+	]
+};
diff --git a/src/assets/stylesheets/_elements.scss b/src/assets/stylesheets/_elements.scss
@@ -1,23 +1,25 @@
-*,
-*:before,
-*:after {
-	box-sizing: border-box;
-}
+@critical {
+	*,
+	*:before,
+	*:after {
+		box-sizing: border-box;
+	}
 
-html {
-	font-size: $font-size;
-	background-color: $background-color;
-}
+	html {
+		font-size: $font-size;
+		background-color: $background-color;
+	}
 
-body {
-	@extend %sans;
-	margin: 0;
-	padding: 0 0 3rem;
-	font-size: 100%;
-	line-height: 1.5;
-	color: $font-color-body;
-	-webkit-font-smoothing: antialiased;
-	touch-action: manipulation;
+	body {
+		@extend %sans;
+		margin: 0;
+		padding: 0 0 3rem;
+		font-size: 100%;
+		line-height: 1.5;
+		color: $font-color-body;
+		-webkit-font-smoothing: antialiased;
+		touch-action: manipulation;
+	}
 }
 
 h1,

diff --git a/src/components/sidebar/_style.scss b/src/components/sidebar/_style.scss
@@ -1,34 +1,36 @@
-.sidebar {
-	display: flex;
-	height: $sidebar-width;
-	background-color: #fff;
-	border: 0 solid $border-color;
-	border-bottom-width: 1px;
+@critical {
+	.sidebar {
+		display: flex;
+		height: $sidebar-width;
+		background-color: #fff;
+		border: 0 solid $border-color;
+		border-bottom-width: 1px;
 
-	@include medium() {
-		position: fixed;
-		left: 0;
-		top: 0;
-		right: 0;
-		z-index: 1000;
-		height: $sidebar-width-medium;
-	}
+		@include medium() {
+			position: fixed;
+			left: 0;
+			top: 0;
+			right: 0;
+			z-index: 1000;
+			height: $sidebar-width-medium;
+		}
 
-	@include desktop() {
-		right: auto;
-		bottom: 0;
-		flex-direction: column;
-		width: $sidebar-width-medium;
-		height: auto;
-		border-right-width: 1px;
-		border-bottom-width: 0;
-	}
+		@include desktop() {
+			right: auto;
+			bottom: 0;
+			flex-direction: column;
+			width: $sidebar-width-medium;
+			height: auto;
+			border-right-width: 1px;
+			border-bottom-width: 0;
+		}
 
-	body.admin-bar & {
-		top: 46px;
+		body.admin-bar & {
+			top: 46px;
 
-		@include desktop() {
-			top: 32px;
+			@include desktop() {
+				top: 32px;
+			}
 		}
 	}
 }

diff --git a/src/index.js b/src/index.js
@@ -34,11 +34,13 @@ const path = window.location.href.substr( SITE_URL.length );
 store.dispatch( replaceRoute( path ) );
 
 // Render
+const target = document.getElementById( 'app' );
 render(
 	<Provider store={ store }>
 		<Root />
 	</Provider>,
-	document.getElementById( 'app' )
+	target,
+	target.children[ 0 ]
 );
 
 // Preloaded responses are only valid for first render

diff --git a/webpack.config.js b/webpack.config.js
@@ -58,14 +58,7 @@ if ( 'production' === process.env.NODE_ENV ) {
 		test: /\.s?css$/,
 		loader: ExtractTextPlugin.extract( {
 			use: [
-				{
-					loader: 'postcss-loader',
-					options: {
-						plugins: [
-							require( 'autoprefixer' )
-						]
-					}
-				},
+				'postcss-loader',
 				{
 					loader: 'sass-loader',
 					query: {
@@ -92,9 +85,10 @@ if ( 'production' === process.env.NODE_ENV ) {
 	config.module.rules.push( {
 		test: /\.s?css$/,
 		use: [
-			{ loader: 'style-loader' },
-			{ loader: 'css-loader' },
-			{ loader: 'sass-loader' }
+			'style-loader',
+			'css-loader',
+			'postcss-loader',
+			'sass-loader'
 		]
 	} );
 }