grunt-montage - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

Gruntfile.js

@@ -53,2 +53,18 @@ module.exports = function (grunt) {
                 }
+            },
+            base: {
+                files: {
+                    "tmp/base": [
+                        "test/fixtures/*.png"
+                    ]
+                },
+                options: {
+                    prefix: ".base",
+                    outputImage: "base.png",
+                    outputStylesheet: "base.css",
+                    baseRules: {
+                        display: "inline-block",
+                        "text-indent": "-9999px"
+                    }
+                }
             }
@@ -55,0 +71,0 @@ },

package.json

 {
     "name": "grunt-montage",
     "description": "Generate CSS sprite sheets and the corresponding stylesheet",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "author": {
@@ -6,0 +6,0 @@ "name": "James Allardice",

README.md

@@ -61,2 +61,8 @@ # montage
 
+#### options.baseRules
+Type: `Object`
+Default value: `undefined`
+
+A map of CSS properties/values that will be appended to the base rule in the stylesheet.
+
 #### options.magick
@@ -133,2 +139,24 @@ Type: `Object`
 
+In this example, custom options are used to add to the base CSS rule in the generated stylesheet. It will add `display` and `text-indent` properties to the base rule.
+
+```js
+grunt.initConfig({
+    montage: {
+        simple: {
+            files: {
+                "assets/sprites": [
+                    "images/icons/*.png"
+                ]
+            },
+            options: {
+                baseRules: {
+                    display: "inline-block",
+                    "text-indent": "-9999px"
+                }
+            }
+        }
+    }
+});
+```
+
 ## Contributing
@@ -135,0 +163,0 @@ In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).

tasks/montage.js

@@ -10,2 +10,9 @@ module.exports = function (grunt) {
 
+    // Build a CSS rule in the format 'selector { property: value; [... property: value;] }'
+    function buildRule(selector, properties) {
+        return selector + " { " + Object.keys(properties).map(function (property) {
+            return property + ": " + properties[property] + ";";
+        }).join(" ") + " }\n";
+    }
+
     grunt.registerMultiTask("montage", "Generate CSS sprite sheets and the corresponding stylesheet", function () {
@@ -22,2 +29,3 @@
                 outputStylesheet: "montage.css",
+                baseRules: {},
                 magick: {}
@@ -35,2 +43,7 @@ };
 
+        // Add necessary style rules to the base CSS
+        options.baseRules.background = "url('" + options.outputImage + "') no-repeat";
+        options.baseRules.width = options.size + "px";
+        options.baseRules.height = options.size + "px";
+
         // Build ImageMagick montage option string
@@ -56,3 +69,3 @@ cliOptions = Object.keys(options.magick).map(function (option) {
                 cols = Math.ceil(sqrt),
-                css = options.prefix + " { background: url('" + options.outputImage + "') no-repeat; width: " + options.size + "px; height: " + options.size + "px; }\n";
+                css = buildRule(options.prefix, options.baseRules);
 
@@ -66,15 +79,8 @@ // Create the output directory if necessary (ImageMagick errors if it doesn't exist)
             css += src.map(function (image, i) {
-                var offsetLeft = -options.size * (i % cols),
-                    offsetTop = -options.size * Math.floor(i / cols),
+                var offsetLeft = (-options.size * (i % cols)) + "px",
+                    offsetTop = (-options.size * Math.floor(i / cols)) + "px",
                     className = path.basename(image).replace(/\.\w+$/, "").replace(rSpecial, "\\$1");
-
-                // Only add the units if the value is not 0
-                if (offsetLeft) {
-                    offsetLeft += "px";
-                }
-                if (offsetTop) {
-                    offsetTop += "px";
-                }
-
-                return options.prefix + "." + className + " { background-position: " + offsetLeft + " " + offsetTop + "; }\n";
+                return buildRule(options.prefix + "." + className, {
+                    "background-position": offsetLeft + " " + offsetTop
+                });
             }).join("");
@@ -81,0 +87,0 @@

test/montage_test.js

@@ -19,2 +19,9 @@ exports.montage = (function () {
             test.done();
+        },
+        customBase: function (test) {
+            test.expect(3);
+            test.equal(grunt.file.exists("tmp/base/base.css"), true, "should generage a base.css file.");
+            test.equal(grunt.file.read("tmp/base/base.css").indexOf("display: inline-block;") > -1, true, "should add custom base rule properties to the CSS");
+            test.equal(grunt.file.read("tmp/base/base.css").indexOf("text-indent: -9999px;") > -1, true, "should add custom base rule properties to the CSS");
+            test.done();
         }
@@ -21,0 +28,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

33571

increased by6.56%

Lines of code

190

increased by18.01%

Number of lines in readme file

166

increased by20.29%

No dependency changes