Hey!
I’m trying to figure out what is the best way to inline css into index.html for the critical css or app-shell-css. For our app I want all the CSS which belongs to our loading-screen/splash-screen to be inlined into index.html. The problem is that this CSS is quite complex (some animations etc) and is built by ember-cli-sass
.
What I did is, to create an in-repo-addon
which implements the postBuild
hook. In this hook the result of the sass compilation is injected into the index.html. Since I’m not a total expert in Broccoli/Ember-CLI I’m not sure if this is the best way to implement this. It works but I’m not sure if I miss something (caching, performance wise).
In code this looks as follows
The addons index.js
var fs = require('fs');
module.exports = {
name: 'inject-inline-css',
isDevelopingAddon: function () {
return true;
},
postBuild: function (result) {
debugger;
var index = fs.readFileSync(result.directory + '/index.html', 'utf-8');
var inline = fs.readFileSync(result.directory + '/inline.css', 'utf-8');
var combined = '';
if (index.indexOf('{{inline-css}}') !== -1) {
combined = index.replace('{{inline-css}}', '<style id="rml-inline-styles">' + inline + '</style>');
}
if (index.indexOf('<style id="rml-inline-styles">') !== -1) {
combined = index.replace(/<style id="rml-inline-styles">[\s\S]*<\/style>/, '<style id="rml-inline-styles">' + inline + '</style>');
}
fs.writeFileSync(result.directory + '/index.html', combined);
}
};
ember-cli-build.js
:
var app = new EmberApp(defaults, {
fingerprint: {
exclude: ['inline.css']
},
outputPaths: {
app: {
css: {
inline: 'inline.css'
}
}
}
});
To me this feels a little bit hackish. What would be a good approach?