Fix inlining critical css (#448)

goto-bus-stop · web-flow · commit bddabdca2aa6 · 2018-03-22T09:28:43.000+01:00
#414 inserts the server rendered app at the very end of the transform chain. The critical CSS inline transform ran _before_ the server rendered app was inserted, so it did not catch any selectors that were used in the app. This patch moves the critical CSS transform to the end so that it works on the entire server rendered app.
diff --git a/lib/graph-document.js b/lib/graph-document.js
@@ -125,17 +125,17 @@ function node (state, createEdge) {
 
       d.transform(addToHead, header.join(''))
 
+      d.transform(insertApp, {
+        selector: selector,
+        body: body
+      })
+
       if (state.styles.bundle.buffer.length) {
         d.transform(criticalTransform, { css: state.styles.bundle.buffer })
       }
 
       d.transform(addToHead, styleTag({ hash: state.styles.bundle.hash, base: base }))
 
-      d.transform(insertApp, {
-        selector: selector,
-        body: body
-      })
-
       function complete (buf) { done(null, buf) }
 
       pump(d.bundle(), concat({ encoding: 'buffer' }, complete), function (err) {
diff --git a/test/document.js b/test/document.js
@@ -289,3 +289,41 @@ tape('mount choo app into given selector', function (assert) {
     assert.notEqual(body.indexOf('meow'), -1, 'inserted the rendered app')
   })
 })
+
+tape('inlines critical css', function (assert) {
+  assert.on('end', cleanup)
+  assert.plan(3)
+
+  var file = `
+    var css = require('sheetify')
+    var html = require('choo/html')
+    var choo = require('choo')
+
+    css\`
+      .classA { color: red }
+      .classB { color: blue }
+    \`
+
+    var app = choo()
+    app.route('/', function () {
+      return html\`<body class="classA"></body>\`
+    })
+
+    // classB
+
+    module.exports = app.mount('body')
+  `
+
+  var dirname = 'document-pipeline-' + (Math.random() * 1e4).toFixed()
+  tmpDirname = path.join(__dirname, '../tmp', dirname)
+  mkdirp.sync(tmpDirname)
+  fs.writeFileSync(path.join(tmpDirname, 'index.js'), file)
+
+  var compiler = bankai(tmpDirname, { watch: false })
+  compiler.documents('/', function (err, res) {
+    assert.error(err, 'no error writing document')
+    var body = res.buffer.toString('utf8')
+    assert.notEqual(body.indexOf('.classA{color:red;}'), -1, 'inlined the .classA selector')
+    assert.equal(body.indexOf('.classB{color:blue;}'), -1, 'did not inline the .classB selector')
+  })
+})
