feat(sprite): add retina support

Author: jpatovh

docs/features/sprite.md

@@ -1,5 +1,7 @@
 Uses [gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith). Grabs a folder of images and turns them into a sprite, creates a Sass mixin and class for each based on filename.
 
+A documentation for SCSS features is available [here](https://www.bignerdranch.com/blog/css-sprite-management-with-gulp-part2/).
+
 ## Usage
 
 Given a file named `facebook.png`, you can use this Sass mixin:
@@ -11,9 +13,23 @@ Given a file named `facebook.png`, you can use this Sass mixin:
 Or this HTML class:
 
 ```html
-<span class="sprite_facebook"></span>
+<span class="sprite-facebook"></span>
 ```
 
+### Retina support
+
+You can generate a second sprite for Retina.
+First, you need to duplicates all your images for Retina, and append "@2x" in the filename. For example: "facebook.png" and "[email protected]".
+
+After enabled it, you can now use the mixin:
+
+```scss
+@include retina-sprite('sprite-facebook');
+```
+
+It will automatically take sprite@2x for Retina devices, and normal sprite for others.
+
+
 ## Commands
 
 - `gulp sprite` - Generates the sprite
@@ -29,5 +45,8 @@ Or this HTML class:
 - `config.sprite.imgPathPrefix` - Sprite image path prefix
 - `config.sprite.spritesheetName` - Name of the sprite
 - `config.sprite.imagemin` - Enable imagemin compression for the sprite image file
+- `config.sprite.retina.enabled` - Enable retina sprite generation
+- `config.sprite.retina.imgName` - Name of the retina sprite image file
+- `config.sprite.retina.filter` - Images filter that match the retina files
 
 ---

gulpfile.default.yml

@@ -97,6 +97,11 @@ sprite:
   imgPathPrefix: ../dist/
   spritesheetName: sprite
   imagemin: true
+  retina:
+    enabled: false
+    imgName: [email protected]
+    filter:
+      - images/sprite/*@2x.png
 patternLab:
   enabled: false
   configFile: pattern-lab/config/config.yml

lib/sprite.js

@@ -16,9 +16,13 @@ module.exports = (gulp, config, tasks) => {
         imgPath: `${config.sprite.imgPathPrefix}${config.sprite.imgName}`,
         cssName: config.sprite.cssName,
         cssSpritesheetName: config.sprite.spritesheetName,
+        retinaSrcFilter: config.sprite.retina.enabled ? config.sprite.retina.filter : undefined,
+        retinaImgName: config.sprite.retina.enabled ? config.sprite.retina.imgName : undefined,
+        retinaImgPath: config.sprite.retina.enabled ? `${config.sprite.imgPathPrefix}${config.sprite.retina.imgName}` : undefined,
+        cssRetinaSpritesheetName: config.sprite.retina.enabled ? `${config.sprite.spritesheetName}-2x` : undefined,
         cssVarMap(datas) {
           // eslint-disable-next-line no-param-reassign
-          datas.name = `${config.sprite.spritesheetName}_${datas.name}`;
+          datas.name = `${config.sprite.spritesheetName}-${datas.name}`;
         }
       }));