Can't change CSS-selector output

[webgefrickel]

When I try to to change the resulting selector output for the CSS-file, it just won't do anything.

Gulp-Task like this:

gulp.task('sprites', function () {
  return gulp.src('assets/sprites/*.svg')
    .pipe(sprites({
      selector: 'icon--%f', // BEM-style selectors
    }))
    .pipe(gulp.dest('assets/compiled/'));
});

I had a look at the source, threw in some console.logs, and realized that in the tmpl/sprite.css-Template 'selector' is not used, but 'name'.

When trying to debug the sprite-items, I got sth. like this (example sprite with one plus.svg file):

{ name: 'plus',
  height: 200,
  width: 200,
  last: true,
  selector:
   [ { expression: 'icon--plus',
       raw: 'icon--plus',
       first: true,
       last: true } ],
  positionX: 0,
  positionY: -315,
  position: '0 -315px',
  dimensions: { selector: [ [Object] ], width: 200, height: 200 },
  data: '<svg width="200" height="200" viewBox="0 0 200 200" id="plus" y="315"><path fill="#fff" d="M90 0v90H0v20h90v90h20v-90h90V90h-90V0z"/></svg>\n',
  raw: '<path fill="#fff" d="M90 0v90H0v20h90v90h20v-90h90V90h-90V0z"/>',
  viewBox: '0 0 200 200' }

Long story short, changing this part in tmpl/style.css from

{#svg}
.{name}:before {
    background-position: {relPositionX}em {relPositionY}em;
    width: {relWidth}em;
    height: {relHeight}em;
}
{/svg}

to

{#svg}
.{selector[0].expression}:before {
    background-position: {relPositionX}em {relPositionY}em;
    width: {relWidth}em;
    height: {relHeight}em;
}
{/svg}

works.

BUT: I don't think that this is intended and the way to do it... (thus no pull request ;-))

[shakyShane]

Thanks for the detailed report.

Sounds like a bug to me, I'll be looking into it asap

[shakyShane]

Fixed in 1.0.2 - thanks again for investigating :)

[webgefrickel]

Thanks for fixing it that fast!