Not generating Css retina output file

[dutchwebworks]

Currently I'm using this Grunt setup below:

sprite: {
    all: {
        src: '_img_sprites/*.png',
        retinaSrcFilter: ['_img_sprites/*@2x.png'],
        dest: 'img/all-sprite.png',
        retinaDest: 'img/all-sprite@2x.png',
        destCss: 'scss/modules/_sprite.scss',
        cssFormat: 'css',
        cssTemplate: 'hbs/sprite-template.hbs',
        imgPath: '/img/all-sprite.png', 
        retinaImgPath: '/img/all-sprite@2x.png',
        cssVarMap: function (sprite) {
            sprite.name = 'sprite-' + sprite.name;
        }
    }
},

But I'm missing some kind of retinaDestCss setting for a custom scss/modules/_sprite-2x.scss output file.

When running grunt I'm not getting any retina related (rendert) Css output. Just the regular Css rendert output with no mentioning of any for example Css background-image: url(/img/all-sprite@2x.png); retina version of the sprite.

What am I doing wrong? Is the retina Css concatenated to the destCss file? I did get a Grunt warning about a missing grunt-contrib-concat. I've npm install this missing plugin; but still no retina related Css.

[twolfson]

Under normal circumstances, the destCss file will contain both normal and retina information/mixins/rules. Your setup seems to have some legacy from the non-retina version of spritesmith.

There are 2 problematic options you have which are causing problems:

• cssFormat overrides the default template used. By specifying css you are forcing spritesmith to use the normal CSS template, not a retina one
  • This is documented in the retina parameters section: https://github.com/Ensighten/grunt-spritesmith/tree/4.5.1#retina-parameters
    • For your case, we would want css_retina
  • However, this parameter might be irrelevant altogether if you are using cssTemplate which is looks like you are
• cssTemplate uses a custom defined template file. This means we load up the file and render our CSS based on that.
  • This is where your current destCss template is being generated from

To summarize your situation, your custom cssTemplate is likely the source of the problem and needs to be updated to support retina sprites. New parameters for retina cases can be found in the Templating section:

https://github.com/Ensighten/grunt-spritesmith/tree/4.5.1#templating

One other option is to ditch cssFormat and cssTemplate parameters and using the scss mixin for generating retina sprites.

// After importing autogenerated SCSS
@include retina-sprites($retina-groups);

The grunt-contrib-concat warning is likely another grunt task/configuration complaining.

[dutchwebworks]

Thanks for the tips. I've got a working version now (regular & retina) using custom Handlebar templates.