Fix inlining critical css (#448)

#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.
choojs · Mar 22, 2018 · bddabdc · bddabdc
1 parent 08a125e
commit bddabdc
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 5 deletions.
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')
+  })
+})