group normal and retina don't match

[mikeya]

My generate groups aren't matching. I think it might be due to file names but this shouldn't happen. filenames: search.png search-2x.png search-blue.png search-blue-2x.png search-purple.png search-purple-2x.png

$search-group: (
            name: 'search',
            normal: $search,
            retina: $search-purple-2x
            );
 $shield-blue-group: (
            name: 'shield-blue',
            normal: $shield-blue,
            retina: $shield-blue-2x
            );

[twolfson]

In node, . has a lower lexicagraphical rank than - (i.e. '.' < '-' when sorted):

> var a = ['search.png',
... 'search-2x.png',
... 'search-blue.png',
... 'search-blue-2x.png',
... 'search-purple.png',
... 'search-purple-2x.png']
[ 'search.png',
  'search-2x.png',
  'search-blue.png',
  'search-blue-2x.png',
  'search-purple.png',
  'search-purple-2x.png' ]
> a.sort()
[ 'search-2x.png',
  'search-blue-2x.png',
  'search-blue.png',
  'search-purple-2x.png',
  'search-purple.png',
  'search.png' ]
> a
[ 'search-2x.png',
  'search-blue-2x.png',
  'search-blue.png',
  'search-purple-2x.png',
  'search-purple.png',
  'search.png' ]

To remedy this, you have a few options:

• Provide gulp.src glob in a fixed order
  • Instead of using *.png, you can force the order that gulp.spritesmith receives the sprites via providing an array with the names spelled out:

gulp.src(['search.png', 'search-2x.png', 'search-blue.png', 'search-blue-2x.png', 'search-purple.png', 'search-purple-2x.png'])
  .pipe(spritesmith({
    // ...
  }))

• Another option is to use a - consistently for all non-2x sprites (e.g. change search.png to search-1x.png)

mv search.png search-1x.png
mv search-blue.png search-blue-1x.png
mv search-purple.png search-purple-1x.png