Load critical CSS into page header of static page

Stujo · Stujo · commit ee6ffd6a6255 · 2016-07-22T17:23:03.000-07:00
Noticed a pop in the page when the client side renders it's because
the main.css is excluded from the page render on the server side and then
added

This change allows for the main.css file to be included in the body of the
page on the server side
diff --git a/common/components/TodoApp.jsx b/common/components/TodoApp.jsx
@@ -1,10 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import DevTools from './DevTools';
 
-if ( 'undefined' !== typeof window ) {
-	require( '../../client/assets/css/main.css' );
-}
-
 export default class TodoApp extends Component {
 
 	static contextTypes = {
diff --git a/server/server.js b/server/server.js
@@ -65,6 +65,20 @@ app.use( ( req, res, next ) => {
 
 		.then( () => {
 
+		  return new Promise((resolve, reject) => {
+		    fs.readFile('./client/assets/css/main.css', 'utf8', (err, data) => {
+		      if (err) {
+		        reject(err);
+		        return;
+		      }
+		      resolve(data);
+		    });
+  		  });
+
+		})
+
+		.then( (criticalCSS) => {
+
 			const initView = renderToString((
 				<Provider store={store}>
 				  <RouterContext {...renderProps} />
@@ -76,7 +90,9 @@ app.use( ( req, res, next ) => {
 			let state = JSON.stringify( store.getState() );
 			// console.log( '\nstate: ', state )
 
-			let page = renderFullPage( initView, state )
+
+
+			let page = renderFullPage( initView, state, criticalCSS )
 			// console.log( '\npage:\n', page );
 
 			return page;
@@ -89,15 +105,15 @@ app.use( ( req, res, next ) => {
 	})
 })
 
-
-function renderFullPage(html, initialState) {
+function renderFullPage(html, initialState, criticalCSS) {
   return `
 	<!doctype html>
 	<html lang="utf-8">
 	  <head>
 		<title>Universal Redux Example</title>
 		<link rel="shortcut icon" type="image/png" href="assets/images/react.png">
 		<link rel="stylesheet" href="/assets/css/uikit.almost-flat.min.css">
+		<style type="text/css">${criticalCSS}</style>
 	  </head>
 	  <body>
 	  <div class="container">${html}</div>
