postcss-inline
v1.2.0
Published
PostCSS plugin that puts fonts / and images as data URIs into your CSS
Downloads
211
Maintainers
Readme
PostCSS Inline
PostCSS plugin that puts images and fonts as data URIs into your CSS. (based on PostCSS Image Inline)
@font-face {
font-family: 'MyWebFont';
src: url('webfont.woff') format('woff');
}
.foo {
background-inline: 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==);
}
Usage
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.