Unverified Commit bddabdca authored by Renée Kooi's avatar Renée Kooi Committed by GitHub
Browse files

Fix inlining critical css (#448)

https://github.com/choojs/bankai/pull/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.
parent 08a125e9
......@@ -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) {
......
......@@ -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')
})
})
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment