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