Template - Githubissues

Hi,

I would like to create an own hbs template for the following structure:

@mixin prefix-filename {
  width: X;
  height: X;
  background-position: X X;
  @include background();
}
.
.
.
@mixin prefix-filename {
  width: X;
  height: X;
  background-position: X X;
  @include background();
}

@mixin background() {
  background-size: X X;
  background-repeat: no-repeat;
  background-image: url("sprite-with-its-path.png");

  .svg & {
    background-image: url("sprite-with-its-path.svg");
  }
}

But because I'm not really familiar with Handlebars template syntax the template what I've created is broken and doesn't work. it looks like this:

{{~#sizes~}}
{{~#items~}}

@mixin {{className}} {
  width: {{unit width ../../../config/cssUnit ../../../config/cssBaseFontSize}};
  height: {{unit height ../../../config/cssUnit ../../../config/cssBaseFontSize}};
  background-position: {{unit x ../../config/cssUnit ../../config/cssBaseFontSize -1}} {{unit y ../../config/cssUnit ../../config/cssBaseFontSize -1}};
  @include background();
}

{{/items~}}

@mixin background() {{prefix items ""}} {
  background-size: {{unit width ../../config/cssUnit ../../config/cssBaseFontSize}} {{unit height ../../config/cssUnit ../../config/cssBaseFontSize}};
  background-repeat: no-repeat;
  background-image: url("{{url pngPath ../../cssPath}}");

{{~/sizes~}}

  .svg & {
    background-image: url("{{url ../svgPath ../cssPath}}");
  }
}

When I try to build the sprite, I get this error message:

Building SVG sprites...
Fatal error: Arguments to path.resolve must be strings

But anyway the {{className}} at the mixin name also wrong if it's containing the "." (dot) at the beginning and also the background() mixin shouldn't contain any item-name too.

In the options I have defined the following attributes: spriteElementPath, spritePath, cssPath, prefix, layout, cssUnit, template

If I use the official template file, the sprite generates properly, so the Grunt config is fine.

Could you please help me what's the wrong with my code and how can I achieve my original goal?

Thank you in advance!

Update: I've posted this question on Stackoverflow as well, so anybody can earn points with a good answer! The question is here: http://stackoverflow.com/questions/28482662/hbs-template-with-grunt-dr-svg-sprites

I've found the solution! Here it is, maybe it will be helpful for somebody else too:

{{~#sizes~}}
{{~#items~}}
@mixin {{selector}} {
    width: {{unit width ../../config/cssUnit ../../config/cssBaseFontSize}};
    height: {{unit height ../../config/cssUnit ../../config/cssBaseFontSize}};
    background-position: {{unit x ../../config/cssUnit ../../config/cssBaseFontSize -1}} {{unit y ../../config/cssUnit ../../config/cssBaseFontSize -1}};
    @include background();
}
{{~/items~}}

@mixin background() {
    background-size: {{unit width ../config/cssUnit ../config/cssBaseFontSize}} {{unit height ../config/cssUnit ../config/cssBaseFontSize}};
    background-repeat: no-repeat;
    background-image: url("{{url pngPath ../cssPath}}");

    .svg & {
        background-image: url("{{url ../svgPath ../cssPath}}");
    }
}
{{~/sizes~}}

drdk / grunt-dr-svg-sprites

Template #41