Pass Vinyl file object to the function 'to(iconFile)' in a new major version

.travis.yml

@@ -1,4 +1,5 @@
 language: node_js
 node_js:
-  - "stable"
+  - "8"
+  - "6"
   - "4"

README.md

@@ -8,6 +8,12 @@
 
 A wrapper for [gulp.spritesmith](https://github.com/twolfson/gulp.spritesmith) to generate multiple sprites and stylesheets.
 
+## Breaking changes in 4.0.0
+
+We have changed the parameter passed to the function [`to(iconFile)`](#toiconfile) from a file path string to a [Vinyl file object](https://gulpjs.com/docs/en/api/vinyl/).
+
+This allows users to obtain more useful information about the files consumed by `gulp.src()` and this plugin.
+
 ## Example
 
 ```javascript
@@ -120,8 +126,9 @@ gulp.task('sprite', ['clean'], function () {
   // Generate our spritesheet
   var spriteData = gulp.src('default/**/*.png')
     .pipe(spritesmith({
-      spritesmith: function (options) {
-        options.imgPath = '../images/' + options.imgName
+      spritesmith: function (options, sprite, icons) {
+        options.cssName = 'sprites/_' + sprite + ".scss";
+        options.imgPath = '../images/' + options.imgName;
       }
     }))
 
@@ -151,6 +158,10 @@ Type: `Function`, `String`
 
 If `String`, you just get one sprite.
 
+If `Function`,
+it receives each icon file (vinyl file object).
+You should return a string as its name. See [Split sprites support](#split-sprites-support).
+
 By default, icons are grouped by their directory names.
 
 
@@ -174,8 +185,7 @@ var options = {
 You can override them through this option.
 
 If `Function`,
-it receives the default options,
-the sprite name specified by `options.to`
+it receives the default options and sprite, sprite-name
 and the related icon files (vinyl file objects).
 Modify the options object passed in, or return a new one.
 
@@ -441,6 +451,133 @@ hover.css
 Though there are default `width` and `height` in the CSS rules,
 you can override them and the background image will be resized automatically.
 
+## Split sprites support
+
+You can generate split sprites like the `split` option in [sprity/sprity § How to use split option](https://github.com/sprity/sprity#how-to-use-split-option):
+
+```javascript
+gulp.task('split', ['clean'], function () {
+  var opts = {
+    to: function (file) {
+      return path.dirname(file.relative)
+          .replace(/[\/\\ ]/g, '-')
+    },
+  }
+  return gulp.src('split/**/*.png')
+    .pipe(spritesmith(opts))
+    .pipe(gulp.dest('build'))
+})
+```
+
+input:
+
+```
+⌘ tree split
+split
+├── new
+│   ├── hover
+│   │   ├── sprite1@2x.png
+│   │   ├── sprite1--hover@2x.png
+│   │   ├── sprite1--hover.png
+│   │   ├── sprite1.png
+│   │   ├── sprite2@2x.png
+│   │   ├── sprite2.png
+│   │   ├── sprite3@2x.png
+│   │   └── sprite3.png
+│   ├── normal
+│   │   ├── sprite1.png
+│   │   ├── sprite2.png
+│   │   └── sprite3.png
+│   └── retina
+│       ├── sprite1@2x.png
+│       ├── sprite1.png
+│       ├── sprite2@2x.png
+│       ├── sprite2.png
+│       ├── sprite3@2x.png
+│       └── sprite3.png
+└── old
+    ├── hover
+    │   ├── sprite1@2x.png
+    │   ├── sprite1--hover@2x.png
+    │   ├── sprite1--hover.png
+    │   ├── sprite1.png
+    │   ├── sprite2@2x.png
+    │   ├── sprite2.png
+    │   ├── sprite3@2x.png
+    │   └── sprite3.png
+    ├── normal
+    │   ├── sprite1.png
+    │   ├── sprite2.png
+    │   └── sprite3.png
+    └── retina
+        ├── sprite1@2x.png
+        ├── sprite1.png
+        ├── sprite2@2x.png
+        ├── sprite2.png
+        ├── sprite3@2x.png
+        └── sprite3.png
+```
+
+output:
+
+```
+⌘ tree build/
+build
+├── new-hover@2x.png
+├── new-hover.css
+├── new-hover.png
+├── new-normal.css
+├── new-normal.png
+├── new-retina@2x.png
+├── new-retina.css
+├── new-retina.png
+├── old-hover@2x.png
+├── old-hover.css
+├── old-hover.png
+├── old-normal.css
+├── old-normal.png
+├── old-retina@2x.png
+├── old-retina.css
+└── old-retina.png
+```
+
+new-hover.css
+
+```css
+.sp-new-hover {
+  background-image: url(new-hover.png);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+       (min-resolution: 192dpi) {
+  .sp-new-hover {
+    background-image: url(new-hover@2x.png);
+    background-size: 150px 200px;
+  }
+}
+
+.sp-new-hover__sprite1:hover {
+  background-position: -100px 0px;
+  width: 50px;
+  height: 50px;
+}
+.sp-new-hover__sprite1 {
+  background-position: -100px -50px;
+  width: 50px;
+  height: 50px;
+}
+.sp-new-hover__sprite2 {
+  background-position: -100px -100px;
+  width: 50px;
+  height: 50px;
+}
+.sp-new-hover__sprite3 {
+  background-position: 0px 0px;
+  width: 100px;
+  height: 200px;
+}
+```
+
 ## Utils
 
 ### exports.util

index.js

@@ -28,12 +28,12 @@ function gulpSpritesmith(opts) {
       return opts.to(file)
     }
     return path.basename(
-      path.dirname(file)
+      path.dirname(file.path)
     )
   }
 
   function write(file, _, next) {
-    var sprite = to(file.path)
+    var sprite = to(file)
     groups[sprite] = groups[sprite] || []
     groups[sprite].push(file)
     next()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gulp.spritesmith-multi",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "A wrapper for gulp.spritesmith to generate multiple sprites and stylesheets",
   "main": "index.js",
   "dependencies": {

test/fixtures/expected/split/new-hover.css

@@ -0,0 +1,32 @@
+.sp-new-hover {
+  background-image: url(new-hover.png);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+       (min-resolution: 192dpi) {
+  .sp-new-hover {
+    background-image: url(new-hover@2x.png);
+    background-size: 150px 200px;
+  }
+}
+
+.sp-new-hover__sprite1:hover {
+  background-position: -100px 0px;
+  width: 50px;
+  height: 50px;
+}
+.sp-new-hover__sprite1 {
+  background-position: -100px -50px;
+  width: 50px;
+  height: 50px;
+}
+.sp-new-hover__sprite2 {
+  background-position: -100px -100px;
+  width: 50px;
+  height: 50px;
+}
+.sp-new-hover__sprite3 {
+  background-position: 0px 0px;
+  width: 100px;
+  height: 200px;
+}

test/fixtures/expected/split/new-normal.css

@@ -0,0 +1,20 @@
+.sp-new-normal {
+  background-image: url(new-normal.png);
+}
+
+
+.sp-new-normal__sprite1 {
+  background-position: -100px 0px;
+  width: 50px;
+  height: 50px;
+}
+.sp-new-normal__sprite2 {
+  background-position: -100px -50px;
+  width: 50px;
+  height: 50px;
+}
+.sp-new-normal__sprite3 {
+  background-position: 0px 0px;
+  width: 100px;
+  height: 200px;
+}

test/fixtures/expected/split/new-retina.css

@@ -0,0 +1,27 @@
+.sp-new-retina {
+  background-image: url(new-retina.png);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+       (min-resolution: 192dpi) {
+  .sp-new-retina {
+    background-image: url(new-retina@2x.png);
+    background-size: 150px 200px;
+  }
+}
+
+.sp-new-retina__sprite1 {
+  background-position: -100px 0px;
+  width: 50px;
+  height: 50px;
+}
+.sp-new-retina__sprite2 {
+  background-position: -100px -50px;
+  width: 50px;
+  height: 50px;
+}
+.sp-new-retina__sprite3 {
+  background-position: 0px 0px;
+  width: 100px;
+  height: 200px;
+}

test/fixtures/expected/split/old-hover.css

@@ -0,0 +1,32 @@
+.sp-old-hover {
+  background-image: url(old-hover.png);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+       (min-resolution: 192dpi) {
+  .sp-old-hover {
+    background-image: url(old-hover@2x.png);
+    background-size: 150px 200px;
+  }
+}
+
+.sp-old-hover__sprite1:hover {
+  background-position: -100px 0px;
+  width: 50px;
+  height: 50px;
+}
+.sp-old-hover__sprite1 {
+  background-position: -100px -50px;
+  width: 50px;
+  height: 50px;
+}
+.sp-old-hover__sprite2 {
+  background-position: -100px -100px;
+  width: 50px;
+  height: 50px;
+}
+.sp-old-hover__sprite3 {
+  background-position: 0px 0px;
+  width: 100px;
+  height: 200px;
+}

test/fixtures/expected/split/old-normal.css

@@ -0,0 +1,20 @@
+.sp-old-normal {
+  background-image: url(old-normal.png);
+}
+
+
+.sp-old-normal__sprite1 {
+  background-position: -100px 0px;
+  width: 50px;
+  height: 50px;
+}
+.sp-old-normal__sprite2 {
+  background-position: -100px -50px;
+  width: 50px;
+  height: 50px;
+}
+.sp-old-normal__sprite3 {
+  background-position: 0px 0px;
+  width: 100px;
+  height: 200px;
+}

test/fixtures/expected/split/old-retina.css

@@ -0,0 +1,27 @@
+.sp-old-retina {
+  background-image: url(old-retina.png);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+       (min-resolution: 192dpi) {
+  .sp-old-retina {
+    background-image: url(old-retina@2x.png);
+    background-size: 150px 200px;
+  }
+}
+
+.sp-old-retina__sprite1 {
+  background-position: -100px 0px;
+  width: 50px;
+  height: 50px;
+}
+.sp-old-retina__sprite2 {
+  background-position: -100px -50px;
+  width: 50px;
+  height: 50px;
+}
+.sp-old-retina__sprite3 {
+  background-position: 0px 0px;
+  width: 100px;
+  height: 200px;
+}

test/index.js

@@ -30,6 +30,16 @@ test(
   })
 )
 
+test(
+  'split',
+  runTest.bind(null, 'split', {
+    to: function (file) {
+      return path.dirname(file.relative)
+          .replace(/[\/\\ ]/g, '-')
+    },
+  })
+)
+
 test(
   'custom-template',
   runTest.bind(null, 'custom-template', {