postcss-inline-base64

PostCSS Inline Base64

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

Usage

See the example below

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:

 - url(b64---{file}---)
 - url(b64---'{file}'---)
 - url(b64---"{file}"---)
 - url('b64---{file}---')
 - url("b64---{file}---")

input

@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('b64---https://cdn.lagden.in/xxx.png---')
}

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

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

output

@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('data:image/png;charset=utf-8;base64,iVBORw0K...SuQmCC');
}

.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.

License

MIT © Thiago Lagden