Postcss-inline-base64 NPM

PostCSS Inline Base64

PostCSS plugin used to replace value inside of url function to base64

Usage

See the example below

import postcssInlineBase64 from 'postcss-inline-base64'

postcss([
  postcssInlineBase64(options),
])

If you are using CommonJS module:

postcss([
  require('postcss-inline-base64')(options),
])

Options

Name	Type	Default	Description
baseDir	string	process.cwd()	Path to load files

Example

Use the syntax below inside url() function:

Variations:

 - b64---{file}---
 - b64---'{file}'---
 - b64---"{file}"---
 - 'b64---{file}---'
 - "b64---{file}---"

input

:root {
  --image: 'b64---./example.gif---';
}

@font-face {
  font-family: 'example';
  src: url('b64---./example.woff---') format('woff'), url('b64---./example.woff2---') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: gray;
  background-image: url(var(--image));
}

.notfound {
  background-image: url('b64---https://file.not/found.png---');
}

.ignore {
  background-image: url('https://cdn.lagden.in/mask.png');
}

output

:root {
  --image: 'data:image/png;charset=utf-8;base64,iVBORw0K...SuQmCC';
}

@font-face {
  font-family: 'example';
  src: url('data:font/woff;charset=utf-8;base64,d09...eLAAAA==') format('woff'), url('data:font/woff2;charset=utf-8;base64,d09...eLAAAA==') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: gray;
  background-image: url(var(--image));
}

.notfound {
  background-image: url('https://file.not/found.png');
}

.ignore {
  background-image: url('https://cdn.lagden.in/mask.png');
}

See PostCSS docs for examples for your environment.