How to Generate Image Sprites in Ember-Cli Using Compass

How to generate image sprites in ember-cli using compass?

The hard way

Add to your brocfile

var app = new EmberApp({
    compassOptions: {
        imagesDir: 'public/assets'
    }
});

and then import the icons

@import "compass/utilities/sprites";
@import "icons/*.png";

$icons-sprite-dimensions: true;
@include all-icons-sprites;

and overwrite the path

.icons-sprite {
    background-image: url('/assets/icons-sea02d16a6c.png');
}

The more elegant way

Configure compass to use particular directory

@import "compass/utilities/sprites";
@import "compass/configuration";

$compass-options: (http_path: "/", generated-images-path: "public/assets", http-generated-images-path: "/assets", images-path: "public/assets");

@include compass-configuration($compass-options);

@import "icons/*.png";
$icons-sprite-dimensions: true;
@include all-icons-sprites;

It is not a perfect solution although it works. Configuration should not be stored in .scss files. Unfortunately those options inside brocfile are not going to fly.

Compiling Compass in an Ember-CLI project

Try this (added prefix and cssDir):

var compileCompass = require('broccoli-compass');
var styles = compileCompass(appAndDependencies, prefix + '/styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: prefix + '/styles',
    imagesDir: 'public/images/',
    cssDir: '/assets'
});

Steffen

How to add broccoli-compass to ember-cli v0.0.28?

you need to install broccoli-compass:

npm install broccoli-compass --save-dev

and you need to install ruby gem sass-css-importer:

gem install sass-css-importer --pre

then in your brocfile do this:

var compileCompass = require('broccoli-compass');

app.styles = function() {
  var vendor = this._processedVendorTree();
  var styles = pickFiles(this.trees.styles, {
    srcDir: '/',
    destDir: '/app/styles'
  });

  var stylesAndVendor = mergeTrees([vendor, styles, 'public']);

  return compileCompass(stylesAndVendor, 'app' + '/styles/app.scss', {
    outputStyle: 'expanded',
    require: 'sass-css-importer',
    sassDir: 'app' + '/styles',
    imagesDir: 'images',
    fontsDir: 'fonts',
    cssDir: '/assets'
  });
};

compass sprite image generated on /tmp

We have end up making our own sprite.png and embed as base64 image through less on our css, is not a solution for the problem but it's an acceptable workaround for the company.

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

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;
```

Creating CSS sprites using Sass without Compass?

Sass itself will not help you with sprites generation.

You'll have to use a task runner to achieve that. As you're not willing to use Compass, i assume you're in a Node environment.

The most popular (but not the best there is) task runner is Grunt.

Grunt has a number of recipes for sprite generation. I managed to google up some for you (in no particular order):

https://www.npmjs.org/package/grunt-sprite
https://www.npmjs.org/package/grunt-imagine
https://www.npmjs.org/package/grunt-sprite-generator
https://www.npmjs.org/package/grunt-spritesmith
https://www.npmjs.org/package/grunt-sprite-packer

Rail + Compass sprite generation gives wrong image path

Are you using compass-rails? It ensures proper integration with the asset pipeline.

Since Compass v0.12, this adapter is the only way to install compass into your rails application.

Don't use a relative path to the source images. Image path references already search through the asset load path. Rails is configured to include app/assets/images in the asset load path by default.

Change the import to:

@import "category-icons/type/*.png"

How to Generate Image Sprites in Ember-Cli Using Compass