Inline CSS for an Ember App

@tschoartschi wrote:

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?

Posts: 1

Participants: 1

Read full topic