PostCSS plugin used to replace value inside of url function to base64
PostCSS plugin used to replace value inside of url function to base64
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),
])
Name | Type | Default | Description |
---|---|---|---|
baseDir | string | process.cwd() | Path to load files |
Use the syntax below inside url()
function:
Variations:
- b64---{file}---
- b64---'{file}'---
- b64---"{file}"---
- 'b64---{file}---'
- "b64---{file}---"
: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');
}
: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.
MIT © Thiago Lagden