Custom CSS Generation

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
 

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;

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);
 };

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();
+
+    });
+
 });