postcss-placeholdit

0.1.1 • Public • Published

PostCSS PlaceholdIt Build Status

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.

Package Sidebar

Install

npm i postcss-placeholdit

Weekly Downloads

1

Version

0.1.1

License

MIT

Last publish

Collaborators

  • awayken