PostCSS Inline

PostCSS plugin that puts images and fonts as data URIs into your CSS. (based on PostCSS Image Inline)

Merged into postcss-url

The features of postcss-inline were merged into postcss-url

Deprecated

@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==);
}

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.