How do I use `ember-emojione` with `emojione-png-sprites`?

I'm using ember-emojione to display and insert emoji.

Out of four rendering options that EmojiOne offers:

PNG sprites
PNG individual images
SVG sprites
SVG individual images

...only PNG sprites suit me. Individual images take too much time to load and emoji display sequentially. SVG sprites are awesome, but rerendering the preview area causes SVG sprite emoji to flicker. Only PNG sprite emoji never flicker and display simultaneously.

Unfortunately, EmojiOne offers spritesheets only in three sizes: 64, 128 and 512 px. We need to display emoji in 20 px size.

Resizing emoji displayed via PNG sprites is problematic.

ember-emojione readme suggests this hack to resize PNG sprite emoji:

.emojione {
  transform: scale(0.3125);
  margin: -22px;
}

It works, but it has some disadvantages:

In certain cases, emoji appear blurred.
Text selection blows up:

The solution is to use emoji spritesheets tailored to desired size. The Deveo/emojione-png-sprites repo offers such spritesheets.

But when I include those spritesheets instead of default ones, ember-emojione emoji picker component displays incorrectly.

Question: how do I use ember-emojione with emojione-png-sprites correctly?

Solution

emojione-png-sprites relies on Sass mixins, so you'll need ember-cli-sass. If you don't want to install ember-cli-sass, you can alternatively precompile mixin invocations manually and insert resulting CSS into your app.

Decide which spritesheets to include from emojione-png-sprites.

We're gonna use 20px emoji. For retina, we'll also need double and triple size spritesheets. As 40px and 60px aren't available, we're gonna use next available ones: 48px and 64px.

Include spritesheets and the Sass file into your repo. Run these commands in your Ember app root:

bower i -S emojione-png-sprite-20=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-20.png
bower i -S emojione-png-sprite-48=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-48.png
bower i -S emojione-png-sprite-64=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.0/dist/sprite-64.png
bower i -S emojione-png-sprite-style=https://raw.githubusercontent.com/Deveo/emojione-png-sprites/v0.3.01/dist/style.scss

It's very important that you use a specific release version of the files, so that your dependencies are locked. Otherwise, if the repo has a breaking change, an innocent bower install will break your project.

Tell ember-emojione not to include default EmojiOne CSS and spritesheets. In your app's ember-cli-build.js:

module.exports = function (defaults) {
    var app = new EmberApp(defaults, {    
        "ember-emojione": {
            shouldImportCss:        false,
            shouldIncludePngSprite: false,
            shouldIncludeSvgSprite: false,
            shouldIncludePngImages: false,
            shouldIncludeSvgImages: false
        }
    });
// ...

Import PNG sprites into your app.

Install broccoli-funnel:

npm install -D broccoli-funnel

In your app's ember-cli-build.js:

var Funnel = require("broccoli-funnel");

module.exports = function (defaults) {
    var app = new EmberApp(defaults, {
            // ...
        }
    });

    const funnels = [

        // PNG sprites
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-20", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-20.png";
            }
        }),
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-48", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-48.png";
            }
        }),
        new Funnel(app.bowerDirectory + "/emojione-png-sprite-64", {
            include: ['index.png'],
            getDestinationPath () {
                return "assets/emojione-png-sprites/sprite-64.png";
            }
        }),
    ];

    if (app.env === "development" || app.env === "test") {
        app.import(app.bowerDirectory + "/timekeeper/lib/timekeeper.js");
    }

    return app.toTree(funnels);
};

In your app's Sass, include the mixin and invoke it:

@import "bower_components/emojione-png-sprite-style/index.scss";

@include sprity-emojione(20, "/assets/emojione-png-sprites", (2: 48, 3: 64));

This will break the looks of ember-emojione components. The addon contains a mixin that restores the looks:

@import 'node_modules/ember-emojione/app/styles/ember-emojione';

@include ember-emojione-cancel-scale;