twolfson / gulp.spritesmith

Convert a set of images into a spritesheet and CSS variables via gulp
The Unlicense
1.08k stars 81 forks source link

Can't use multiple files as Handlebars template passed to “cssTemplate" option #77

Closed aminta closed 8 years ago

aminta commented 9 years ago

I would use the original scss-handlebars templates you provide (‘css_maps_retina.template.handlebars', ‘css_maps.template.handlebars’, ‘’, ‘css_retina.template.handlebars', 'css.template.handlebars') and change two things (add ‘display: inline-block;’ to all icons and prepend ‘social-icon-‘ to each icon class name.

I have to do these changes on the original files (located in 'node_modules/gulp.spritesmith/node_modules/spritesheet-templates/lib/templates’) because gulp.spritesmith option “cssTemplate" let me to choose only one template file and not all four templates…

Any hint?

Thanks!

twolfson commented 8 years ago

I believe this might be getting caused by the templates overwriting each other:

https://github.com/twolfson/gulp.spritesmith/blob/5.0.1/lib/gulp-spritesmith.js#L322-L330

However, we will need to triage it. Unfortunately, I don't have time to do that right now but I will take care of it by the end of the weekend.

In the interim as a workaround (if that is the problem), then defining custom templates by requiring templater should work. Here's an example:

// Register custom templates
var templater = require('templater');
templater.addHandlebarsTemplate('custom_maps_retina',
  fs.readFileSync('my_css_maps_retina.template.handlebars'), 'utf8'));

// Use `gulp.spritesmith` with custom template
spritesmith({
  // imgName, cssName,
  cssFormat: 'custom_maps_retina'
});

Note to self: A few options (1) Update spritesheet-templates to accept dynamic templates (i.e. without a name). (2) Update gulp. and grunt- to use params.cssFormat as override for cssTemplate and add assert in templater about templates already being defined.

twolfson commented 8 years ago

Upon re-reading the initial issue, could you explain why you need 4 separate templates?

For reference, gulp.spritesmith supports custom templates via a filepath passed to cssTemplate as well as inheritance from existing templates:

https://github.com/twolfson/gulp.spritesmith/tree/5.0.1#spritesmithparams

https://github.com/twolfson/gulp.spritesmith/tree/5.0.1#templating

https://github.com/twolfson/gulp.spritesmith/tree/5.0.1#handlebars-template

https://github.com/twolfson/gulp.spritesmith/tree/5.0.1#handlebars-inheritance

aminta commented 8 years ago

Because if I pass to "cssTemplate" a "mydir/css.template.handlebars", it gets this template, but it reads the partials (‘css_maps_retina.template.handlebars', ‘css_maps.template.handlebars’, ‘’, ‘css_retina.template.handlebars') from 'node_modules/gulp.spritesmith/node_modules/spritesheet-templates/lib/templates’ path and not from "mydir/'" path...

twolfson commented 8 years ago

I don't fully follow. Can you create a gist (gist.github.com) of your configuration, template, and output you are seeing?

twolfson commented 8 years ago

Closing issue due to 2 months of inactivity