{
  // Default options
  'functions': true,
  'variableNameTransforms': ['underscored']
}

{{#block "sprites-comment"}}
/*
Stylus variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon_home_width;
}

The large array-like variables contain all information about a single icon
$icon_home = x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet = width height image $spritesheet_sprites;
*/
{{/block}}
{{#block "sprites"}}
{{#each sprites}}
${{strings.name_name}} = '{{name}}';
${{strings.name_x}} = {{px.x}};
${{strings.name_y}} = {{px.y}};
${{strings.name_offset_x}} = {{px.offset_x}};
${{strings.name_offset_y}} = {{px.offset_y}};
${{strings.name_width}} = {{px.width}};
${{strings.name_height}} = {{px.height}};
${{strings.name_total_width}} = {{px.total_width}};
${{strings.name_total_height}} = {{px.total_height}};
${{strings.name_image}} = '{{{escaped_image}}}';
${{strings.name}} = {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}} {{px.total_width}} {{px.total_height}} '{{{escaped_image}}}' '{{name}}';
{{/each}}
{{/block}}
{{#block "spritesheet"}}
${{spritesheet_info.strings.name_width}} = {{spritesheet.px.width}};
${{spritesheet_info.strings.name_height}} = {{spritesheet.px.height}};
${{spritesheet_info.strings.name_image}} = '{{{spritesheet.escaped_image}}}';
${{spritesheet_info.strings.name_sprites}} ={{#each sprites}} ${{strings.name}}{{/each}};
${{spritesheet_info.strings.name}} = {{spritesheet.px.width}} {{spritesheet.px.height}} '{{{spritesheet.escaped_image}}}' ${{spritesheet_info.strings.name_sprites}};
{{/block}}

{{#block "sprite-functions-comment"}}
{{#if options.functions}}
/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  spriteWidth($icon_home)
}

.icon-email {
  sprite($icon_email)
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
{{/if}}
{{/block}}
{{#block "sprite-functions"}}
{{#if options.functions}}
spriteWidth($sprite) {
  width: $sprite[4];
}

spriteHeight($sprite) {
  height: $sprite[5];
}

spritePosition($sprite) {
  background-position: $sprite[2] $sprite[3];
}

spriteImage($sprite) {
  background-image: url($sprite[8]);
}

sprite($sprite) {
  spriteImage($sprite)
  spritePosition($sprite)
  spriteWidth($sprite)
  spriteHeight($sprite)
}
{{/if}}
{{/block}}

{{#block "spritesheet-functions-comment"}}
{{#if options.functions}}
/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of Stylus

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

sprites($spritesheet_sprites);
*/
{{/if}}
{{/block}}
{{#block "spritesheet-functions"}}
{{#if options.functions}}
sprites($sprites) {
  for $sprite in $sprites {
    $sprite_name = $sprite[9];
    .{$sprite_name} {
      sprite($sprite);
    }
  }
}
{{/if}}
{{/block}}