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.