postcss-base64

    0.7.1 • Public • Published

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

    GitHub | NPM | @jelmerdemaat

    Build Status bitHound Code bitHound Dependencies

    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,'

    excludeAtFontFace

    Boolean, defines wether @font-face rules are ignored. Default: true.

    excludeAtFontFace: false

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

    Install

    npm i postcss-base64

    DownloadsWeekly Downloads

    3,370

    Version

    0.7.1

    License

    SEE LICENSE IN LICENSE

    Last publish

    Collaborators

    • jelmer