added support to inline images in output using option --inlineImages

lib/compile/inline-images.js

@@ -0,0 +1,45 @@
+// ==========================================
+// RECESS
+// COMPILE: replaces image links with base64 image data
+// ==========================================
+// Copyright 2012 Twitter, Inc
+// Licensed under the Apache License v2.0
+// http://www.apache.org/licenses/LICENSE-2.0
+// ==========================================
+
+'use strict'
+
+var less = require('less')
+  , fs = require('fs')
+  , seperator = (process.platform == 'win32') ? '\\' : '/'
+  , toCSS
+  , path
+
+function compile () {
+  // strip units from 0 values
+  var props = toCSS.apply(this, arguments)
+
+  // do we have a url here?
+  if (/url\(([a-zA-Z\"\'.]+)\)/.test(props)) {
+    var fileName = props.replace(/url\((\"|\'|)/, '').replace(/(\"|\'|)\)/, '')
+      , chunks = fileName.split('.')
+      , ext = chunks[chunks.length - 1]
+      , mimetype = 'image/' + ext.replace(/jpg/, 'jpeg')
+      , pathParts = path.split('/')
+      , filePath = pathParts.slice(0, pathParts.length - 1).join(seperator)
+
+    return props.replace(/url\(([a-zA-Z\"\'.]+)\)/, 'url(data:' + mimetype + ';base64,' + new Buffer(fs.readFileSync(filePath+seperator+fileName)).toString('base64') + ')')
+  }
+
+  return props
+}
+
+module.exports.on = function () {
+  path = this.path
+  toCSS = less.tree.Value.prototype.toCSS
+  less.tree.Value.prototype.toCSS = compile
+}
+
+module.exports.off = function () {
+  less.tree.Value.prototype.toCSS = toCSS
+}

lib/core.js

@@ -149,7 +149,7 @@ RECESS.prototype = {
     Object.keys(this.options).forEach(function (key) {
       that.options[key]
         && RECESS.COMPILERS[key]
-        && RECESS.COMPILERS[key].on()
+        && RECESS.COMPILERS[key].on.call(that)
     })
 
     // iterate over defintions and compress them (join with new lines)

lib/index.js

@@ -81,6 +81,7 @@ module.exports.DEFAULTS = RECESS.DEFAULTS = {
 , stripColors: false
 , watch: false
 , zeroUnits: true
+, inlineImages: true
 }
 
 

lib/lint/inline-images.js

@@ -0,0 +1,60 @@
+// ===================================================
+// RECESS
+// RULE: Linked images should be embeded.
+// ===================================================
+// Copyright 2012 Twitter, Inc
+// Licensed under the Apache License v2.0
+// http://www.apache.org/licenses/LICENSE-2.0
+// ===================================================
+
+'use strict'
+
+var util = require('../util')
+  , RULE = {
+      type: 'inlineImages'
+    , exp: /url\(([a-zA-Z\"\'.]+)\)/
+    , message: 'Linked images should be embeded.'
+    }
+
+// validation method
+module.exports = function (def, data) {
+
+  // default validation to true
+  var isValid = true
+
+  // return if no selector to validate
+  if (!def.rules) return isValid
+
+  // loop over selectors
+  def.rules.forEach(function (rule) {
+    var extract
+
+    // continue to next rule if no url is present
+    if ( !(rule.value
+        && rule.value.is == 'value'
+        && RULE.exp.test(rule.value.toCSS({}))) ) return
+
+    // calculate line number for the extract
+    extract = util.getLine(rule.index, data)
+    extract = util.padLine(extract)
+
+    // highlight invalid 0 units
+    extract += rule.toCSS({}).replace(RULE.exp, function ($1) {
+      return $1.magenta
+    })
+
+    // set invalid flag to false
+    isValid = false
+
+    // set error object on defintion token
+    util.throwError(def, {
+      type: RULE.type
+    , message: RULE.message
+    , extract: extract
+    })
+
+  })
+
+  // return validation state
+  return isValid
+}

test/fixtures/inline-images.css

@@ -0,0 +1,9 @@
+.foo {
+  background-image: url("sprite.png");
+}
+.bar {
+  background: url('sprite.png');
+}
+.fat {
+  background: url(sprite.png);
+}

test/types/compile.js

@@ -4,6 +4,10 @@ var fs = require('fs')
   , RECESS = require('../../lib')
 
 fs.readdirSync('test/fixtures').forEach(function (file, index) {
+  // Ignore anything not a less/css file.
+  if (file.indexOf('css') === -1 && file.indexOf('less') === -1) {
+  	return
+  }
 
   RECESS('test/fixtures/' + file, { compile: true  }, function (err, fat) {
     file = file.replace(/less$/, 'css')

test/types/lint.js

@@ -214,4 +214,30 @@ var assert = require('assert')
 
 }()
 
+//VALIDATIONS.inlineImage
+!function () {
+
+  var path = 'test/fixtures/inline-images.css'
+    , Recess = new RECESS.Constructor()
+    , validate = RECESS.Constructor.prototype.validate
+    , def
+
+  RECESS.Constructor.prototype.validate = noop
+
+  Recess.data = fs.readFileSync(path, 'utf8')
+
+  Recess.parse()
+
+  def = Recess.definitions[0]
+
+  RECESS.Constructor.RULES.inlineImages(def, Recess.data)
+
+  assert.ok(def.errors)
+  assert.equal(def.errors.length, 1, 'one error found')
+  assert.equal(def.errors[0].type, 'inlineImages')
+
+  RECESS.Constructor.prototype.validate = validate
+
+}()
+
 console.log("✓ linting".green)