spritesheet-templates - npm Package Compare versions

Comparing version 7.0.2 to 7.1.0

CHANGELOG.md

 # spritesheet-templates changelog
+7.1.0 - Added `twolfson-style` for consistent styling and linting
+
 7.0.2 - Fixed missing link in README
@@ -3,0 +5,0 @@

lib/spritesheet-templates.js

 // Set up the template store
-var mustache = require('mustache'),
-    assert = require('assert'),
-    fs = require('fs'),
-    jsonContentDemux = require('json-content-demux'),
-    _ = require('underscore'),
-    templates = {};
+var assert = require('assert');
+var fs = require('fs');
+var _ = require('underscore');
+var mustache = require('mustache');
+var jsonContentDemux = require('json-content-demux');
+var templates = {};
 
-/**
- * @param {Object[]} input Object to convert into CSS
- * @param {String} input[*].name Name to use for the image
- * @param {Number} input[*].x Horizontal coordinate of top-left corner of image
- * @param {Number} input[*].y Vertical coordinate of top-left corner of image
- * @param {Number} input[*].width Horizontal length of image
- * @param {Number} input[*].height Vertical length of image
- * @param {Number} input[*].total_width Horizontal length of spritesheet
- * @param {Number} input[*].total_height Vertical length of spritesheet
- * @param {Number} input[*].image Path to image itself (used as a URL component)
- * @param {Object} [options] Options to convert JSON with
- * @param {String} [options.format="css"] Format to output json in
- * @param {Mixed} [options.formatOpts={}] Options to pass through to the formatter
- */
-function templater(input, options) {
-  // Fallback options
-  options = options || {};
-
-  var format = options.format || 'css',
-      template = templates[format],
-      formatOpts = options.formatOpts || {};
-
-  // Assert that the template exists
-  assert(template, 'The templater format ' + format + ' could not be found. Please make sure to either add it via addTemplate or the spelling is correct.');
-
-  // Clone the input
-  input = JSON.parse(JSON.stringify(input));
-
-  // Downcast the input into an array
-  var inputObj = new Input(input);
-  inputObj.ensureOffsetAndPx();
-  inputObj.escapeImages();
-
-  // Process the input via the template
-  input = inputObj['export']();
-  var retVal = template({'items': input, 'options': formatOpts});
-
-  // Return the output
-  return retVal;
-}
-
 function Input(input) {
@@ -55,3 +14,3 @@ this.input = input;
   // Helper function to ensure offset values exist as well as values with pixels in the name
-  'ensureOffsetAndPx': function () {
+  ensureOffsetAndPx: function () {
     // Iterate over the input and ensure there are offset values as well as pixel items
@@ -74,3 +33,3 @@ this.input.forEach(function (item) {
   // Helper function to escape images
-  'escapeImages': function () {
+  escapeImages: function () {
     // Iterate over the items
@@ -96,2 +55,44 @@ this.input.forEach(function (item) {
 
+/**
+ * @param {Object[]} input Object to convert into CSS
+ * @param {String} input[*].name Name to use for the image
+ * @param {Number} input[*].x Horizontal coordinate of top-left corner of image
+ * @param {Number} input[*].y Vertical coordinate of top-left corner of image
+ * @param {Number} input[*].width Horizontal length of image
+ * @param {Number} input[*].height Vertical length of image
+ * @param {Number} input[*].total_width Horizontal length of spritesheet
+ * @param {Number} input[*].total_height Vertical length of spritesheet
+ * @param {Number} input[*].image Path to image itself (used as a URL component)
+ * @param {Object} [options] Options to convert JSON with
+ * @param {String} [options.format="css"] Format to output json in
+ * @param {Mixed} [options.formatOpts={}] Options to pass through to the formatter
+ */
+function templater(input, options) {
+  // Fallback options
+  options = options || {};
+
+  var format = options.format || 'css';
+  var template = templates[format];
+  var formatOpts = options.formatOpts || {};
+
+  // Assert that the template exists
+  assert(template, 'The templater format "' + format + '" could not be found. Please make sure to either add ' +
+    'it via addTemplate or the spelling is correct.');
+
+  // Clone the input
+  input = JSON.parse(JSON.stringify(input));
+
+  // Downcast the input into an array
+  var inputObj = new Input(input);
+  inputObj.ensureOffsetAndPx();
+  inputObj.escapeImages();
+
+  // Process the input via the template
+  input = inputObj['export']();
+  var retVal = template({items: input, options: formatOpts});
+
+  // Return the output
+  return retVal;
+}
+
 // Expose the Input to the outside
@@ -106,5 +107,5 @@ templater.Input = Input;
   // Break up the template and default options
-  var tmplObj = jsonContentDemux(tmplStr),
-      defaults = tmplObj.json || {},
-      tmpl = tmplObj.content;
+  var tmplObj = jsonContentDemux(tmplStr);
+  var defaults = tmplObj.json || {};
+  var tmpl = tmplObj.content;
 
@@ -111,0 +112,0 @@ // Generate a function which processes objects through the mustache template

lib/templates/css.template.js

 // Load in local modules
-var fs = require('fs'),
-    _ = require('underscore'),
-    mustache = require('mustache'),
-    tmpl = fs.readFileSync(__dirname + '/css.template.mustache', 'utf8');
+var fs = require('fs');
+var mustache = require('mustache');
+var tmpl = fs.readFileSync(__dirname + '/css.template.mustache', 'utf8');
 
@@ -10,9 +9,9 @@ // Define our css template fn ({items, options}) -> css
   // Localize parameters
-  var items = params.items,
-      options = params.options;
+  var items = params.items;
+  var options = params.options;
 
   // Fallback class naming function
   var selectorFn = options.cssSelector || function defaultCssClass (item) {
-        return '.icon-' + item.name;
-      };
+    return '.icon-' + item.name;
+  };
 
@@ -19,0 +18,0 @@ // Add class to each of the options

lib/templates/json_array.template.js

 function jsonArrayTemplate(params) {
   // Stringify the array of itemsitemObj
-  var items = params.items,
-      retStr = JSON.stringify(items, null, 4);
+  var items = params.items;
+  var retStr = JSON.stringify(items, null, 4);
 
@@ -11,2 +11,2 @@ // Return the stringified JSON
 // Export our JSON template
-module.exports = jsonArrayTemplate;
+module.exports = jsonArrayTemplate;

lib/templates/json.template.js

 function jsonTemplate(params) {
   // Convert items from an array into an object
-  var items = params.items,
-      itemObj = {};
+  var items = params.items;
+  var itemObj = {};
   items.forEach(function (item) {
@@ -22,2 +22,2 @@ // Grab the name and store the item under it
 // Export our JSON template
-module.exports = jsonTemplate;
+module.exports = jsonTemplate;

package.json

 {
   "name": "spritesheet-templates",
   "description": "Convert spritesheet data into CSS or CSS pre-processor data",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "homepage": "https://github.com/twolfson/spritesheet-templates",
@@ -29,22 +29,28 @@ "author": {
   "scripts": {
-    "test": "mocha"
+    "precheck": "twolfson-style precheck lib/ test/",
+    "lint": "twolfson-style lint lib/ test/",
+    "pretest": "twolfson-style install",
+    "test": "npm run precheck && mocha && npm run lint"
   },
   "dependencies": {
+    "json-content-demux": "~0.1.2",
     "mustache": "~0.7.0",
-    "underscore": "~1.4.2",
-    "json-content-demux": "~0.1.2"
+    "underscore": "~1.4.2"
   },
   "devDependencies": {
+    "css-validator": "~0.5.0",
+    "eight-track": "~1.3.0",
+    "eight-track-normalize-multipart": "~0.1.0",
+    "express": "~3.4.8",
     "grunt": "~0.4.5",
+    "grunt-contrib-jshint": "~0.10.0",
+    "grunt-contrib-watch": "~0.6.1",
+    "jscs": "~1.8.1",
+    "jshint": "~2.5.11",
+    "less": "~1.3.3",
+    "mocha": "~1.14.0",
     "stylus": "~0.32.0",
-    "less": "~1.3.3",
     "temporary": "0.0.5",
-    "mocha": "~1.14.0",
-    "css-validator": "~0.5.0",
-    "express": "~3.4.8",
-    "underscore": "~1.4.4",
-    "eight-track-normalize-multipart": "~0.1.0",
-    "eight-track": "~1.3.0",
-    "grunt-contrib-jshint": "~0.10.0",
-    "grunt-contrib-watch": "~0.6.1"
+    "twolfson-style": "~1.6.0",
+    "underscore": "~1.4.4"
   },
@@ -51,0 +57,0 @@ "keywords": [

README.md

@@ -14,11 +14,17 @@ # spritesheet-templates [![Build status](https://travis-ci.org/twolfson/spritesheet-templates.svg?branch=master)](https://travis-ci.org/twolfson/spritesheet-templates)
 // Compilation
-var templater = require('spritesheet-templates'),
-    obj = [
-      {'name': 'github', 'x': 0, 'y': 0, 'width': 10, 'height': 20, 'total_width': 80, 'total_height': 100, 'image': 'spritesheet.png'},
-      {'name': 'twitter', 'x': 10, 'y': 20, 'width': 20, 'height': 30, 'total_width': 80, 'total_height': 100, 'image': 'spritesheet.png'},
-      {'name': 'rss', 'x': 30, 'y': 50, 'width': 50, 'height': 50, 'image': 'spritesheet.png'}
-    ],
-    stylus = templater(obj, {'format': 'stylus'});
+var templater = require('spritesheet-templates');
+var obj = [{
+  name: 'github', x: 0, y: 0, width: 10, height: 20,
+  total_width: 80, total_height: 100, image: 'spritesheet.png'
+}, {
+  name: 'twitter', x: 10, y: 20, width: 20, height: 30,
+  total_width: 80, total_height: 100, image: 'spritesheet.png'
+}, {
+  name: 'rss', x: 30, y: 50, width: 50, height: 50,
+  total_width: 80, total_height: 100, image: 'spritesheet.png'
+}];
+var stylus = templater(obj, {format: 'stylus'});
 
-// Result (stylus)
+// Result
+stylus; /*
 $github_x = 0px;
@@ -48,2 +54,3 @@ $github_y = 0px;
 }
+*/
 ```
@@ -311,11 +318,11 @@
 ## Contributing
-In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint via [grunt](https://github.com/cowboy/grunt) and test via `npm test`.
+In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint via `npm run lint` and test via `npm test`.
 
 ## Donating
-Support this project and [others by twolfson][gittip] via [gittip][].
+Support this project and [others by twolfson][gratipay] via [gratipay][].
 
-[![Support via Gittip][gittip-badge]][gittip]
+[![Support via Gratipay][gratipay-badge]][gratipay]
 
-[gittip-badge]: https://rawgithub.com/twolfson/gittip-badge/master/dist/gittip.png
-[gittip]: https://www.gittip.com/twolfson/
+[gratipay-badge]: https://cdn.rawgit.com/gratipay/gratipay-badge/2.x.x/dist/gratipay.png
+[gratipay]: https://www.gratipay.com/twolfson/
 
@@ -322,0 +329,0 @@ ## Unlicense

test/css_test.js

@@ -1,3 +0,2 @@
-var assert = require('assert'),
-    utils = require('./utils');
+var utils = require('./utils');
 
@@ -44,2 +43,1 @@ describe('An array of image positions, dimensions, and names', function () {
 });
-

test/json_test.js

@@ -1,3 +0,3 @@
-var assert = require('assert'),
-    utils = require('./utils');
+var assert = require('assert');
+var utils = require('./utils');
 
@@ -17,3 +17,3 @@ describe('An array of image positions, dimensions, and names', function () {
     before(function () {
-      this.options = {'format': 'json'};
+      this.options = {format: 'json'};
       this.filename = 'json.json';
@@ -28,3 +28,3 @@ });
     before(function () {
-      this.options = {'format': 'jsonArray'};
+      this.options = {format: 'jsonArray'};
       this.filename = 'jsonArray.json';
@@ -31,0 +31,0 @@ });

test/less_test.js

@@ -1,4 +0,4 @@
-var assert = require('assert'),
-    less = require('less'),
-    utils = require('./utils');
+var assert = require('assert');
+var less = require('less');
+var utils = require('./utils');
 
@@ -10,3 +10,3 @@ describe('An array of image positions, dimensions, and names', function () {
     before(function () {
-      this.options = {'format': 'less'};
+      this.options = {format: 'less'};
       this.filename = 'less.less';
@@ -13,0 +13,0 @@ });

test/sass_test.js

@@ -1,5 +0,5 @@
-var assert = require('assert'),
-    exec = require('child_process').exec,
-    Tempfile = require('temporary/lib/file'),
-    utils = require('./utils');
+var assert = require('assert');
+var exec = require('child_process').exec;
+var Tempfile = require('temporary/lib/file');
+var utils = require('./utils');
 
@@ -11,3 +11,3 @@ describe('An array of image positions, dimensions, and names', function () {
     before(function () {
-      this.options = {'format': 'sass'};
+      this.options = {format: 'sass'};
       this.filename = 'sass.sass';
@@ -14,0 +14,0 @@ });

test/scss_maps_test.js

@@ -1,5 +0,5 @@
-var assert = require('assert'),
-    exec = require('child_process').exec,
-    Tempfile = require('temporary/lib/file'),
-    utils = require('./utils');
+var assert = require('assert');
+var exec = require('child_process').exec;
+var Tempfile = require('temporary/lib/file');
+var utils = require('./utils');
 
@@ -11,3 +11,3 @@ describe('An array of image positions, dimensions, and names', function () {
     before(function () {
-      this.options = {'format': 'scss_maps'};
+      this.options = {format: 'scss_maps'};
       this.filename = 'scss_maps.scss';
@@ -14,0 +14,0 @@ });

test/scss_test.js

@@ -1,5 +0,5 @@
-var assert = require('assert'),
-    exec = require('child_process').exec,
-    Tempfile = require('temporary/lib/file'),
-    utils = require('./utils');
+var assert = require('assert');
+var exec = require('child_process').exec;
+var Tempfile = require('temporary/lib/file');
+var utils = require('./utils');
 
@@ -11,3 +11,3 @@ describe('An array of image positions, dimensions, and names', function () {
     before(function () {
-      this.options = {'format': 'scss'};
+      this.options = {format: 'scss'};
       this.filename = 'scss.scss';
@@ -14,0 +14,0 @@ });

test/stylus_test.js

@@ -1,4 +0,4 @@
-var assert = require('assert'),
-    stylus = require('stylus'),
-    utils = require('./utils');
+var assert = require('assert');
+var stylus = require('stylus');
+var utils = require('./utils');
 
@@ -10,3 +10,3 @@ describe('An array of image positions, dimensions, and names', function () {
     before(function () {
-      this.options = {'format': 'stylus'};
+      this.options = {format: 'stylus'};
       this.filename = 'stylus.styl';
@@ -13,0 +13,0 @@ });

test/utils/index.js

@@ -1,18 +0,24 @@
-var assert = require('assert'),
-    fs = require('fs'),
-    _ = require('underscore'),
-    eightTrack = require('eight-track'),
-    express = require('express'),
-    normalizeMultipart = require('eight-track-normalize-multipart'),
-    validateCss = require('css-validator'),
-    templater = require('../../');
+// Load in our dependencies
+var assert = require('assert');
+var fs = require('fs');
+var eightTrack = require('eight-track');
+var express = require('express');
+var normalizeMultipart = require('eight-track-normalize-multipart');
+var validateCss = require('css-validator');
+var templater = require('../../');
 
+// Start our utilities
 exports.setupImages = function () {
   before(function () {
     // TODO: The malicious URL should be placed in a separate test but I want to test every engine and hate the bloat
-    this.info = [
-      {'name': 'sprite1', 'x': 0, 'y': 0, 'width': 10, 'height': 20, 'total_width': 80, 'total_height': 100, 'image': 'nested/dir/spritesheet.png'},
-      {'name': 'sprite2', 'x': 10, 'y': 20, 'width': 20, 'height': 30, 'total_width': 80, 'total_height': 100, 'image': 'nested/dir/spritesheet.png'},
-      {'name': 'sprite3', 'x': 30, 'y': 50, 'width': 50, 'height': 50, 'total_width': 80, 'total_height': 100, 'image': 'nested/dir/( \'")/spritesheet.png'}
-    ];
+    this.info = [{
+      name: 'sprite1', x: 0, y: 0, width: 10, height: 20,
+      total_width: 80, total_height: 100, image: 'nested/dir/spritesheet.png'
+    }, {
+      name: 'sprite2', x: 10, y: 20, width: 20, height: 30,
+      total_width: 80, total_height: 100, image: 'nested/dir/spritesheet.png'
+    }, {
+      name: 'sprite3', x: 30, y: 50, width: 50, height: 50,
+      total_width: 80, total_height: 100, image: 'nested/dir/( \'")/spritesheet.png'
+    }];
   });
@@ -24,5 +30,5 @@ };
     // Convert info into result via templater
-    var options = this.options,
-        info = this.info,
-        result = options ? templater(info, options) : templater(info);
+    var options = this.options;
+    var info = this.info;
+    var result = options ? templater(info, options) : templater(info);
     this.result = result;
@@ -41,4 +47,4 @@
     // Load in the files and assert
-    var actual = this.result,
-        expected = fs.readFileSync(__dirname + '/../expected_files/' + this.filename, 'utf8');
+    var actual = this.result;
+    var expected = fs.readFileSync(__dirname + '/../expected_files/' + this.filename, 'utf8');
     assert.strictEqual(actual, expected);
@@ -45,0 +51,0 @@ });

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

81197

increased by4.19%

Number of package files

44

increased by7.32%

Lines of code

1084

increased by1.88%

Number of lines in readme file

336

increased by2.13%

Worsened metrics

Dev dependency count

15

increased by25%

No dependency changes