diff --git a/README.md b/README.md index 1c03623..493f7a4 100644 --- a/README.md +++ b/README.md @@ -86,6 +86,10 @@ The path to the images which should be transformed. You can use any glob pattern `namespace` (optional; default=imacss) +String || Function + +A string containing the css class namespace prefix, or a function to generate the entire CSS ruleset. + The CSS selector namespace. ### Usage example @@ -101,6 +105,23 @@ imacss .pipe(process.stdout); ``` +#### Passing a function to customise the resulting CSS rule set + +```javascript +var imacss = require('imacss'); + +function generateCss(image) { + return '.image-' + image.slug + ' { ' + 'background-image:' + 'url(\'' + image.datauri + '\');' }'; +} + +imacss + .transform('/path/to/your/images/*.png', generateCss) + .on('error', function (err) { + console.error('Transforming images failed: ' + err); + }) + .pipe(process.stdout); +``` + ## Changelog diff --git a/index.js b/index.js index 6632162..39736e4 100644 --- a/index.js +++ b/index.js @@ -21,15 +21,15 @@ var domain = require('domain'), * Transforms image files to base64 encoded data URIs and embeds them into CSS files. * * @param {string} glob A globbing expression for matching particular image files. - * @param {string} clazz The CSS class which will be used as a prefix. + * @param {string | function} css The CSS class which will be used as a prefix, or a function to generate the CSS rule set. * */ -exports.transform = function transform (glob, clazz) { +exports.transform = function transform (glob, css) { var execution = domain.create(), transformation; - clazz = clazz || pkg.name; + css = css || pkg.name; execution.on('error', function (err) { transformation.emit('error', err); @@ -42,7 +42,7 @@ exports.transform = function transform (glob, clazz) { .pipe(pipeline.slugify()) .pipe(pipeline.mimeify()) .pipe(pipeline.urify()) - .pipe(pipeline.cssify(clazz)); + .pipe(pipeline.cssify(css)); }); return transformation; diff --git a/lib/cssify.js b/lib/cssify.js index f8ea304..7977f94 100644 --- a/lib/cssify.js +++ b/lib/cssify.js @@ -21,13 +21,13 @@ var stream = require('stream'), * The stream which will transform the internal image * data structure into a CSS selector with the embedded file. * - * @param {string} clazz The CSS class which will be used as a prefix. + * @param {string | function} css The CSS class which will be used as a prefix, or a function to generate the CSS rule set. * @param {object} options Stream options. * */ -function Cssify (clazz, options) { +function Cssify (css, options) { - this.$$class = clazz; + this.css = css; options = options || {}; @@ -48,11 +48,17 @@ Cssify.prototype._transform = function _transform (image, enc, cb) { 'background-image': 'url(\'' + image.datauri + '\')' }; - this.push(Utilities.getCSSSelector(this.$$class, image.slug, selector) + '\n'); + if(typeof this.css === 'string') { + this.push(Utilities.getCSSSelector(this.css, image.slug, selector) + '\n'); + } + + if(this.css instanceof Function) { + this.push(this.css(image) + '\n'); + } cb(); }; -module.exports = function (clazz) { - return new Cssify(clazz); +module.exports = function (css) { + return new Cssify(css); }; \ No newline at end of file diff --git a/specs/cssify.spec.js b/specs/cssify.spec.js index 4fdaa5c..0b986a0 100644 --- a/specs/cssify.spec.js +++ b/specs/cssify.spec.js @@ -34,4 +34,22 @@ describe('The "cssification" stream', function () { stream.write(image); stream.end(); }); + + it('should generate a custom CSS rule set if a function is passed instead of a prefix string', function(done) { + + var image = helper.createImage(), + generateCss = function generateCss(image) { return image.name; }, + stream = cssify(generateCss); + + stream.on('data', function(ruleset) { + expect(ruleset).toBeDefined(); + expect(ruleset).toBe(image.name + '\n'); + done(); + }); + + stream.write(image); + stream.end(); + + }); + }); \ No newline at end of file