postcss-placeholdit
v0.1.1
Published
PostCSS plugin that uses the placehold.it service to placehold broken background images.
Downloads
5
Maintainers
Readme
PostCSS PlaceholdIt
PostCSS plugin that uses the https://placehold.it service as a placeholder for broken background images. You provide the background image you want to use as one parameter, and then provide a placeholder size for the second parameter.
Note: This plugin is a work in progress.
.foo {
background-image: placeholdit("/brokenimage.jpg", "400x400");
}
If the background image exists:
.foo {
background-image: url("/brokenimage.jpg");
}
If the background image doesn't exists:
.foo {
background-image: url("https://placehold.it/400x400");
}
Usage
postcss([ require('postcss-placeholdit') ])
Options
domain
You can pass a domain option to the plugin so that the plugin knows what absolute URL to use to request your image.
Default: http://localhost
Note: The plugin will only prepend a domain if the background image doesn't have an http or https protocol specified.
postcss([ required('postcss-placeholdit')({ domain: 'http://example.com' }) ])
.foo {
/* Will request http://example.com/brokenimage.jpg */
background-image: placeholdit("/brokenimage.jpg", "400x400");
}
.foo {
/* Will request http://example.org/brokenimage.jpg */
background-image: placeholdit("http://example.org/brokenimage.jpg", "400x400");
}
See PostCSS docs for examples for your environment.