postcss-base64

postcss-base64, a PostCSS plugin, replaces urls or values inside url() functions with their base64 encoded strings.

GitHub | NPM | @jelmerdemaat

Install

Install it from NPM:

npm install postcss-base64

Use

Load this plugin as a PostCSS module and give either or both of these options:

extensions

An array of extensions of files that have to be encoded, including the leading dot.

extensions: ['.svg']

pattern

A valid regex pattern to match against the string inside url() definitions to encode. Can not match file urls (use extensions for this).

pattern: /<svg.*<\/svg>/i

root

A root folder in which to search for the files. The path in the CSS file gets appended to this. Default: process.cwd() (current working directory).

root: 'any/path/to/files/'

prepend

String value to prepend before the outputted base64 code. Works only in combination with the pattern approach, for now.

prepend: 'data:image/svg+xml;base64,'

NodeJS

Using PostCSS in NodeJS, the approach would be as follows:

var opts = {
    extensions: ['.png', '.svg'], // Replaces png and svg files
    pattern: /<svg.*<\/svg>/i // Replaces inline <svg>...</svg> strings
};

output = postcss().use(base64(opts)).process(src).css;

Gulp

Using a build system like Gulp the approach would be as follows:

var gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    base64 = require('postcss-base64');

gulp.task('css', function () {
  gulp.src('test.css')
      .pipe(postcss([
        base64({
          extensions: ['.svg']
        })
      ]))
      .pipe(gulp.dest('output/'));
});

More info

Only strings inside url(...) functions are replaced.

Partially replacing strings with the pattern option is possible. If the input CSS is:

.selector {
  background-image: url('<svg>...</svg>');
}

And your options are:

var opts = {
  pattern: /<svg.*<\/svg>/i,
  prepend: 'data:image/svg+xml;base64,'
}

The output will be:

.selector {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4...');
}