https://github.com/jelmerdemaat/postcss-base64

PostCSS plugin, replaces values inside url() functions with their base64 encoded strings
https://github.com/jelmerdemaat/postcss-base64

Last synced: 4 days ago
JSON representation

PostCSS plugin, replaces values inside url() functions with their base64 encoded strings

• Host: GitHub
• URL: https://github.com/jelmerdemaat/postcss-base64
• Owner: jelmerdemaat
• License: other
• Created: 2015-11-09T13:19:22.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-23T17:03:18.000Z (almost 2 years ago)
• Last Synced: 2024-09-17T01:43:28.873Z (2 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/postcss-base64
• Size: 28.3 KB
• Stars: 17
• Watchers: 3
• Forks: 4
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
postcss-base64, a [PostCSS](https://github.com/postcss/postcss/) plugin, replaces urls or values inside `url()` functions with their base64 encoded strings.

[GitHub](https://github.com/jelmerdemaat/postcss-base64) | [NPM](https://www.npmjs.com/package/postcss-base64) | [@jelmerdemaat](https://twitter.com/jelmerdemaat)

[![Build Status](https://travis-ci.org/jelmerdemaat/postcss-base64.svg?branch=master)](https://travis-ci.org/jelmerdemaat/postcss-base64)

[![bitHound Code](https://www.bithound.io/github/jelmerdemaat/postcss-base64/badges/code.svg)](https://www.bithound.io/github/jelmerdemaat/postcss-base64)

[![bitHound Dependencies](https://www.bithound.io/github/jelmerdemaat/postcss-base64/badges/dependencies.svg)](https://www.bithound.io/github/jelmerdemaat/postcss-base64/master/dependencies/npm)

## Install

Install it from [NPM](https://www.npmjs.com/package/postcss-base64):

```

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: //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:

```js

var opts = {

    extensions: ['.png', '.svg'], // Replaces png and svg files

    pattern: //i // Replaces inline ... strings

};

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

```

### Gulp

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

```js

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:

```css

.selector {

  background-image: url('...');

}

```

And your options are:

```js

var opts = {

  pattern: //i,

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

}

```

The output will be:

```css

.selector {

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

}

```