/postcss-inline-base64

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

Primary LanguageJavaScriptMIT LicenseMIT

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

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.

Donate ❤️

License

MIT © Thiago Lagden