gulp.spritesmith - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

 # gulp.spritesmith changelog
+0.2.0 - Added support for `cssTemplate` via @backflip in #3
+
 0.1.1 - Update all name references from `gulp-spritesmith` to `gulp.spritesmith`
 
 0.1.0 - Initial release

lib/gulp-spritesmith.js

@@ -10,2 +10,3 @@ var assert = require('assert');
 var url = require('url2');
+var fs = require('fs');
 
@@ -148,2 +149,14 @@ function ExtFormat() {
       var cssFormat = params.cssFormat || cssFormats.get(cssName) || 'json';
+      var cssTemplate = params.cssTemplate;
+
+      // If there's a custom template, use it
+      if (cssTemplate) {
+        cssFormat = 'spritesmith-custom';
+        if (typeof cssTemplate === 'function') {
+          json2css.addTemplate(cssFormat, cssTemplate);
+        } else {
+          json2css.addMustacheTemplate(cssFormat, fs.readFileSync(cssTemplate, 'utf8'));
+        }
+      }
+
       var cssStr = json2css(cleanCoords, {'format': cssFormat, 'formatOpts': params.cssOpts || {}});
@@ -150,0 +163,0 @@ // END OF BARELY MODIFIED SECTION FROM grunt-spritesmith@1.22.0

package.json

 {
   "name": "gulp.spritesmith",
   "description": "Convert a set of images into a spritesheet and CSS variables via gulp",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "homepage": "https://github.com/twolfson/gulp.spritesmith",
@@ -6,0 +6,0 @@ "author": {

README.md

@@ -75,2 +75,4 @@ # gulp.spritesmith [![Build status](https://travis-ci.org/twolfson/gulp.spritesmith.png?branch=master)](https://travis-ci.org/twolfson/gulp.spritesmith)
       - An example can be found [here][cssvarmap-example]
+  - cssTemplate `Function|String` - CSS templating function or path to alternative [mustache][] template
+      - More information can be found in the [cssTemplate][] section
   - cssOpts `Object` - Container for CSS templates
@@ -86,2 +88,3 @@ - functions `Boolean` - Skip output of mixins
 [JSON]: http://json.org/
+[mustache]: http://mustache.github.io/
 
@@ -91,2 +94,3 @@ [engine]: #engines
 [cssvarmap-example]: #using-cssvarmap
+[cssTemplate]: #cssTemplate
 [cssclass-example]: #using-cssoptscssclass
@@ -169,2 +173,70 @@
 
+#### cssTemplate
+`gulp.spritespritesmith` allows you to define your own CSS template, either via a `function` or [mustache][] template.
+
+If you pass in a `Function`, it should have a signature of `function (params) {}` and return a `String`.
+
+If you pass in a `String`, we treat this as a path; reading in the file and rendering it via [mustache.js][mustache]. The template will be passed the same `params` as in the `Function` case.
+
+> An example template is https://github.com/twolfson/json2css/blob/4.2.0/lib/templates/stylus.template.mustache
+
+#### `params`
+`params` is an object with some normalization nicities from [`json2css`][], our default collection of templates.
+
+- params `Object`
+    - items `Object[]` - Array of sprite information
+      - name `String` - Name of the sprite file (sans extension)
+      - x `Number` - Horizontal position of sprite's left edge in spritesheet
+      - y `Number` - Vertical position of sprite's top edge in spritesheet
+      - width `Number` - Width of sprite
+      - height `Number` - Height of sprite
+      - total_width `Number` - Width of entire spritesheet
+      - total_height `Number` - Height of entire spritesheet
+      - image `String` - Relative URL path from CSS to spritesheet
+      - escaped_image `String` - URL encoded `image`
+      - source_image `String` - Path to the original sprite file
+      - offset_x `Number` - Negative value of `x`. Useful to `background-position`
+      - offset_y `Number` - Negative value of `y`. Useful to `background-position`
+      - px `Object` - Container for numeric values including `px`
+        - x `String` - `x` suffixed with `px`
+        - y `String` - `y` suffixed with `px`
+        - width `String` - `width` suffixed with `px`
+        - height `String` - `height` suffixed with `px`
+        - total_width `String` - `total_width` suffixed with `px`
+        - total_height `String` - `total_height` suffixed with `px`
+        - offset_x `String` - `offset_x` suffixed with `px`
+        - offset_y `String` - `offset_y` suffixed with `px`
+    - options `Object` - Options passed in via `cssOpts` in `grunt-spritesmith` config
+
+[`json2css`]: https://github.com/twolfson/json2css
+
+An example sprite `item` is:
+
+```js
+{
+  "name": "sprite2",
+  "x": 10,
+  "y": 20,
+  "width": 20,
+  "height": 30,
+  "total_width": 80,
+  "total_height": 100,
+  "image": "nested/dir/spritesheet.png",
+  "escaped_image": "nested/dir/spritesheet.png",
+  "source_image": "path/to/original/sprite.png",
+  "offset_x": -10,
+  "offset_y": -20,
+  "px": {
+    "x": "10px",
+    "y": "20px",
+    "width": "20px",
+    "height": "30px",
+    "total_width": "80px",
+    "total_height": "100px",
+    "offset_x": "-10px",
+    "offset_y": "-20px"
+  }
+}
+```
+
 ## Examples
@@ -171,0 +243,0 @@ ### Using `cssVarMap`

test/gulp-spritesmith_test.js

@@ -60,2 +60,18 @@ var assert = require('assert');
   });
+
+  describe('running a task with a custom CSS template', function () {
+    childUtils.run('gulp sprite-template');
+    imageUtils.loadActual(__dirname + '/actual-files/template/sprite.png');
+    imageUtils.loadExpected(__dirname + '/expected-files/template/mint-graphicsmagick.png');
+
+    it('generates a top-down png', function () {
+      assert.deepEqual(this.actualPixels, this.expectedPixels);
+    });
+
+    it('generates a css file', function () {
+      var actualCss = fs.readFileSync(__dirname + '/actual-files/template/sprite.scss', 'utf8');
+      var expectedCss = fs.readFileSync(__dirname + '/expected-files/template/sprite.scss', 'utf8');
+      assert.strictEqual(actualCss, expectedCss);
+    });
+  });
 });

test/gulpfile.js

@@ -43,1 +43,11 @@ var gulp = require('gulp');
 });
+
+gulp.task('sprite-template', function () {
+  var spriteData = gulp.src(images).pipe(spritesmith({
+    imgName: 'sprite.png',
+    cssName: 'sprite.scss',
+    cssTemplate: 'test-files/scss.template.mustache'
+  }));
+  spriteData.img.pipe(gulp.dest('actual-files/template/'));
+  spriteData.css.pipe(gulp.dest('actual-files/template/'));
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

236904

increased by5.09%

Number of package files

41

increased by7.89%

Lines of code

438

increased by8.15%

Number of lines in readme file

346

increased by26.28%

Worsened metrics

Number of low supply chain risk alerts

3

increased by50%

No dependency changes