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

Question

Update - 20140614:

After not getting any answers to this question, or on github, I decided to come up with my own solution to the problem. I was using compass for a number of things, but its main utility was in its ability to generated image sprites. Most other things could be accomplished using pure SCSS.

Thus, I wrote broccoli-sprite. This, used in conjunction with ember-cli's built in support for SCSS using broccoli-sass, was able to meet my needs.

You can read more about the process here.

Now I am thus no longer interested in integrating compass into my ember-cli app. As my solution does not directly answer the question (as it does not use compass), I consider this question to be unanswered. Since this question might yet benefit others in the community who wish to do so, I am leaving this open, and will still honour the bounty!

Update - 20140620:

Bounty has expired.

---

Original question:

In an ember-cli app, using broccoli-compass, how can it be configured such that the generated CSS references image file paths correctly, including generated image file paths?

Using compass, the following SCSS:

@import"icon/*.png";
@include all-icon-sprites;

… will generate a single .png file with all of the images in the icon folder, and CSS for displaying each.

I would like to be able to do the same via compass within ember-cli, which uses broccoli to build its asset pipeline.

• Must work within ember-cli - that is, it must be built when ember serve or ember build is run
• Must use compass to generate image sprites from a folder of images
• The images generated should be copied to the assets folder
• The generated CSS should point to images located in the assets folder, not to a temporary tree folder

---

What I have attempted so far:

#1

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    imagesDir: 'public/images',
    // imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

When I do this, the compass command fails because it cannot locate the image files within the tree.

#2

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    // imagesDir: 'public/images',
    imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

Just to try things out, I copy the image files into the styles directory. This time the compass command succeeds, but, the generated CSS references image files that do not exist. The generated images do not appear to get copied into the assets folder as expected ( or anywhere else for that matter):

$tree tmp/output
tmp/output/
├── assets
│   ├── app.css
│   ├── app.js
│   ├── qunit.css
│   ├── qunit.js
│   └── vendor.css
├── images
├── index.html
├── testem.js
└── tests
    └── index.html

3 directories, 8 files

---

Details:

SCSS that I would like to be able to compile (for sprite generation):

@import"compass/utilities/sprites";
$icon-layout: smart;
$icon-sprite-dimensions: true;
@import"icon/*.png";
@include all-icon-sprites;
@import"compass/css3/images";

---

Answer 1

I thought this would be solved by using an ember addon and postprocess hook, i published an addon,

To install run: npm install ember-cli-compass --save-dev inside your project.

Configure in your Brocfile.js.

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
    compass: {
        outputStyle: 'expanded',
        relativeAssets: false,
        sassDir: 'assets',
        imagesDir: 'images',
        cssDir: 'assets'
    }
});

module.exports = app.toTree();

This seems to do what you want but i am not sure. Also i needed to change public/images to just images, because public/images folder copies into dist/images. Maybe that's the issue and you don't need an addon.

I hope this fixs your problem.

Answer 2

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.