postcss-inline-base64

PostCSS plugin for encode the file to base64

Usage no npm install needed!

<script type="module">
  import postcssInlineBase64 from 'https://cdn.skypack.dev/postcss-inline-base64';
</script>

README

PostCSS Inline Base64

Node.js CI Coverage Status Snyk badge

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:

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

License

MIT © Thiago Lagden