PostCSS plugin that puts fonts / and images as data URIs into your CSS
OTHER License
PostCSS plugin that puts images and fonts as data URIs into your CSS. (based on PostCSS Image Inline)
The features of postcss-inline were merged into postcss-url
@font-face {
font-family: 'MyWebFont';
src: url('webfont.woff') format('woff');
}
.foo {
background-image: url(one_pixel_transparent.gif);
}
.bar {
background: url(one_pixel_transparent.gif);
}
@font-face {
font-family: 'MyWebFont';
src: url('data:application/x-font-woff;base64,AACH5BAEAAAAALA...==') format('woff');
}
.foo {
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}
.bar {
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}
postcss([ require('postcss-inline') ])
// Inline only woff files:
postcss([ require('postcss-inline')({filter: /.woff$/}) ])
// Specify the base path for the assets
postcss([ require('postcss-inline')({basePath: '/some/path'}) ])
// Delete assets after inline (use with care!)
postcss([ require('postcss-inline')({deleteAsset: true}) ])
See PostCSS docs for examples for your environment.