Add simplistic inlining of critical CSS

addyosmani · addyosmani · commit 39c5525658c5 · 2015-10-22T18:09:02.000+01:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app-shell",
-  "version": "0.1.120",
+  "version": "0.1.141",
   "private": true,
   "license": "Apache",
   "engines": {
diff --git a/server/controllers/static-page-controller.js b/server/controllers/static-page-controller.js
@@ -1,34 +1,49 @@
 'use strict';
 
+var fs = require('fs');
+var path = require('path');
+
 function StaticPageController() {
 
 }
 
+function prepareData(config) {
+  // Concat inline styles for document <head>
+  var flattenedStyles = '';
+  var pathPrefix = '/../../dist/';
+  config.inlineStyles.forEach(function(file) {
+    flattenedStyles += fs.readFileSync(path.resolve(__dirname) + pathPrefix + file);
+  });
+  // Replace array with flattened string of content
+  config.inlineStyles = flattenedStyles;
+  return config;
+};
+
 StaticPageController.prototype.onRequest = function(req, res) {
   switch (req.path) {
   case '/':
-    res.render('index', {
+    res.render('index', prepareData({
       inlineStyles: ['/styles/core.css'],
       remoteStyles: [],
       inlineScripts: [],
       remoteScripts: ['/scripts/static-page.js']
-    });
+    }));
     break;
   case '/url-1':
-    res.render('url-1', {
+    res.render('url-1', prepareData({
       inlineStyles: ['/styles/core.css'],
       remoteStyles: [],
       inlineScripts: [],
       remoteScripts: ['/scripts/static-page.js']
-    });
+    }));
     break;
   case '/url-2':
-    res.render('url-2', {
+    res.render('url-2', prepareData({
       inlineStyles: ['/styles/core.css'],
       remoteStyles: [],
       inlineScripts: [],
       remoteScripts: ['/scripts/static-page.js']
-    });
+    }));
     break;
   default:
     res.status(404).send();
diff --git a/server/layouts/default.handlebars b/server/layouts/default.handlebars
@@ -11,10 +11,7 @@
     <link rel="manifest" href="/manifest.json">
     <link rel="icon" href="/images/chrome-touch-icon-192x192.png" sizes="192x192" type="image/png">
 
-    {{#each inlineStyles}}
-    <!-- TODO: Inline these styles -->
-    <link rel="stylesheet" type="text/css" href="{{this}}">
-    {{~/each}}
+    <style>{{{inlineStyles}}}</style>
 </head>
 <body>
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "app-shell",`
`3`		`- "version": "0.1.120",`
	`3`	`+ "version": "0.1.141",`
`4`	`4`	`"private": true,`
`5`	`5`	`"license": "Apache",`
`6`	`6`	`"engines": {`