Imagens embutidas com gulp-sass

A bússola que uso para projetos baseados em SCSS fornece contagem de funções úteis como inline-image. Descobri que esses estão realmente faltando quando alternado para gulp-sass(usando internamente node-sass) para folhas de estilo de pré-processamento.

Felizmente, existe uma maneira de escrever funções personalizadas para adicionar funcionalidades ausentes.

O exemplo a seguir ilustra a ideia

Fonte SCSS:

.my-class { 
  background: #{inline-image('src/images/transparent.png')};
}

Que seria compilado em:

.my-class {
  background: url(data:image/png;base64,iVBORw0KG...);
}

E aqui está a magia do Gulp

/* ----- inline-image(pathToFile) ----- */

function sassFunctions(options) {
  options = options || {};
  options.base = options.base || process.cwd();

  var fs        = require('fs');
  var path      = require('path');
  var types     = require('node-sass').types;

  var funcs = {};

  funcs['inline-image($file)'] = function(file, done) {
    var file = path.resolve(options.base, file.getValue());
    var ext  = file.split('.').pop();
    fs.readFile(file, function(err, data) {
      if (err) return done(err);
      data = new Buffer(data);
      data = data.toString('base64');
      data = 'url(data:image/' + ext + ';base64,' + data +')';
      data = types.String(data);
      done(data);
    });
  };

  return funcs;
}

/* ----- Gulp task ----- */

return gulp.src([
  'stylesheets/**/*.scss', 
  '!src/styles/**/_*.scss'
])
  .pipe(sass({
    outputStyle: argv.optimize ? 'compressed' : 'nested',
    functions: sassFunctions()
  }))
  .pipe(gulp.dest('css/'));
});