PostCSS Image Function

npm install @csstools/postcss-image-function --save-dev

PostCSS Image Function lets you easily generate a solid-color image from any color following the CSS Images 4 Specification.

.foo {
	background-image: image(transparent);
}

.foo {
	--bg-image: image(transparent);
}

/* becomes */

.foo {
	background-image: linear-gradient(transparent,transparent);
}

.foo {
	--bg-image: linear-gradient(transparent,transparent);
}

Usage

Add PostCSS Image Function to your project:

npm install postcss @csstools/postcss-image-function --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssImageFunction = require('@csstools/postcss-image-function');

postcss([
	postcssImageFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is not preserved.

postcssImageFunction({ preserve: true })

.foo {
	background-image: image(transparent);
}

.foo {
	--bg-image: image(transparent);
}

/* becomes */

.foo {
	background-image: linear-gradient(transparent,transparent);
	background-image: image(transparent);
}

.foo {
	--bg-image: linear-gradient(transparent,transparent);
}

@supports (background-image: image(red)) {
.foo {
	--bg-image: image(transparent);
}
}