Compass giving the error Unrecognized file type: png'))

Question

I am working on a moovweb project that uses compass. Right now, I am implementing support for 2x images for sprites.

What I am doing is to let compass generate the 1x sprite, like so:

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

And then, right after this, I am including and executing the scss file that will generate the sprite rules for 2x (using media queries):

@import "../_retina-sprites.scss";
$icons2x: sprite-map("icons2x/*.png");
.icons-logo {
  @include retina-sprite(logo, $icons2x);
}

.icons-bag { @include retina-sprite(bag, $icons2x); }

I created this _retina-sprites.scss (based on Adam Brodzinski's version) to contain a mixin to add the media query rule to choose the 2x images like so:

@import "compass/utilities/sprites";         // Include compass sprite helpers
@import "compass/css3/background-size";      // Include helper to calc background size

@mixin retina-sprite($name, $sprites2x) {
  background-repeat: no-repeat;
  @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    & {
      $pos: sprite-position($sprites2x, $name);
      background-image: sprite-url($sprites2x);
      background-position: nth($pos, 1) / 2 nth($pos, 2) / 2;
      @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2) auto);
    }
  }    
}

However, I am getting this output when generating the sprite on the line that calls sprite-path():

Syntax error: Unrecognized file type: png'))

Which makes me think that compass is writing a sprite-url instead of a sprite-path, hence giving the ')) suffix to the file name.

Has anyone come into this before?

Answer 1

Not sure what the problem could be, but you can run compass directly to perhaps get better output or insight as to what's happening.

The moov SDK uses the following compass command to compile your assets:

compass compile <my-project-path>/assets --relative-assets --sass-dir stylesheets --css-dir stylesheets/.css --images-dir images --require sass/plugin

Hopefully running that manually can provide you with more information.